✔ Wie Navi am besten umsetzen?

[schutzgeist]

Hallo,

ich bastal grad an einer Navigation.
Vom Ansatz her bin ich noch nicht wirklich zufrieden und momentan komm ich leider auch nicht weiter...
Das Ganze mal zum anschauen:
http://schutzgeist.com/yum/index.php

Der Text der momentan unter den Buttons steht hät ich logischerweise gerne in den Buttons

Hab es schon mit einer eigenen Klasse für den Text probiert.. Das hat aber leider alles nur verschoben.

HMTL:

<div id="header">
<div id="navi">
<img src="image/navi_left.png" />Home<img src="image/navi_middle.png" />Toplist<img src="image/navi_middle.png" />Regeln<img src="image/navi_middle.png" />Befehle<img src="image/navi_middle.png" />Gästebuch<img src="image/navi_middle.png" />Team & Kontakt<img src="image/navi_right.png" />
</div>
</div>

CSS:

#header {
position:absolute;
top: 0px;
background-image: url(image/header_bg.png);
background-repeat: no-repeat;
background-position: right top;
width: 900px;
height: 200px;
left: 0px;
z-index: 2;
}

#navi {
position:absolute;
top: 0px;
right: 0px;
text-align: right;
height: 42px;
background-image: url(image/navi_bg.png);
background-repeat: repeat-x;
}

Grüße,
Steffi

 

[pamax]

Hi,

die Navi kannst du so nicht umsetzen, also nicht mit Img-tags.Du kannst das Menu entweder durch eine Liste oder Hyperlinks gestalten. Schau dir mal diese Seite an:
http://css.fractatulum.net/sample/menu3format.htm

pMx

 

[schutzgeist]

Danke für den Link.

Hab das jetzt mal probiert umzusetzen:
http://schutzgeist.com/yum/index.php

Nur wie krieg ich die Grafiken (hab die jetzt im <li>-Element als Hintergrund angegeben) auf die volle Höhe? Sprich 42px?
Mit Line-Height klappt das nicht..

 

[Maik]

Hi,

notiere im Selektor das ul-Element vor dem ID-Namen, setze die Polsterungseigenschaften für das Listenelement auf null, tausche für die Listenpunkte li die display:inline-Eigenschaft gegen float:left aus und definiere für das DIV #navi die ermittelte Breite:

ul#list {
height: 42px;
list-style:none;
white-space: nowrap;
margin:0;
padding:0;
}

ul#list li {
float:left;
}

#navi {
position:absolute;
top: 0px;
right: 0px;
text-align: right;
height: 42px;
width:458px;
background-image: url(image/navi_bg.png);
background-repeat: repeat-x;
}

 

[schutzgeist]

Wie kommt man nur auf sowas? :suspekt:
Klasse, vielen Dank!

Kannst du mir auch noch verraten, wie ich es nun anstelle, dass ich den Text noch etwas nach unten rücken kann, ohne dass gleich wieder der ganze Button mitspringt?

 

[Maik]

Selbstverständlich kann ich das.

CSS:

ul#list li a {
line-height:21px;
}

HTML:

<ul id="list">
    <li class="left"><a href="#">Home</a></li>
    <li class="middle"><a href="#">Toplist</a></li>
    <li class="middle"><a href="#">Regeln</a></li>
    <li class="middle"><a href="#">Befehle</a></li>
    <li class="middle"><a href="#">Gästebuch</a></li>
    <li class="right"><a href="#">Team & Kontakt</a></li>
</ul>

 

[schutzgeist]

Klasse, nun kann ich beruhigt schlafen ;-)
Besten Dank.