zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Variable Breite für Submenü

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.07.2011, 10:54
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.01.2009
Beiträge: 31
wirdnix befindet sich auf einem aufstrebenden Ast
Standard Variable Breite für Submenü

Hallo,
ich möchte ein Submenü so gestalten, daß alle Menuitems genauso "lang" sind wie ihr Text und nicht nach 100px in eine 2. Zeile umbrechen. So ein ähnliches Problem hatte ich schonmal, damals ließ es sich damit lösen, bei den ul und li Elementen einfach width auszukommentieren . Damit scheint es diesmal aber nicht zu gehen. Hat jemand einen Tipp?

Hier mein Css:

Code:
#mainmenu {
	width: 730px;
	height: 20px;
	float: right;
	margin-top: 12px;
	margin-bottom: 20px;
}

.mainnav {
	margin: 0;
	padding: 0;
	list-style: none;
	float: right;
}

.mainnav * {
	margin: 0;
	padding: 0;
	list-style: none;
}


.mainnav ul {
	position: absolute;
	top: -999em;
	display: none;
}

.mainnav li {
	float: left;
	position: relative;
	z-index: 999;
	height: 20px;
	line-height: 20px;
	margin-left: 20px;
}

.mainnav a {
	display: block;
	font-size: 12px;
	font-weight: normal;
	margin: 0;
	padding: 0;
	color: #fff;
	text-decoration: none;
	text-transform: lowercase;
}

.mainnav a:hover,
.mainnav li.current-menu-item a,
.mainnav li#current a,
.mainnav li.current-cat a,
.mainnav li.current_page_item a {
	text-decoration: none;
	color: #d65917;
}

.mainnav li:hover {
	text-decoration: none;
}

.mainnav ul li{ 
	/*width: 100px;*/
}

.mainnav li:hover ul,
ul.mainnav li.sfHover ul {
	left: -10px;
	top: 15px;
	padding-top: 25px;
	/*width: 100px;*/
}

.mainnav li:hover li ul,
.mainnav li.sfHover li ul {
	top: -999em;
}

.mainnav li li:hover ul,
ul.mainnav li li.sfHover ul {
	left: 100px;
	top: -25px;
}

.mainnav li:hover ul,
.mainnav li li:hover ul {
	top: -999em;
}

.mainnav li li {
	display: inline;
	padding: 0px;
	/*height: auto !important;*/
	border-bottom: solid 1px #fff;
	margin: 0;
	background: #4f4f4f;
	line-height: 20px;
}

.mainnav li li a:link, 
.mainnav li li a:visited {
	display: block;
	/*height: auto !important;*/
	text-transform: lowercase;
    color: #fff;
	font-weight: normal;
	font-size: 12px;
	border: none;
	margin: 0;
	padding: 0;
	margin-left: 10px;
}

.mainnav li li a:hover {
	color:#d65917 !important;
	
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.07.2011, 00:00
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zeige mal dazu deinen kompletten Quellcode
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.07.2011, 11:18
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.01.2009
Beiträge: 31
wirdnix befindet sich auf einem aufstrebenden Ast
Standard

hier ein Link zur Seite
Mit Zitat antworten
  #4 (permalink)  
Alt 19.07.2011, 11:33
$("#mettbröttchen");
XHTMLforum-Mitglied
 
Registriert seit: 28.09.2010
Ort: Bremen
Beiträge: 448
zeji wird schon bald berühmt werden
Standard

Das Problem kenne ich, habe auch derzeit superfish im einsatz. Ich habe das Ganze über ein jQuery-Hack gelöst, sodass alle li-Elemente eine angegebene Weite bekommen.
Code:
jQuery.fn.justify = function(width) {
    var max = 0;
    this.each(function() {
        var width = jQuery(this).width();
        max = (width > max) ? width : max;
    });
    return this.width(max + (width));
}
Die zuständigen li-Elemente dann per .justify(weite) anpassen..
Code:
$('#menu-hauptnavigation #menu-item-1643 .sub-menu li').justify(weite);
"weite" muss dann individuell angepasst werden (kann auch eine negative Zahl sein).

Zugegeben, es ist nicht die sauberste Lösung, aber es funktioniert.
Mit Zitat antworten
  #5 (permalink)  
Alt 19.07.2011, 13:02
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.01.2009
Beiträge: 31
wirdnix befindet sich auf einem aufstrebenden Ast
Standard

Danke Dir erstmal! Den ersten Code habe ich in meine header.php gepackt - aber (dumme Frage...aber ich weiß es einfach nicht) - wo packe ich denn den zweiten hin ? (
Code:
$('#menu-hauptnavigation #menu-item-1643 .sub-menu li').justify(weite);
)
Mit Zitat antworten
Antwort

Stichwörter
dropdown, submenu, suckerfish

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
Variable breite für extern geladene Überschrift MrMister CSS 7 04.06.2010 15:00
Variable Breite -> Problem Hintergrundgrafik Korasu CSS 2 08.01.2010 00:26
Variable Breite mit fester Breite vermischen vertex CSS 11 16.10.2006 13:22
3 Spalten | Aussen: variable Breite; Mitte: feste Breite dreamshocker CSS 9 17.08.2005 16:23
problem mit IE Textarea + variable breite stese CSS 3 26.07.2004 11:52


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:31 Uhr.