|
|||
Dropdown-Menü nicht in jedem Browser einheitlich
Hallo,
über ein Tutorial habe ich mir ein Dropdown-Menü zusammengebaut (von wo genau weiß ich nicht mehr) und dieses über ein anderes Stylesheet optisch (im Google-Stil) verändert. 1 : 1 kopiert habe ich auch nicht, das was dort steht verstehe ich soweit auch. Jedenfalls brauche ich dieses Menü sowohl im IE 8 als auch im Firefox 5. Im IE 8 sind die Menüeinträge bis auf die letzte Oberkategorie nicht untereinander, wie man hier sehen kann: Im FireFox 5 hingegen schaut es noch ganz normal aus: Wenn ich die gleiche Seite im Chromium (Build 18 oder 19) und Opera (11) ansehe, wird das Menü auch richtig dargstellt im Firefox 9 wiederum nicht (im 5er geht es ja noch). Zur Erläuterung noch: um den Button Suchen ist ein DIV-Container (grün), um die restlichen drei Buttons ebenso (orange) und um diese beiden ein weiteres (rot). Vielleicht liegt es auch schon daran? Jetzt ist erst mal die Frage ob das an der Breite der einzelnen Menüeinträge (was aber nichts brachte das zu verändern) oder an etwas anderem liegt? Die Bilder allein reichen sicher nicht, daher noch mein css für das Menü: Code:
*{ margin: 0px; padding: 0px; } #navcon { width: 100%;} #nav { font-family: arial, sans-serif; width: 300px; font-size: 14px; margin: 0px auto; } #nav ul { list-style-type: none; } #nav ul li { float: left; position: relative; } #nav ul li a { text-align: center; padding: 8px 15px; display: block; text-decoration: none; } #nav ul li ul { display: none; } #nav ul li:hover ul { display: block; position: absolute; } /* Oberkategorie */ #nav ul li:hover ul li a { display: block; background: rgb(153, 153, 153); color: #ffffff; width: 109px; text-align: center; border-bottom: 1px solid #f2f2f2; border-right: none; } /* Unterkategorien */ #nav ul li:hover ul li a:hover { background: rgb(201, 201, 201); } [CSS] google_gui - Pastebin.com und hier noch das HTML-Dokument: HTML-Code:
<!DOCTYPE html> <html> <head> <title>Lager</title> <link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="menu_style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <div id="bar"> <h1>database</h1> <input name="search" type="text" size="30" maxlength="55"> <div class="wrap-this"> <div class="wrap-search-button"> <a href="#" class="button big">Suche</a> </div> <div class="wrap-menu-box"> <div id="navcon"> <div id="nav"> <ul> <!-- Suchkriterien --> <li><a href="#" class="button big">Suchkriterium</a> <ul> <li id="s1"><a style="width: 109px;" href="#">Materialnummer</a></li> <li id="s2"><a style="width: 109px;" href="#">Materialkurztext</a></li> <li id="s3"><a style="width: 109px;" href="#">Lagerort</a></li> <li id="s4"><a style="width: 109px;" href="#">Regal</a></li> <li id="s5"><a style="width: 109px;" href="#">Mengeneinheit</a></li> </ul> </li> <!-- Vergleich --> <li><a href="#" class="button big">Filter</a> <ul> <li id="f1"><a style="width: 40px;" href="#"><</a></li> <li id="f2"><a style="width: 40px;" href="#">=</a></li> <li id="f3"><a style="width: 40px;" href="#">></a></li> <li id="f4"><a style="width: 40px;" href="#">< ></a></li> </ul> </li> <!-- Anzahl --> <li><a href="#" class="button big">Anzahl</a> <ul> <li id="a1"><a style="width: 55px;" href="#">1</a></li> <li id="a2"><a style="width: 55px;" href="#">5</a></li> <li id="a3"><a style="width: 55px;" href="#">10</a></li> <li id="a4"><a style="width: 55px;" href="#">25</a></li> <li id="a5"><a style="width: 55px;" href="#">50</a></li> <li id="a6"><a style="width: 55px;" href="#">100</a></li> <li id="a7"><a style="width: 55px;" href="#">500</a></li> <li id="a8"><a style="width: 55px;" href="#">1000</a></li> </ul> </li> </ul> </div> </div> </div> </div> </div> </body> </html> |
Sponsored Links |
|
|||
Ich glaube ich komme dem ganzen schön näher, meintest du das mit dem aufheben in etwa so:
HTML-Code:
<!-- Vergleich --> <li><a href="#" class="button big">Filter</a> <ul> <li id="f1"><a style="width: 40px;" href="#"><</a></li> <li style="clear: left;" id="f2"><a style="width: 40px;" href="#">=</a></li> <li style="clear: left;" id="f3"><a style="width: 40px;" href="#">></a></li> <li style="clear: left;" id="f4"><a style="width: 40px;" href="#">< ></a></li> </ul> </li> Geändert von Tony-S (10.01.2012 um 15:35 Uhr) |
|
|||
Der einzige Browser, in dem ich dein Problem nachvollziehen kann -- nachdem ich den Code lokal zusammengebastelt habe -- ist IE (8+9) im Kompatibilitätsmodus. Im FF9 sehe ich nichts davon.
Bitte poste immer einen Link zum Problem. Eine weitere Codeablage braucht niemand. Zitat:
edit: Nein, Clear ist nicht das, was du brauchst. Du brauchst kein Float.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Ich habe das clear: left auf die beiden Buttons (Suchkriterium/Filter) angewandt, das funktioniert. Aber wenn das nicht wirklich richtig ist, wäre es mir lieber wenn ihr mir das mit dem float: none auf die li-Elemente angewandt nochmal genauer erklärt. Wenn ich das so mache, sind zwar die Listenelemente untereinander, jedoch die drei Buttons auch - ebenso nehmen sie die komplette Breite des drüber liegenden DIVs ein.
|
|
|||
Du verstehst nicht. Du sollst es nicht "ändern".
Du brauchst eine neue Regel im CSS (mit einem passenden Selektor), der das Float für die li-Elemente der zweiten Listenebene aufhebt. edit: Jetzt ist der Beitrag, auf den ich antwortete, plötzlich anders. Zitat:
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (10.01.2012 um 15:52 Uhr) |
|
|||
Entschuldige @fricca dein "Dort" habe ich genauso missverstanden wie den Post von Praktikant. Das ist natürlich richtig, dass ich das so auf alle Elemente anwende;
richtig ist es dann so: Code:
#nav ul li ul li { float: none; } |
Stichwörter |
dropdown menü, google, gui, horizontal, menü |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hilfe beim Dropdown Menü | julianmeier | CSS | 4 | 15.09.2010 12:12 |
Problem: Dropdown Menü | Matt_Skyes | CSS | 2 | 01.09.2010 13:15 |
Dropdown Menü über CSS realisiseren (Joomla) | Robeat | CSS | 0 | 20.01.2009 13:24 |
Dropdown Menue wird durch Untermenue gestreckt | Schelm.isch | CSS | 4 | 31.08.2008 23:31 |
Suche CSS Dropdown Menü | Lloyd Larkin | CSS | 0 | 11.10.2006 21:50 |