✔ Navigations-Idee lösbar? Wenn ja, wie?

[joeboe]

Hallo liebe Community.

ich habe ein Problem mit meiner Navigation... klick hier

sie sieht schick aus aber ich habe rechts neben dem letzten "button" noch ungenutzten Space. Diesen will ich nicht haben. Ich will Quasi dass das "ul" element sich auf die volle breite erstreckt und die listen elemente so platziert werden dass ein gleichmäßiges Bild entsteht! Ist eine dynamische Lösung möglich oder müsste ich es statisch machen?

der Code bisher:

<div id="h03">
                                                 <ul>
							<li><a href="news.html">News</a></li>
							<li><a href="produkte.html">Produkte</a></li>
							<li><a href="presse.html">Presse</a></li>
							<li><a href="referenzen.html">Referenzen</a></li>
							<li><a href="haendler.html">Händler</a></li>
							<li><a href="shop.html">Online shop</a></li>
							<li><a href="kontakt.html">Kontakt</a></li>
							<li><a href="agb.html">AGB</a></li>
							<li><a href="impressum.html">Impressum</a></li>
						</ul>
					</div>

#h03 {
	position: relative;
	height: 36px;
	background-image: url(img/h03_background.gif);
	overflow: hidden;
}

#h03 ul {
	
 	list-style-type: none;
 	margin: 0px;
 	padding: 0px;
 	position: absolute;
 	top: 1px;
}

#h03 li {
	
	float: left;
	border: solid 1px;
	border-width:0 1px 0 0;
	
}

#h03 li a {

	display: block;	
	font-family: Arial, Verdana, sans-serif;
	font-size: 11px;
	color: #fff;
	padding-bottom: 10px;
	padding-top: 10px;
	padding-left: 18px;
	padding-right: 18px;
	text-transform: uppercase;
	text-decoration: none;

}

#h03 li a:hover {
	color: #000;
	background-image: url(img/h03_hover.gif);
	
}

über Hilfe, Gedankenanstöße oder Literaturverweise wäre ich dankbar

 

[Maik]

Hi,

denkbar ist hier eine Verteilung der Gesamtbreite auf die einzelnen Menüpunkte, sei es mit absoluten (800px / 9) oder relativen (100% / 9) Angaben, in Kombination mit einer horizontalen Zentrierung der Linktexte.

mfg Maik

 

[joeboe]

hehe danke habs nun umgesetzt und schaut schon gut aus. klick hier

nun hab ich noch ein Problem mit dem Last element. Die Breite hab ich um 2 Px korrigieren müssen damit es passt. Nun habe ich aber das Problem dass der rechte border noch angezeigt wird. Eine Lösung wie ich es überschrieben bekomme mit der Klasse .last?

#h03 {
	position: relative;
	height: 36px;
	background-image: url(img/h03_background.gif);
	overflow: hidden;
}

#h03 ul {
	
 	list-style-type: none;
 	margin: 0px;
 	padding: 0px;
 	position: absolute;
 	top: 1px;
}

#h03 li {
	
	float: left;
	border: solid 1px;
	border-width:0 1px 0 0;
	
}

#h03 li a {

	display: block;	
	font-family: Arial, Verdana, sans-serif;
	font-size: 11px;
	color: #fff;
	padding-bottom: 10px;
	padding-top: 10px;
	/* padding-left: 18px;
	padding-right: 18px; */
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	width: 113px;

}

#h03 .last {
	width: 115px;
	border: solid 0px;
}

#h03 li a:hover {
	color: #000;
	background-image: url(img/h03_hover.gif);
	
}

 

[Maik]

Na, im Firefox bricht noch der letzte Menüpunkt "Kontakt" um

Du kannst hier aber auch mit Dezimalzahlen arbeiten - meinetwegen "113.285px" (= 800px / 7- 1px (border-right)).

Oder die Gesamtbreite für das Layout ergibt sich durch einen runden Wert / pro Link, z.b.: 7 * 113px + 6 * 1px = 797px

mfg Maik

 

[joeboe]

hm, das mit der Layoutbreite ist eine gute Idee aber will die Navigation ja auch notfalls erweitern können.

Die Lösung des Problems ist scheinbar doch nicht so einfach wie ich dachte da FF und IE die Dinger auch unterschiedlich anzeigen. FF passt bei mir exakt, muss nurnoch den border entfernen fürs letzte Element. IE zeigt allerdings ne Lücke an... grmpf.

#h03 {
	position: relative;
	height: 36px;
	background-image: url(img/h03_background.gif);
	overflow: hidden;
}

#h03 ul {
	
 	list-style-type: none;
 	margin: 0px;
 	padding: 0px;
 	position: absolute;
 	top: 1px;
}

#h03 li {
	
	float: left;
	border: solid 1px;
	border-width:0 1px 0 0;
	
}

#h03 li a {

	display: block;	
	font-family: Arial, Verdana, sans-serif;
	font-size: 11px;
	color: #fff;
	padding-bottom: 10px;
	padding-top: 10px;
	/* padding-left: 18px;
	padding-right: 18px; */
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	width: 113.285px;

}

#h03 .last {
	width: 113.285px;
	border: solid 0px;
}

#h03 li a:hover {
	color: #000;
	background-image: url(img/h03_hover.gif);
	
}

 

[Maik]

Ursprünglich waren es ja mal 9 Menüpunkte, die du dann im Zuge der Umsetzung auf 7 dezimiert hast.

Wenn du nun einen wieder dazu nimmst, beträgt 1/8 von 100% 12.5%, die sogar der IE rechnerisch einwandfrei umzusetzen bzw. darzustellen weiß

#h03 li {
        float: left;
        width:12.5%;
}

#h03 li a {

        display: block;
        font-family: Arial, Verdana, sans-serif;
        font-size: 11px;
        color: #fff;
        padding-bottom: 10px;
        padding-top: 10px;
        /* padding-left: 18px;
        padding-right: 18px; */
        text-transform: uppercase;
        text-decoration: none;
        text-align: center;
        border: solid 1px;
        border-width:0 1px 0 0;
}

mfg Maik

 

[joeboe]

Werde mit dem Auftraggeber die Problematik mal durchgehen und vielleicht einen 8 Punkt aufnehmen, dann wären die Buttons 100px breit und kein Browser wird Probleme kriegen.

Das andere Problem ist der border fürs last element. den kann ich ja nicht einfach überschreiben. Wie ichs bisher geplant hatte

muss ich eine class machen zb. "non-last-item" und jedem nicht letzten Element sagen dass es nen border bekommt und beim letzten Element einfach weglassen? Ist mir irgendwie zu doof