zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Umbruch in einem LI bei horizontalem Menü

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.10.2006, 10:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.10.2006
Beiträge: 9
M4rco befindet sich auf einem aufstrebenden Ast
Standard 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>
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;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.10.2006, 10:31
Benutzer
neuer user
 
Registriert seit: 04.06.2005
Beiträge: 75
beginners befindet sich auf einem aufstrebenden Ast
Standard

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
__________________
-----------------
Ertrage die Narren
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.10.2006, 10:42
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 13.10.2006, 10:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.10.2006
Beiträge: 9
M4rco befindet sich auf einem aufstrebenden Ast
Standard

Leider bringt height so garkeine veränderung.
Mit Zitat antworten
  #5 (permalink)  
Alt 13.10.2006, 10:48
Benutzer
neuer user
 
Registriert seit: 04.06.2005
Beiträge: 75
beginners befindet sich auf einem aufstrebenden Ast
Standard

Was genau verändert sich nicht?
__________________
-----------------
Ertrage die Narren
Mit Zitat antworten
  #6 (permalink)  
Alt 13.10.2006, 10:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.10.2006
Beiträge: 9
M4rco befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von beginners Beitrag anzeigen
Was genau verändert sich nicht?
Garnix die höhe ändert sich nicht egal wieviel ich einstelle.
Mit Zitat antworten
  #7 (permalink)  
Alt 13.10.2006, 10:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Wenn du den Boxen Dimensionen geben willst, dann dürfen sie nicht inline dargestellt werden.
Verwende float, um deine Menüpunkte nebeneinander zu setzen.
Mit Zitat antworten
  #8 (permalink)  
Alt 13.10.2006, 11:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.10.2006
Beiträge: 9
M4rco befindet sich auf einem aufstrebenden Ast
Standard

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;
}
Mit Zitat antworten
  #9 (permalink)  
Alt 13.10.2006, 11:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Der IE kennt kein max-width.
Gib den li-Elementen bereits float, nicht erst den a-Elementen.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 13.10.2006, 11:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.10.2006
Beiträge: 9
M4rco befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Darstellungsproblem flohpapa CSS 3 16.12.2009 09:55
Problem mit Flyout bei einem horizontalem Menü sharkbait CSS 1 07.08.2009 22:28
Problem mit horizontalem Menü Mote CSS 0 18.02.2009 15:43
Positionierungsproblem bei horizontalem Menue ... laechleviel CSS 1 22.09.2005 09:53
Problem mit horizontalem Menü yellowfox CSS 4 21.07.2005 23:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:40 Uhr.