|
|||
es "dropped" nicht im IE
Vorne weg: ich bin Anfänger und versuche gerade mein ersten kleinen Tippelschritte im CSS.
Nun stehe ich gleich vor einem dicken ... nein, nicht das P-Wort, sagen wir, eine große Herausforderung: ich soll ein drop-down Menü bauen, das auch noch mit NOF redet. Und darum bin ich hier. In einem Wort: Hilfe! Es funktioniert einfach nicht. Im FF sieht es gut aus, IE fährt das sub nicht aus und Opera zerschießt die Liste. Und wenn ich das Ganze dann im NOF einbaue, dann ... aber soweit bin ich noch nicht. Besser gesagt, es muss erst einmal überhaupt funktionieren. Hier also meine konkreten Fragen: Hat das was mit dem z-index zu tun? Und an welcher Stelle muss dieser Quirks-Hinweis rein? Das Script basiert auf einem Tutorial. Leider habe ich die Seite nicht gespeichert, kann sie aber finden, falls es wichtig ist. HTML-Code:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> #navigation { width:100%; height:20px; background-color:#cfa86f; } #navigation ul {margin:0px; padding:0px;} #navigation ul li { height:20px; float:left; list-style:none; margin-left:10px; position:relative; display:inline; } #navigation li a { color:#2b1712; text-decoration:none; } #navigation li a:hover { color:#fdfae9; text-decoration:none; } #navigation li ul { margin:0px; padding:0px; display:none; position:absolute; left:0px; top:20px; background-color:#cfa86f; } #navigation li:hover ul { display:block; width:140px; } #navigation li li { list-style:none; display:list-item; } #navigation li li a { color:#2b171; text-decoration:none; } #navigation li li a:hover {color:#fdfae9; text-decoration:none;} </style> </head> <body> <div id="navigation"> <ul> <li> <a href="#">Startseite</a> </li> <li> <a href="#">Seite 1</a> <ul> <li><a href="#">Sub1</a></li><br> <li><a href="#">Sub2</a></li><br> <li><a href="#">Sub3</a></li><br> <li><a href="#">Sub4</a></li><br> <li><a href="#">Sub5</a></li><br> </ul> </li> <li> <a href="#">Seite 2</a> </li> <li> <a href="#">Seite 3</a> </li> <li> <a href="#">Extern 1</a> </li> <li> <a href="#">Seite 4</a> </li> <li> <a href="#">Extern 2</a> </li> </ul> </div> </body> </html> Geändert von happylee (28.02.2011 um 11:56 Uhr) |
Sponsored Links |
|
|||
Ich bin's schon wieder. Zumindest habe ich jetzt bei IE eine Submenü-Anzeige! Allerdings (noch) nicht mit Zeilenumbruch. Was so ein bißchen Doctype alles bringt
Wie sage ich ihm jetzt, dass er einen Zeilenumbruch einfügen soll? Mit float? Gruß, lee Update: HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> #navigation { width:100%; height:20px; background-color:#cfa86f; } #navigation ul {margin:0px; padding:0px;} #navigation ul li { height:20px; float:left; list-style:none; margin-left:10px; position:relative; display:inline; } #navigation li a { color:#2b1712; text-decoration:none; } #navigation li a:hover { color:#fdfae9; text-decoration:none; } #navigation li ul { margin:0px; padding:0px; display:none; position:absolute; left:0px; top:20px; background-color:#cfa86f; } #navigation li:hover ul { display:block; width:140px; } #navigation li li { list-style:none; display:list-item; } #navigation li li a { color:#2b171; text-decoration:none; } #navigation li li a:hover { color:#fdfae9; text-decoration:none; } </style> </head> <body> <div id="navigation"> <ul> <li> <a href="#">Startseite</a> </li> <li> <a href="#">Seite 1</a> <ul> <li><a href="#">Sub1</a></li><br> <li><a href="#">Sub2</a></li><br> <li><a href="#">Sub3</a></li><br> <li><a href="#">Sub4</a></li><br> <li><a href="#">Sub5</a></li><br> </ul> </li> <li> <a href="#">Seite 2</a> </li> <li> <a href="#">Seite 3</a> </li> <li> <a href="#">Extern 1</a> </li> <li> <a href="#">Seite 4</a> </li> <li> <a href="#">Extern 2</a> </li> </ul> </div> </body> </html> |
Sponsored Links |
|
|||
Ääähh nein,
bitte lies Dir Little Boxes online durch. Startseite - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller) Im konkreten Beispiel dürfte display:block bei den verschachtelten Li's das sein, was die "Untereinanderdarstellung" ("Zeilenumbruch") hervorruft.
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
|
|||
Der verlinkte "Artikel" ist ein ganzes Buch. Darin werden Grundlagen vermittelt. Damit solltest du beginnen.
Für die ersten "Tippelschritte" ist eine Dropdown-Navigation ungeeignet -- es hat einen Grund, dass Peter Müller dieses Thema erst in Band 2 bringt. Wenn du eine neue Sprache lernst schreibst du doch auch nicht als erstes einen Roman. Zu deinem Code: Du darfst keine BRs irgendwo in Listen verteilen. Validieren!
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Genau die Motivation, die ich brauche, aber trotzdem danke.
Das mit den BRs war eine Verzweiflungstat. Habe sie inzwischen wieder entfernt, musste allerdings feststellen, dass das Ergebnis sowohl mit als auch ohne das Gleiche ist. Noch habe ich nicht aufgegeben |
Themen-Optionen | |
Ansicht | |
|
|