|
|||
Probleme mit <div>-Elementen
Hallo,
ich möchte ein Layout mit div-Elemente entwerfen. Jetzt habe ich aber das Problem, dass die Nav-Box nur an der gewünschten Stelle angezeigt wird, wenn ich im umschließenden div-Container ein Zeichen (hier den ".") ausgebe. Andernfalls wird das Menu neben der kopf-Box angeordnet. Warum? Ich bin davon ausgegangen, dass ein geschachteltes Element auch nur innerhalb des umschließenden Elements angezeigt werden kann?! Code:
<body id="site"> <div id="kopfzeile"> <div id="topmenu"> <ul id="top-nav"> <li><a href="">Home</a></li> <li><a href="">News</a></li> <li><a href="">Links</a></li> <li><a href="">IMPRESSUM</a></li> </ul> </div> </div> <div id=mitte> <div id=links>. <ul id="nav"> <li><a href="">Home</a></li> <li><a href="">News</a></li> <li><a href="">Links</a></li> <li><a href="">IMPRESSUM</a></li> </ul> </div> </div> <div id=fuss> </div> </body> Code:
#site { background-color: black; } #kopfzeile { /*border: 1px solid #0000ff;*/ height: 159px; float: left; width: 810px; margin-top: 0px; background-image:url(images/titel.jpg); background-repeat:no-repeat; } #mitte { /*border: 1px solid #0000ff;*/ border-color: white; float: none; width: 810px; background-image:url(images/mitte.jpg); } #links { border: 1px solid #0000ff;*/ height: 200px; width: 180px; } #nav { border: 1px solid #00ff00; float: links; background-color: green; margin-top: 5px; } #nav li{ list-style: none; border: 1px solid #ffff00; float: rechts; background-color: green; list-style: none; margin-top: 5px; } #fuss { /*border: 1px solid #0000ff;*/ border-color: white; height: 108px; float: none; width: 810px; background-image:url(images/fuss.jpg); } #topmenu { /*border: 1px solid #0000ff;*/ height: 20px; float: none; width: 350px; margin-top: 105px; margin-left: 20px; } /*entfernt die Punkte der Aufzählung*/ ul#top-nav { list-style: none; padding: 0; margin: 0; float: left; white-space: nowrap; } /*ordnet das Menu in Reihe an*/ ul#top-nav li{ display: inline; padding: 0; float: left; margin: 0; font-size: 10px; height: 20px; line-height: 20px; white-space: nowrap; margin-right: 1px; } /*formatiert den Text*/ ul#top-nav li a{ /*border: solid;*/ font-family: Arial, Helvetica, sans-serif; font-weight: normal; height: 20px; display: block; padding-left: 5px; padding-right: 5px; text-decoration: none; color: #FFFFFF; margin-left: 1px; white-space: nowrap; background-image:url(images/rechts.gif); background-position:bottom right; background-repeat:no-repeat;*/ } Gruß, Christian |
Sponsored Links |
|
||||
Gib uns mal den kompletten Code als Online Beispiel und mach vielleicht mal einen Screenshot vom Problem.
PS: Wieso machst du diese vielen Divs?
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ |
Sponsored Links |
|
|||
Hi,
Zitat:
Screenshot ohne den ".": ohne "." Zitat:
|
|
|||
Validier bitte dein Stylesheet. "rechts" ist kein gültiger Wert für Float.
Wenn du möchtest, das ein Element ein vorheriges Float nicht umfließt, dann brauchst du clear (nicht float:none). Warum floatest du #kopfzeile? Arbeite bitte die Artikel unter FAQ Punkt 2 durch. Dort bekommst du die Grundlagen zum Umgang mit Float und Clear. |
|
||||
Grundsätzlich sollte man keine einzelnen Elemente mit einem semantisch unaussage kräftigen Element umschließen. D.h. wieso machst du zwei Div-Elemente um die <ul id="navi">? Dort ist doch schon ein Element, dieses kannst du bequem positionieren und formatieren.
Lies mal hier: Cascading Style Sheets { Vollreferenz zu CSS 1 und CSS 2.1 : FLOAT } Edit: fricca war auch wieder flott.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ Geändert von Crizzo (09.09.2007 um 19:11 Uhr) |
|
|||
Hi,
Zitat:
Zitat:
Zitat:
Gruß, Christian |
|
||||
FAQ: http://xhtmlforum.de/40267-faq-haeuf...d-haeufig.html
Wenn du das float-Prinzip verstanden hast, sollte sich die eine Frage erübrigen.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ |
|
|||
Zitat:
Nimm Padding für das umgebende Element statt Margin. Mindestens eines deiner Divs im Kopfbereich ist überflüssig. Zitat:
|
|
|||
Hi,
Zitat:
Zitat:
Gruß, Christian |
Sponsored Links |
|
|||
Zitat:
Nimm dir Zeit für Float und Clear. Das Thema ist nicht banal. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Background-Grafik neben navi-li Elementen - IE Probleme | BobbyKreuzberg | CSS | 3 | 14.09.2010 12:22 |
Probleme mit padding und <li> Elementen... | goldenboy | CSS | 3 | 29.09.2009 19:13 |
IE: Probleme mit ul-Menü | Ares | CSS | 4 | 18.10.2006 12:42 |
<div> ohne Inhalt macht Probleme XHTML 1.1 | SURE612 | (X)HTML | 12 | 06.11.2005 13:21 |
<div> Probleme die 2. | noplan | CSS | 8 | 28.10.2005 18:57 |