XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Umbruch in einem LI bei horizontalem Menü (http://xhtmlforum.de/showthread.php?t=42417)

M4rco 13.10.2006 10:21

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:
http://i9.tinypic.com/43r9wtk.png

So soll es aussehn:
http://i9.tinypic.com/2wn5p8j.png


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 13.10.2006 10: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 13.10.2006 10: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 13.10.2006 10:46

Leider bringt height so garkeine veränderung.

beginners 13.10.2006 10:48

Was genau verändert sich nicht?

M4rco 13.10.2006 10:50

Zitat:

Zitat von beginners (Beitrag 311299)
Was genau verändert sich nicht?

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

fricca 13.10.2006 10: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 13.10.2006 11:12

Danke erstmal für die Tips im FF brachte es auch das gewünschte Ergebnis nur im IE sieht es furchtbar aus:


FF:
http://i10.tinypic.com/4c24861.png

IE:
http://i9.tinypic.com/2ptzamc.png

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 13.10.2006 11:17

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

M4rco 13.10.2006 11:30

Zitat:

Zitat von fricca (Beitrag 311311)
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.


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:39 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023