horizontale listennavigation mit buttons

beelzebubi · 23.07.2008, 18:21

Hallo ich habe nun schon viel herumprobiert das ich langsam garnichts mehr sehe

Es geht um eine Listennavigation die horizontal verlaufen soll.
leider sind es abgerundete buttons mit Farbverlauf.

Also gibt es innerhalb eines a-tags 1 abgerundetes Anfangsbild, 1 Hintergrundbild (weil variable Länge der Textlinks) und zum Schluß ein weiteres abgerundetes Bild. U.S.W.

Das ganze soll ein Typo3 Template werden.

Im firefox und im Opera wird die navigation so dargestellt wie es sein soll. Die Links verhalten sich auch richtig

Im IE gibt es Probleme -->> die Bilder halten Abstand voneinander und nur die
abgerundeten Bilder verhalten sich als Link (Fingerzeiger Maus).

html:

HTML-Code:

 <div>
	<ul id="topnavigation">

		<li><a href="#"><img src="../img/topnaviend.jpg" border="0" alt="" width="9" height="31" align="left" style="padding:0;margin:0;"/><span class="topspan">textblabla</span><img src="../img/topnavistart1.jpg" border="0" alt="" align="left" style="padding:0;margin:0;"/></a></li>

		<li><a href="#" ><img src="../img/topnaviend.jpg" border="0" alt="" width="9" height="31" align="left" style="padding:0;margin:0;"/><span class="topspan">textblabla</span><img src="../img/topnavistart1.jpg" border="0" alt="" align="left" style="padding:0;margin:0;"/></a></li>

			<li><a href="#" ><img src="../img/topnaviend.jpg" border="0" alt="" width="9" height="31" align="left" style="padding:0;margin:0;"/><span class="topspan">textblabla</span><img src="../img/topnavistart1.jpg" border="0" alt="" align="left" style="padding:0;margin:0;"/></a></li>

		<li><a href="#" ><img src="../img/topnaviend.jpg" border="0" alt="" width="9" height="31" align="left" style="padding:0;margin:0;"/><span class="topspan">textblablabla</span><img src="../img/topnavistart1.jpg" border="0" alt="" align="left" style="padding:0;margin:0;"/></a></li>

		 </ul>
				
</div>

CSS:

HTML-Code:

#topnavi {width:960px;height:30px;}


#topnavigation {width:960px;height:30px;margin:0;padding:0;list-style:none;}

#topnavigation li {display:block;margin:0;padding:0;float:left;}

#topnavigation li a {display:block;height:31px; padding:0;margin:0;float:left;text-decoration:none;}

.topspan {float:left;height:31px;padding:0;margin:0;background-image: url(../img/topnavimitte1.jpg);}

Die Spans musste ich einfügen weil ich sonst die Textlinkausrichtung nicht hinbekommen hätte. Es muss alles left floaten

Kann mir jemand helfen ?

hero-master · 23.07.2008, 19:30

Moin

du schmeißt ja hier mit float, margin und padding nur so um dich

li - hat keine vodefinierten Abstände. Brauchste also nicht extra margin und padding auf 0 setzen. ist schon geschehen.
Generell würde ich dir empfehlen den Universalindikator einzusetzen und dort margin und padding schon auf 0 setzen, das gilt dann für alle Objekte auf deiner Seite...
display:block; ist auch nicht notwendig, ist ja schon eins

a - gilt das Gleiche, da brauchst du aber das display:block; dafür ist hier das Floaten nicht vorteilhaft, weg damit

Das Span brauchst du ihmo nicht. Kann auch weg. Padding und margin im HTML-Teil - weg

ich würde das Ganze dann so aussehen lassen:

Code:

* {margin:0; padding:0; border:0}

#topnavi {width:960px;height:30px;}

#topnavigation {width:960px; height:30px;list-style:none;}

#topnavigation li {float:left}

#topnavigation li a {display:block; height:31px; text-decoration:none; background-image: url(../img/topnavimitte1.jpg);}

HTML-Code:

 <div>
	<ul id="topnavigation">

		<li><a href="#"><img src="http://www.traum-projekt.com/forum/img/topnaviend.jpg" alt="" width="9" height="31" />textblabla<img src="http://www.traum-projekt.com/forum/img/topnavistart1.jpg" alt="" /></a></li>

		<li><a href="#" ><img src="http://www.traum-projekt.com/forum/img/topnaviend.jpg" alt="" width="9" height="31" />textblabla<img src="http://www.traum-projekt.com/forum/img/topnavistart1.jpg" alt="" /></a></li>

		<li><a href="#" ><img src="http://www.traum-projekt.com/forum/img/topnaviend.jpg" alt="" width="9" height="31" />textblabla<img src="http://www.traum-projekt.com/forum/img/topnavistart1.jpg" alt="" /></a></li>

		<li><a href="#" ><img src="http://www.traum-projekt.com/forum/img/topnaviend.jpg" alt="" width="9" height="31" />textblablabla<img src="http://www.traum-projekt.com/forum/img/topnavistart1.jpg" alt="" /></a></li>

		 </ul>
				
</div>

