[CSS]Positionierung

**kasimir83** · 13-07-2004, 20:42

schaut mal nach http://new.ur2cool.de.

Lasst euch vom lustig Bunten nicht schocken. Problem ist die Positionierung, es ist zwar alles am rechten Fleck, aber die Höhe des iframe-Layers passt nicht mehr. Schaut mal in die Date http://new.ur2cool.de/css/text.css und klärt mich bitte auf.

**dkdenz** · 13-07-2004, 21:42

Klär mich mal auf.
Dein .iframe hat eine Höhe von (Moment)...420px.
Auf dem Moni siehts auch in etwa so aus.
Was stimmt denn nicht?
Oder bin ich einfach grade zu blöde?

**planet4** · 13-07-2004, 21:56

hallo kasi, hier meine Interpretation deiner Dateien:
du hast hier einen <div>, genannt iframe, mit der höhe von 420 px,
darin befindet sich ein <div> mit dem Namen nav und mit der höhe von 420px, und ein
weiteres <div> mit Namen content und ebenfalls einer höhe von 420 px, die beiden
zusammen machen:
420 + 420 = 840
na, da denkt sich das iframe-<div>, in dem sich diese beiden befinden:
muss ich mich wohl 820px hoch strecken!!

planet4.

**dkdenz** · 13-07-2004, 22:02

...da ist was dran!

**Albu** · 13-07-2004, 23:50

Zitat von dkdenz

...da ist was dran!

Sorry, aber: IFRAMEs und DIVs können nicht denken....

**kasimir83** · 14-07-2004, 05:55

Das hilft mi jetzt aber auch nicht weiter...

**dkdenz** · 14-07-2004, 08:06

Zitat von Albu

Sorry, aber: IFRAMEs und DIVs können nicht denken....

@Albu:
Tut mir leid, habe ein

vergessen...

**planet4** · 14-07-2004, 08:07

Guten Morgen,
schau mal hier:

HTML-Code:

.nav {
	float:left;
	width:150px;
	height:420px;
	background-color:#FFFFFF;
}

.content {
	width:600px;
	height:420px;
	background-color:#FF0000;
}

wenn du diese beiden divs gar nicht positionierst, liegen sie innerhalb des
iframe-divs und alles müsste so aussehen, wie es soll... das verstehen auch alle
Browser besser, bei mir sieht's jedenfalls im IE und Opera gleich aus, Mozialla
braucht noch ne Extrawurst: im content-div "float:right;" sonst setzt er das zu weit
links hin.
ansonsten könnte man ja auch auf die vielen divs verzichten und einfach nav und
content in eine tabelle schreiben, als 2 Spalten, diese kann dann ja in einem positionierten
div liegen....

planet4.

**kasimir83** · 14-07-2004, 09:11

Naja, aber wenn ich's mit float right mache ist alles rechts...

Ich probier nachher noch mal ausführlich, muss gleich zur Prüfung.

**planet4** · 14-07-2004, 09:16

nee, wenn du dem content-div "float:right" gibst,heißt das nur,
dass er rechts von dem anderen div, dem nav-div, steht, auf
seinen eigenen Inhalt hat das ja gar keinen Einfluß...
oder wie meinst du das?
naja, viel Glück erst mal!

planet4.

**womstar** · 14-07-2004, 14:17

[klugscheißern]

leider ist es sehr schlechter stil, mit einer tabelle zu versuchen den content in die mitte zu holen, was, genauso wenn du ein div nehmen würdest, nur im IE in der mitte sitzt.

text-align:center, heißt ja auch eigentlich text ausrichtung zentiert.
der IE ist der einzige der es anders versteht, nehmlich auf einer anderen logik-ebene, welche nicht unlogisch erscheint.
er setzt alles zentriet, was sich im jeweiligen befindet.

dennoch denke ich das die anweisung klar und deutlich ist, wenn text, dann nur text.

was kann man hier also tun, weil in anderen browsern ist alles linksbündig?
da musst ich auch ne weile frickeln, probieren und auch mal bei anderen vorbeischauen.

Code:

<style type="text/css">
#contentcenter {

	margin: auto;
	width: 600px;
}

#backgroundcontent {

	width: 600px;
	text-align: left;
}
</style>

<body>
<div id="contentcenter">
	<div id="backgroundcontent">&nbsp;</div>
</div>
</body>

hier mit funktioniert es in allen gängigen, ausreichend css verstehenden browsern:
IE4, 5, 5.5
opera6, opera7
mozilla,
firefox,
NS6, 7

in opera5 geht es auch, nur wird man nach einiger zeit, wenn sich die seite weiter aufbaut sehen, dass sich die horizontale scrollbar verflüchtig.
dafür gibt es auch eine möglichkeit oder variante.
aber da opera5 ja fast garnicht mehr verwendet wird und der bug ja überhaupt nicht gravierend ist, ist es an dieser stelle nicht notwendig.
is halt nur was für perfektionisten.

desweiteren, kasimir, fällt mir auf das du nur mit class's arbeitest.
hier sollte dir die sinnhaftigkeit von class und id noch mal durch den kopf gehen.
vorne weg, im prinzip ist es egal, es funktioniert beides.
aber nicht nur deine html seite sollte struktur bekommen, auch sollte dein css strukturiert sein.

so dann, class's kann man mehrmals verwenden.
demnach ist eine konkrete definition für ein element, was in eine class geschrieben wurde, sinn entfremdet. wenn etwas eindeutig definiert wird, ist eine id genau das richtig.

also solltest du eindeutige definitionen, bzw. formatierungen in css-id anweisungen schreiben.
sprich:

#meinelement {

}

und um formatierungen mehrmals verwenden zu können, z.b. für h-tag, solltest du eine css-class definieren.
sprich:

.meinelemente {

}

[/klugscheißern]

ich hoffe es war nicht zu viel geklugscheißert, weil ich nicht direkt zum thema gesprochen hab.
ich kann mir aber denken, dass ersteres problem für dich auf kommen wird.
und im prinzip denke ich auch weist du es ja, jedenfalls das mit den id's und class's.

grüße robert

**kasimir83** · 14-07-2004, 14:23

Das hab ich zwar jetzt größtenteils nicht verstanden

, aber probieren tu ich's trotzdem mal.

**womstar** · 14-07-2004, 14:26

was hast du nicht verstanden?

**kasimir83** · 14-07-2004, 14:39

Deine Standpauke schon, weiß ich auch, kommt davon wenn man Abends noch Geistesblitze hat, aber wie das gehen soll verstehe ich noch nicht, schau ich mir aber nachher genauer an.

**womstar** · 14-07-2004, 14:43

schade, als standpauke sollte das nicht gedacht sein, ehr hinweis.

im ganzen ging es nicht um dein problem, sondern nur um eins was sicher auftauchen würde (mittiger kontent in allen browsern) und die strukturierung von css, bzw. class und id verwendung.

also nichts böses

Thema: [CSS]Positionierung

LinkBack

Themen-Optionen

Anzeige

[CSS]Positionierung

AW: [CSS]Positionierung

AW: [CSS]Positionierung

AW: [CSS]Positionierung

AW: [CSS]Positionierung

AW: [CSS]Positionierung

AW: [CSS]Positionierung

AW: [CSS]Positionierung

AW: [CSS]Positionierung

AW: [CSS]Positionierung

AW: [CSS]Positionierung

AW: [CSS]Positionierung

AW: [CSS]Positionierung

AW: [CSS]Positionierung

Lesezeichen

Lesezeichen

Berechtigungen

Swiper Slide Activ ID auslesen

Swiper Slide Activ ID auslesen

Swiper Slide Activ ID auslesen