nicht angemeldet
Problem bei Div und border-bottom mit floating
Hallo,
ich habe mich an float:left versucht und bin auf ein Problem gestoßen.
Ich habe versucht mein Layout abstrahiert so zu gestalten:
<div für rahmen>
<div>headbanner</div>
<div style="float:left">navi</div>
<div>inhalt (hier include-tag)</div>
<div style="clear:left">footer</div>
</div>
Das hat als vollständiger Code auch wunderbar geklappt.
Alle <div> wurden relativ positioniert - nur der "rahmen" ist absolut positioniert worden.
Ich habe beim "inhalt" z.B. einen Include oder einfach Text gesetzt.
Hier gibt es nun ein Problem, dessen Urgrund ich nicht finde.
Im Firefox wird der Text nicht richtig angezeigt (Breite stimmt nicht), im Internet Explorer z.B. geht es kurioserweise richtig :/
Ich nutze ein "border-bottom: 1px solid #E0E0E0;" für Klasse "header" (hier: Überschriften), damit ein Absatz <p class="header">Titel</p> eine hellgraue Unterstreichung erfährt.
Auch hier habe ich im Firefox das Problem, dass die graue Linie bereits in der "navi"-<div> beginnt und dafür zu früh aufhört.
Ändere ich aber die Werte für "left:" ab, rutscht mein ganzer Textbeginn weiter nach rechts (zu weit nach rechts, sobald die hellgraue Linie stimmt).
Wenn die HTML aber über Include aufgerufen wird, ist eben diese hellgraue Unterstreichung seltsamerweise nicht mehr auf das <div> mit dem Content beschränkt, sondern zieht sich zusätzlich auch noch ungewollt durch die Navigations-<div> hindurch...
Insgesamt komme ich einfach nicht weiter mit der Sache und hoffe, ihr könnt mir dabei weiterhelfen.
Hier ist die Seite: http://gamegod.bplaced.net/html/testindex.php
Nur HTML: http://gamegod.bplaced.net/html/Untitled-4.html
Stylesheet: http://gamegod.bplaced.net/html/style3.css
So _sollte_ es aussehen (schlussendlich sollte es etwas zentrierter in der rechten Abteilung sein): http://img257.imageshack.us/my.php?image=unbenannt1if7.jpg
So zeigt der Firefox es an:
http://img84.imageshack.us/my.php?image=unbenannt1xc7.jpg
Ich würde mich über eine Antwort sehr freuen.
Herzlichen Dank.
mfg
Tales
-
Hi,
Ich nutze ein "border-bottom: 1px solid #E0E0E0;" für Klasse "header" (hier: Überschriften), damit ein Absatz <p class="header">Titel</p> eine hellgraue Unterstreichung erfährt.
Ja was denn jetzt - Ueberschriften, oder Fliesstextabsaetze?
Wenn es Ueberschriften sein sollen, dann nutze dafuer Hx - alles andere ist hochgradig bloedsinnig.Auch hier habe ich im Firefox das Problem, dass die graue Linie bereits in der "navi"-<div> beginnt
Natuerlich, denn das Block-Element (bei dir faelschlicherweise P, aber Hx waere auch eins) befindet sich janach Definition nach wie vor an dem Platz, den es auch ohne gefloatetes Element daneben einnehmen wuerde. Lediglich seine inline-Inhalte fliessen um das gefloatete herum.
und dafür zu früh aufhört.
Die Linie hoert da auf, wo auch dein Div mit der Klasse "include" "zu Ende" ist.
Ändere ich aber die Werte für "left:" ab, rutscht mein ganzer Textbeginn weiter nach rechts (zu weit nach rechts, sobald die hellgraue Linie stimmt).
Hae, was willst du denn jetzt mit left?
Ach ja, vorher war ja schon davon die Rede, dass "Alles" relative positioniert waere - wozu denn bitte?Nutze float fuer die Elemente, die von anderen Inhalten umflossen werden sollen - und lasse letztere so, wie sie sind.
Wenn du Abstaende haben willst - dafuer sind idR. margin/padding zustaendig - relative Positionierung dafuer zu "missbrauchen", ist im allgemeinen Unfug.MfG ChrisB
-
Hi und danke für deine schnelle Antwort!
Ja was denn jetzt - Ueberschriften, oder Fliesstextabsaetze?
Wenn es Ueberschriften sein sollen, dann nutze dafuer Hx - alles andere ist hochgradig bloedsinnig.Das wird allerdings so sein :/
Ich bearbeite einen "alten" Quelltext aus Frontpage, den ich in valides XHTML/CSS umschreiben soll, während alles genauso aussehen soll wie vorher.
Dieses "<p>" ist noch ein Überbleibsel davon, dem ich nur bei "class=header" die "" hinzugefügt hatte.Sollte man hierfür besser Hx (für vergleichbaren Effekt) nehmen?
Natuerlich, denn das Block-Element (bei dir faelschlicherweise P, aber Hx waere auch eins) befindet sich janach Definition nach wie vor an dem Platz, den es auch ohne gefloatetes Element daneben einnehmen wuerde. Lediglich seine inline-Inhalte fliessen um das gefloatete herum.
Ach so. Ja das ist eine Erklärung, danke ^^
Die Linie hoert da auf, wo auch dein Div mit der Klasse "include" "zu Ende" ist.
Auch wenn der IE kompletter Müll ist... wieso interpretiert der das so gewaltig anders als die anderen Browser?
Hae, was willst du denn jetzt mit left?
Na ja, ich hatte in Tutorials gelesen, man könne eine Div links via float einbauen und dann eine weitere in gewünschtem Abstand mit Xpx positionieren, indem man position: relative; left:ABCpx; usw nutzen würde...
Wenn ich z.B. 5px eingäbe, würde also die content-Div 5px neben der navi-Div sein - allerdings heißen hier 5px optisch (jetzt sehr aus Sicht eines Kenntnislosen) einmal, dass 5px sich auf den Rand der Eltern-Div beziehen und zum anderen Mal, dass 5px sich auf die vorherige Div beziehen (je nach IE oder FF... etc).
Ist aber (s.o. auch) irgendwo Blödsinn...Ach ja, vorher war ja schon davon die Rede, dass "Alles" relative positioniert waere - wozu denn bitte?
Das hatte den Grund, dass ich erst absolute Positionierung hatte.
Allerdings ist der Inhalt, sowie eigentlich auch die Navigation (letztere natürlich seltener) variabel lang.Daher hatte z.B. eine absolut positionierte Navigation bei sehr wenig Inhalt den Nachteil, dass sie "über den Rand" hinaus nach unten dargestellt wurde.
Ich wusste nicht, wie ich dafür sorgen könnte, dass die div, die sich um den Hintergrund kümmert, sich so weit verlängert, dass jeweils das längste zählt (Navi oder Content, je nachdem).
Beim Recherchieren stieß ich darauf, dass es bei absoluten Kinderelementen nicht ginge, bei absoluten parallelen Divs gleicher Ebene schon gar nicht, da a) ein Elternelement existieren müsse, was entsprechend verlängert würde und b) die inneren Sachen relativ dazu stehen müssten, damit es klappt...
Das habe ich versucht - klappte auch so erstmal ganz gut (je länger eine Sache war, desto länger wurde der Rahmen einschl. Footer).
Nur konnte ich hier Navi und Content nicht nebeneinander stellen.
Und damit wiederum kam ich auf die float-Geschichte.Eine Tabelle wäre natürlich auch möglich gewesen (und eine div für Navi und Content). Allerdings gibt es auch damit wieder Positionierungsprobleme, je nachdem, ob man IE, FF, NS etc... nutzt, da dort 13px nicht gleich 13px sind :/
Nutze float fuer die Elemente, die von anderen Inhalten umflossen werden sollen - und lasse letztere so, wie sie sind.
Ok, also in dem Sinne müsste ich z.B. eher Content float right machen, damit das umflossen wird und von ihm selbst nichts übersteht?
Wenn du Abstaende haben willst - dafuer sind idR. margin/padding zustaendig - relative Positionierung dafuer zu "missbrauchen", ist im allgemeinen Unfug.
Ja, das habe ich zuerst versucht gehabt (padding:0px 13px; oder margin:20px etc.) - allerdings wollte es nicht überall einheitlich aussehen, was mich dann zu o.g. Aussagen im Web führte, dass man Positionierung nutzen solle :/
Ich hoffe, ihr könnt mir nochmal ein wenig in der Sache weiterhelfen.
mfg
Tales-
Hi,
Dieses "<p>" ist noch ein Überbleibsel davon, dem ich nur bei "class=header" die "" hinzugefügt hatte.
Sollte man hierfür besser Hx (für vergleichbaren Effekt) nehmen?
Man nimmt es deshalb, weil es den Inhalt am sinnvollsten auszeichnet.
Ok, also in dem Sinne müsste ich z.B. eher Content float right machen, damit das umflossen wird und von ihm selbst nichts übersteht?
Noe, ich wuerde schon die Navigation floaten.
Wenn der Rest darunter einen Abstand vom Rand haben soll - dann verpasse ihm ein entsprechendes margin.
MfG ChrisB
-
Hi,
ich habe das jetzt mal so mit den Divs gemacht.
Also Navi weiter als float: left und der Inhalt ist nun mit einem entsprechenden Linksrahmen ausgestattet.Das funktioniert anscheinend browserübergreifend ohne Probleme und ist XHTML-valide.
Bleibt mir also nur noch zu sagen: Herzlichen Dank für die Hilfe, ChrisB!! :)
mfg
Tales
-
-
-