Superfish - Volle Breite

[ruhrpotts-proud]

Hallo zusammen,
Folgendes Problem:
Ich habe ein Superfish Menu in einen WordpressBlog integriert, jedoch wird die volle Breite leider nicht ausgenutzt.

Habe soweit schon alles versucht und weiß mir echt keinen Rat mehr.

Die Leiste ist in folgendem div definiert:

#header {
	border-top: 3px solid rgb(221,217,215);
	height: 70px;
	width: 780px;
	background-color: rgb(244,244,244);

	}

Dies ist mein Superfish.css File:

/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin:		0;
	padding:	0;
	list-style:	none;

}
.sf-menu {
	line-height:	1.0;
}
.sf-menu ul {
	position:	absolute;
	top:		-999em;
	width: 100%; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
	width: 100%;
}
.sf-menu li:hover {
	text-decoration: none; color: rgb(000,160,240);
}
.sf-menu li {
	float:		left;
	position:	relative;
}
.sf-menu a {
	display:	block;
	position:	relative;

}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:		0;
	top:		4.3em; /* match top ul list item height */
	z-index:	99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:		-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:		100%; /* match ul width */
	top:		0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:		-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:		100%; /* match ul width */
	top:		0;

}

/*** DEMO SKIN ***/
.sf-menu {
	float:		left;
	margin-bottom:	1em;
width: 780px;
}

.sf-menu a {
	border-left:	1px solid rgb(130,135,145);
	padding: 	.75em 1em;
	text-decoration:    none;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:		#13a;
}
.sf-menu li {
    background: rgb(221,217,215);
    border-top: 3px solid rgb(130,135,145);
    margin-top: -3px;
    border-bottom: none;
    border-left: 1px solid rgb(221,217,215);	
    text-transform: uppercase; 
    text-align: center;
    font-size: 1em; 
    font-family: Arial, Helvetica, Sans-Serif;
    font-weight: bold;
    letter-spacing: 1px;
}
.sf-menu li li {
	background:		rgb(221,217,215);
}
.sf-menu li li li {
	background:		rgb(221,217,215);
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	outline:		0;
text-decoration: none; 
color: white; 
background: rgb(221,217,215);

}

Über Hilfe wäre ich echt super dankbar!

 

[Cheffchen]

Hallo,

zeige doch einfach ein link, das würde dies erheblich vereinfachen für uns Helfer ;O).

Cheffchen

ps: mit dein gezeigten code kann keiner was anfangen
(html fehlt, es kann ja auch eine andere css klasse zwischenhauhen)

 

[ruhrpotts-proud]

Hey,
Danke erstmal für die Antwort.

Der Link zur Seite ist: Willkommen bei Albrecht-Safety-Engineering

Der Aufruf der Superfishfunktion erfolgt in der header.php wiefolgt:

<div id="header">
		<ul id='menu' class='sf-menu'>
		<li><?php wp_list_pages("title_li="); ?> 		
		</ul>			
</div>

Falls noch weitere Teile vom Quellcode benötigt werden bitte einfach schreiben.

Hab schon einige Zeit gesucht im Netz, das Problem scheinen einige zu haben, allerdings bin ich noch auf keine funktionierende Lösung gestoßen.

Edit: Folgendes steht ausserdem noch im css der Seite (bzgl. dem Header):

#header ul, #header li {
	display: inline;
	list-style-type: none;
	list-style-image: none;

	}
	
#header li a {
	display: block;
	padding: 15px 15px 15px 15px;
	
	}

 

[Marv]

Hallo, um die volle Breite auszunutzen müssen deine Listenpunkte / Menüpunkte breiter sein.
Also z.B. bei #header li a mehr padding für die Seiten.

#header li a {
	display: block;
	padding: 15px 19px 15px 19px;
	}

Da das so aber bei 7 Listenpunkten nie 100% aufgehen wird würde ich noch das letzte Menü-Element ansprechen z.B. per Klasse .last o.ä.
und diesem mehr padding geben, so dass es passt.
Ansprechen kannst du das letzte Element (wenn du keine direkten Zugriff auf die HTML-Elemente hast) auch mit der pseudoklasse :last-child. Die wird allerdings nicht vom IE7 unterstützt.

Alternativ halt das erste und letzte Element in der Breite verändern, wenns damit besser aussieht.

 

[ruhrpotts-proud]

Danke für den Tipp!
Müsste es nicht auch eigentlich eine Möglichkeit geben, dass er die verbliebene Fläche gleichmässig auf die kleineren Elemente verteilt?

Hat jemand von euch vlt. schonmal was explizit mit Superfish gemacht?
Den Versuch das ganze mit Änderungen in der Breite zu machen habe ich schon unternommen, allerdings sah das ganze dann in 4 verschiedenen Browsern 4 Mal anders aus... =P

 

[Cheffchen]

Hallo,

Hat jemand von euch vlt. schonmal was explizit mit Superfish gemacht?

Dann frage im WP Forum.

allerdings sah das ganze dann in 4 verschiedenen Browsern 4 Mal anders aus...

Das ist klar bei dem css vom Menü, das ist so Mies das hätte auch ich gemacht haben können :O).
Das ist aber nicht das einzigste/wichtigste problem.
Habe gerade ganz erschrocken gesehen das im kopf oben rechts was mit ASE steht und das bei Zufallsbild und Fac... auch ein was angezeigt wird. Mach das mal erst bei allen wichtigen browsern. Hast glaube ich die prioritäten etwas falsch gesetzt.


Cheffchen