|
|||
Umbruch in einem LI bei horizontalem Menü
Hallo
Ich habe ein Problem mit meinem Horizontalen Menü. Da ich viele Menüpunkte habe mächte ich die Text Felder gerne zweizeilig haben. Sory für die ungenaue Zeichnung. So sieht es jetzt aus: So soll es aussehn: Leider verzweifle ich an der aufgabe HTML: Code:
<ul id="tabmenue"> <li><a href="#">Home</a></li> <li><a id="aktuell" href="#">Menü 1</a></li> <li><a href="#">Menü 2</a></li> <li><a href="#">Ein längeres Menü 3</a></li> <li><a href="#">Menü 4</a></li> <li><a href="#">Menü 5</a></li> <li><a href="#">Menü 6</a></li> <li><a href="#">Menü 7</a></li> </ul> Code:
/* ///////// */ /* Main Menu */ /* ///////// */ #tabmenue { color:#FFFFFF; padding: 1px; list-style-type:none; margin-top:5px; margin-left:-1px; margin-bottom:3px; font-weight:bold; } #tabmenue li { display: inline; } #tabmenue li a { color:#FFFFFF; padding: 3px 1em; text-decoration: none; background-color:#333399; } #tabmenue li a:hover { padding: 3px 1em; text-decoration: none; background-color:#3399FF; border-bottom: 5px solid #3399FF; } #tabmenue li a#aktuell { padding-bottom: 2px; border-bottom: 5px solid #3399FF; background-color:#3399FF; } |
Sponsored Links |
|
|||
Gib deinen <li> eine feste Höhe, dann sollte es gehen.
Code:
#tabmenue li a { color:#FFFFFF; height: 25px; padding: 3px 1em; text-decoration: none; background-color:#333399; } beginers
__________________
----------------- Ertrage die Narren |
Sponsored Links |
|
|||
Anstelle der festen Höhe in px schlage ich vor, eine Höhe in em zu verwenden ( 3em z.B.) Grund: Verstellt jemand die Schriftgrösse, wächst die Box automatisch mit.
grüsse
__________________
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 |
|
|||
Danke erstmal für die Tips im FF brachte es auch das gewünschte Ergebnis nur im IE sieht es furchtbar aus:
FF: IE: CSS: Code:
/* ///////// */ /* Main Menu */ /* ///////// */ #tabmenue { color:#FFFFFF; padding: 1px; list-style-type:none; margin-top:5px; margin-left:-1px; margin-bottom:3px; font-weight:bold; } #tabmenue li { text-align:center; max-width:60px; } #tabmenue li a { color:#FFFFFF; float:left; height: 4em; padding: 3px 1em; text-decoration: none; margin-right:3px; background-color:#333399; } #tabmenue li a:hover { padding: 3px 1em; text-decoration: none; border-bottom: 4px solid #3399FF; } #tabmenue li a#aktuell { padding-bottom: 2px; border-bottom: 5px solid #3399FF; background-color:#3399FF; } |
|
|||
Wenn ich das float ins li bricht er nicht mehr den Text um sondern beginnt eine neue Zeile. Dann zeigt der IE es zwar korrekt an macht aber auch kein Textumbruch.
|
Sponsored Links |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Darstellungsproblem | flohpapa | CSS | 3 | 16.12.2009 08:55 |
Problem mit Flyout bei einem horizontalem Menü | sharkbait | CSS | 1 | 07.08.2009 21:28 |
Problem mit horizontalem Menü | Mote | CSS | 0 | 18.02.2009 14:43 |
Positionierungsproblem bei horizontalem Menue ... | laechleviel | CSS | 1 | 22.09.2005 08:53 |
Problem mit horizontalem Menü | yellowfox | CSS | 4 | 21.07.2005 22:19 |