Umbruch in einem LI bei horizontalem Menü

M4rco · #1 (**permalink**) 13.10.2006, 09:21

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>

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 {
  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;
}

beginners · #2 (**permalink**) 13.10.2006, 09:31

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;
}

Gruß
beginers

andir · #3 (**permalink**) 13.10.2006, 09:42

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

M4rco · #4 (**permalink**) 13.10.2006, 09:46

Leider bringt height so garkeine veränderung.

beginners · #5 (**permalink**) 13.10.2006, 09:48

Was genau verändert sich nicht?

M4rco · #6 (**permalink**) 13.10.2006, 09:50

Zitat:

Zitat von beginners

Was genau verändert sich nicht?

Garnix die höhe ändert sich nicht egal wieviel ich einstelle.

fricca · #7 (**permalink**) 13.10.2006, 09:52

Wenn du den Boxen Dimensionen geben willst, dann dürfen sie nicht inline dargestellt werden.
Verwende float, um deine Menüpunkte nebeneinander zu setzen.

M4rco · #8 (**permalink**) 13.10.2006, 10:12

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;
}

fricca · #9 (**permalink**) 13.10.2006, 10:17

Der IE kennt kein max-width.
Gib den li-Elementen bereits float, nicht erst den a-Elementen.

M4rco · #10 (**permalink**) 13.10.2006, 10:30

Zitat:

Zitat von fricca

Der IE kennt kein max-width.
Gib den li-Elementen bereits float, nicht erst den a-Elementen.

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.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ä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