|
|||
Ul mit Sub-Ul Navigation macht Darstellungsprobleme im Opera
Ich habe hier folgende Navigation (von listmatic), wo sich das Sub-Ul nicht floeten lässt wenn es absolute positioniert wird:
Code:
<html> <head> <title>Test</title> <style type="text/css"> html, body { padding: 0; margin: 0; } body { color: #FFC000; background-color: #000000; font-family: verdana, sans-serif; font-size: 1em; } #navigation { width: 100%; height: 17px; font-size: 11px; background-color: #000000; white-space: nowrap; position: relative; padding: 0; margin: 0; } #navigation li { float: left; margin: 0 0 0 2px; border-width: 1px 1px 0 1px; border-style: solid; border-color: #AAAAAA #555555 #FFC000 #999999; list-style-type: none; } #navigation li a { width: 90px; height: 16px; color: #666666; border-width: 1px 1px 0 1px; border-style: solid; border-color: #CCCCCC; background-color: #EEEEEE; text-decoration: none; text-align: center; position: relative; padding: 0 4px; display: block; } #navigation li a:hover { text-decoration: underline; } #navigation li#active a { color: #000000; font-weight: bold; border-color: #FFD45F #AA7C22 #694E0A #FFE396; background-color: #FFC000; } #navigation li#active a:hover { text-decoration: none; } #navigation li#logout { float: right; margin: 0 2px 0 0; } #navigation li#logout a { color: #000000; font-weight: bold; border-color: #FFD45F #AA7C22 #694E0A #FFE396; background-color: #FFC000; } #navigation li#logout a:hover { text-decoration: underline; } #navigation ul#subnavigation { white-space: nowrap; position: absolute; top: 20px; left: 0; padding: 0; margin: 0; } #navigation ul#subnavigation li { border: 0; margin: 0; } #navigation ul#subnavigation li a { width: 110px; color: #000000; font-weight: normal; background-color: #EEEEEE; border: 0; } #navigation ul#subnavigation li a:hover { text-decoration: underline; } #navigation ul#subnavigation li#subactive a { background-color: #CCCCCC; text-decoration: none; } #subnavigation_placeholder { height: 22px; font-size: 11px; background-color: #EEEEEE; border-top: 3px solid #FFC000; border-bottom: 3px solid #FFC000; } </style> </head> <body> <ul id="navigation">[*] Startseite <li id="active"> Gästebuch <ul id="subnavigation"> <li id="subactive">Eintrag erstellen[*]Einträge bearbeiten[/list] [*] Benutzer [*] Einstellungen <li id="logout">Abmelden[/list] <div id="subnavigation_placeholder"></div> </body> </html> |
Sponsored Links |
|
||||
Re: Ul mit Sub-Ul Navigation macht Darstellungsprobleme im O
Zitat:
Zitat:
|
Sponsored Links |
|
|||
Zitat:
Zitat:
Was soll es dir bringen, wenn das ul#subnavigation gefloatet ist? |
|
|||
Zitat:
Zitat:
|
|
|||
Zitat:
Zitat:
Aber: das absolut positionierte ul braucht eine Angabe für die Breite. Ebenso alle gefloateten Listenelemente. float ohne width macht _immer_ Probleme in Opera (in CSS2 war das noch nicht zulässig, erst seit 2.1) |
|
|||
Aber wie mache ich die Liste horizontal und positioniere das Sub-Ul unter dem ersten Listenelement der Elternliste? Normalerweise wird ja das Sub-Ul immer unter dem Elternlistenelement positioniert.
|
|
|||
Zitat:
Wenn #navigation li dieses Elternelement sein soll, dann musst du es ebenfalls positionieren (relative). Ich verstehe deine Frage aber nicht wirklich. |
Sponsored Links |
|
|||
Ich habe jetzt nochmal alles überarbeitet und bin auch zu einer "Verbesserung" gekommen, aber beim floaten des Sub-Uls gibt es immer noch Probleme. Ich weis jetzt wirklich nicht mehr weiter.
Könnt ihr bitte mal gucken: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Test</title> <style type="text/css"> body { color: #FFC000; background-color: #000000; font-family: verdana, sans-serif; font-size: 1em; } #navigation { font-size: 0.7em; position: relative; border-bottom: 3px solid #FFC000; width: 100%; padding: 0; margin: 0; } #navigation li { float: left; white-space: nowrap; list-style-type: none; background-color: #EEEEEE; border-width: 1px 1px 0 1px; border-style: solid; border-color: #AAAAAA #555555 #EEEEEE #999999; margin: 0 0 0 2px; height: 1em; width: 10%; } #navigation li a { display: block; color: #666666; border-color: #CCCCCC; border-width: 1px 1px 0 1px; border-style: solid; text-decoration: none; text-align: center; padding: 2px; } #navigation li a:hover { text-decoration: underline; } #navigation li#active { background-color: #FFC000; } #navigation li#active a { color: #000000; font-weight: bold; border-color: #FFD45F #AA7C22 #694E0A #FFE396; } #navigation li#active a:hover { text-decoration: none; } #navigation li#logout { float: right; background-color: #FFC000; margin: 0 2px 0 0; } #navigation li#logout a { color: #000000; font-weight: bold; border-color: #FFD45F #AA7C22 #694E0A #FFE396; } #navigation ul#subnavigation { position: absolute; left: 0; margin: 3px 0; padding: 0; width: 100%; } #navigation ul#subnavigation li { border: 0; margin: 0; } #navigation ul#subnavigation li a { color: #000000; font-weight: normal; border: 0; } #navigation ul#subnavigation li a:hover { text-decoration: underline; } #navigation ul#subnavigation li#subactive { background-color: #CCCCCC; } #navigation ul#subnavigation li#subactive a { text-decoration: none; } </style> </head> <body> <ul id="navigation"> [*] Text <li id="active"> Text <ul id="subnavigation"> <li id="subactive">Text [*]Text [*]Text [*]Text [/list] [*] Text [*] Text <li id="logout">Text [/list] </body> </html> Wenn ich das width aus #navigation li entfernen floatet zwar alles richtig, aber die Elemente sind dann alle unterschiedlich groß. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Ausrichtung Kalender | greece4u | CSS | 20 | 14.05.2012 14:32 |
Navigation ist nicht mittig | Schokokrapfen | CSS | 29 | 20.09.2011 00:19 |
Problem mit Navigation | safari | CSS | 12 | 20.04.2011 12:11 |
Float-Problem? | mischaef | CSS | 33 | 20.10.2010 17:20 |
Javascript UL Navigation im IE6 | ven | CSS | 7 | 29.04.2008 16:29 |