beelzebubi · 25.07.2008, 10:28

Danke für deine Unterstützung, aber so haut das leider überhaupt nicht hin.

IE: Navigation ist nicht horizontal
Firefox: Navigation ist zwar horizontal aber die Bilder haben grossen Abstand voneinander und der Textlink klebt am Fuß der Bilder

hero-master · 25.07.2008, 10:51

Zitat:

Zitat von beelzebubi

IE: Navigation ist nicht horizontal
Firefox: Navigation ist zwar horizontal aber die Bilder haben grossen Abstand voneinander und der Textlink klebt am Fuß der Bilder

Kannst du mal das Ganze herzeigen. Am Besten wäre immer ein Link (auch wegen den Bildern), aber der komplette Quellcode wäre auch nicht verkehrt, vor allem welchen Doctype du verwendest

beelzebubi · 26.07.2008, 11:25

Hallo hero-master,

ich habe leider keinen Wepspace, mache es lokal.

Mittlerweile habe ich eine schöne horizontale Liste.
Aber wie das im Leben nunmal so ist habe ich nun das nächste Problem.

Das soll ja ein typo3 Template werden mit variablen Link-längen.

Diese Navigation soll eine bestimmte Breite haben und die einzelnen Links sollen unterschiedlich weit aufgespannt werden damit die ganze Breite der Navigation ausgefüllt wird.
Das gelingt mir nicht. Ich habe auch schon versucht ein Trans.gif als Spanner beim Textlink einzubauen, aber ich bekomme das mit dem Floaten nicht hin.
Habe es auch mit <span width: ... versucht aber inlineelementen kann man ja keine Weite zuweisen. Blockelemente sind innerhalb des <li> ja leider nicht valide

Wie kann ich die Links unterschiedlich weit spannen, und zwar so das dieses Endbild des Links auch an das Ende wandert ?

Hier mal der Quelltext

Code:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Layout 7</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>

<style type="text/css">

ul.navleiste { list-style-type: none; margin-left: 0.6em; padding-left: 0.6em; }
ul.navleiste li { display: inline;   float: left; }
ul.navleiste li a { display: block;text-decoration:none; background-image: url(../img/topnavimitte1.jpg);  }
ul.navleiste li a:hover { color:#ddd }

</style>

</head>
<body>

<ul class="navleiste">
   <li > <a href="http://www.traum-projekt.com/forum/index.html"><img src="http://www.traum-projekt.com/forum/img/topnaviend.jpg" border="0" style="vertical-align:middle"/>CSS-Referenz gjghj<img src="http://www.traum-projekt.com/forum/img/topnavistart1.jpg" border="0" style="vertical-align:middle"/></a> </li>
   <li > <a href="http://www.traum-projekt.com/forum/index.html"><img src="http://www.traum-projekt.com/forum/img/topnaviend.jpg" border="0" style="vertical-align:middle"/>CSS-Referenz gjgjg<img src="http://www.traum-projekt.com/forum/img/topnavistart1.jpg" border="0" style="vertical-align:middle"/></a> </li>
   <li > <a href="http://www.traum-projekt.com/forum/index.html"><img src="http://www.traum-projekt.com/forum/img/topnaviend.jpg" border="0" style="vertical-align:middle"/>CSS-Referenz ghjghjg<img src="http://www.traum-projekt.com/forum/img/topnavistart1.jpg" border="0" style="vertical-align:middle"/></a> </li>
   <li > <a href="http://www.traum-projekt.com/forum/index.html"><img src="http://www.traum-projekt.com/forum/img/topnaviend.jpg" border="0" style="vertical-align:middle"/>CSS-Referenz ghjghjghj<img src="http://www.traum-projekt.com/forum/img/topnavistart1.jpg" border="0" style="vertical-align:middle"/></a> </li>
</body>
</html>

hero-master · 26.07.2008, 13:03

Moin

Zitat:

Zitat von beelzebubi

Blockelemente sind innerhalb des <li> ja leider nicht valide

Wer behauptet denn so was

Außerdem hast du durch display:block; ja quasi ein Blockelement darin

Du kannst den Links nun alle Attribute zuweisen, die du einem Blockelement zuweisen kannst.

Zitat:

Zitat von beelzebubi

Wie kann ich die Links unterschiedlich weit spannen, und zwar so das dieses Endbild des Links auch an das Ende wandert ?

Du willst also keine Breitenangaben machen, trotzdem sollen die Menupunkte quasi die volle Breite ausnutzen? Und sie sollen von der Breite her variieren?
Ich würde sagen nicht machbar

Wenn du eine bestimmte Breite hast, auf die alle Links verteilt werden, kannst du die Breiten der Links ja nicht nach Belieben variieren und ewarten, dass sie immer die volle Breite ausnutzen und noch in den selben Abständen zueinander stehen

Zitat:

Zitat von beelzebubi

Hier mal der Quelltext

Pack mal den XML-Prolog oben raus. Dadurch hast du dir die Probleme im IE eingefangen (Stichwort Quirksmode). XHTML hat als Standardkodierung immer UTF-8, das brauchst du ihm durch den Prolog nicht mitteilen

beelzebubi · 26.07.2008, 16:36

Erstmal Danke für den Hinweis mit dem xml Prolog.

Zu den Längen der Textlinks. Sie sollen sich in gewissen Grenzen befinden

Anfangsbild Textlink Endbild
########-----------------------------######

|___max Länge des Textes___|

|_______________ Feste Breite _____________|

Es Verrutscht etwas in der Ansicht hier -> Die max. Länge des Textes ist dort wo die Strichlinie ist

Ich möchte am liesten sowas hier einbauen
<span style="width:130px;display:block;">CSS-Referenz gjghj</span>

Code:

<li > <a href="http://www.traum-projekt.com/forum/index.html"><img src="http://www.traum-projekt.com/forum/img/topnaviend.jpg" alt="" border="0" style="vertical-align:middle"/><span style="width:130px;display:block;">CSS-Referenz gjghj</span><img src="http://www.traum-projekt.com/forum/img/topnavistart1.jpg" alt="" border="0" style="vertical-align:middle;" /></a> </li>

Funktioniert nicht weil der span-bereich nach unten springt. Mit Floaten hatte ich auch wenig Erfolg

hero-master · 27.07.2008, 12:00

Moin

also willst du den Links eine maximale Länge geben oder eine feste? max-width wäre da dann angebracht.
Ich glaube du denkst zu umständlich

Ich würde generell die Rundungen links und rechts ebenfalls als Hintergrund einbinden. Schau mal hier. WIllst du das so? Wenn nein: Lad mal ein Bild hoch wie dein Menu aussehen soll

beelzebubi · 28.07.2008, 09:57

Ja , so wie deine Navi aussieht sieht meine derzeit auch aus.Nur das es keine Abstände zwischen den Buttons gibt.
Allerdings ziehen sich deine Buttons auch nur so weit auf wie die Textlänge ist.
Wenn der 1. Button z.B. eine Länge von 190px und der 2. eine Länge von 240px hätte und der Textlink dann noch mittig wäre . Wäre alles in Butter

hero-master · 28.07.2008, 11:38

Zitat:

Zitat von beelzebubi

Allerdings ziehen sich deine Buttons auch nur so weit auf wie die Textlänge ist.
Wenn der 1. Button z.B. eine Länge von 190px und der 2. eine Länge von 240px hätte und der Textlink dann noch mittig wäre . Wäre alles in Butter

Also doch mit fester Breite?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
* {margin:0; padding:0; border:0}

#topnavi {width:960px;height:30px;}

#topnavigation {width:960px; height:30px;list-style:none;}

#topnavigation li {float:left; padding:0 9px; background:url(left.jpg) no-repeat 0 0}

#topnavigation li a {color:white; display:block; height:31px; text-decoration:none; background: url(right.jpg) no-repeat top right; padding-right:9px}

#topnavigation li a span {display:block; text-align:center; height:31px; line-height:31px; background:url(mitte.jpg) repeat 0 0}

#topnavigation li#eins a span {width:190px}
#topnavigation li#zwei a span {width:240px}
</style>
<title></title>
</head>
<body>
 <div>

<ul id="topnavigation">
	<li id="eins"><a href="#"><span>Link 1</span></a></li>
	<li id="zwei"><a href="#"><span>Link 2 länger</span></a></li>
 </ul>

</div>
</body>
</html>

beelzebubi · 28.07.2008, 14:58

Ersteinmal tausend Dank für deine Mühe.
Die letzte Lösung ist es eigentlich. Zumindest im Firefox
Da hab ich schon glänzende Augen bekommen

Wenn du dir deinen Link im IE Anguckst dann ist es keine horizontale Navi mehr.

Man das ist alles so verzwickt

.

Ich werde heute Abend nochmal gucken. Vlt. ist es nun nur noch ein kleiner Schritt

hero-master · 28.07.2008, 15:19

An den hab ich überhaupt keine Zweit verschwendet

Versuch 3

HTML-Code:

<head>
<style type="text/css">
* {margin:0; padding:0; border:0}

#topnavigation {width:960px; list-style:none;}

#topnavigation li {float:left; padding:0 9px; background:url(left.jpg) no-repeat 0 0}

#topnavigation li a {color:white; display:block; line-height:31px; height:31px; text-decoration:none; background: url(right.jpg) no-repeat top right; padding-right:9px}

#topnavigation li a span {display:block; text-align:center; background:url(mitte.jpg) repeat 0 0}

li#eins a {width:190px}
li#zwei a {width:240px}
</style>
<title></title>
</head>
<body>
 <div>

<ul id="topnavigation">
	<li id="eins"><a href="#"><span>Link 1</span></a></li>
	<li id="zwei"><a href="#"><span>Link 2 länger</span></a></li>
 </ul>

</div>
</body>

beelzebubi · 28.07.2008, 17:39

Das ist es. Hab vielen Dank.

Mir ist zwar nicht klar warun der IE dieses anders interpretierte
#topnavigation li#eins a span {width:190px}
#topnavigation li#zwei a span {width:240px}

Muss ich mal in einer ruhigen Stunde nachvollziehen.