Positionierung links in CSS

Edit: hier ein jsFiddle: http://jsfiddle.net/7hSny/

Ich versuche, die position links mit einem Bild dahinter in CSS. Dies ist eine Vorschau von wie ich gerne hätte:

Album Vorhören http://piclair.com/data/odjkf.jpg

Den Worten nach Hause, Campagne, etc müssen zentriert sein in der Menüleiste. Die HTML kann hässlich sein jetzt, ich habe versucht nummerous Dinge, aber ich kann Sie nicht richtig positioniert.

Hier ist mein HTML:

<div id="navigation">
<ul id="nav">
<li><div id="current_page"><p class="navlink"><a href="home.html"><img src="img/Menu_Home_Selected.png"></a></p></div></li>
</ul>

<!-- end of navigation -->
</div>

Und hier das CSS:

#navigation{
background-image: url(img/Navbar.png);
background-repeat: no-repeat;
width:955px;
color: #FFF;
float: left;
border:1px solid blue;
}

#current_page {
margin: -22 0 0 0px; 
width:164px;
min-height: 124px;
background-image: url(img/Selected.png);
background-repeat: no-repeat;
}

#nav {
min-height: 28px;
margin: 5 0 0 -14px;
}

#nav ul, li {
list-style: none;
}

#nav li {
width:164px;
}

.navlink p (
display: block;
margin: 35 35 35 35px;
}

Recht, jetzt sieht es wie folgt aus:
Album Vorhören http://piclair.com/data/mdc5z.jpg

Wie sieht es jetzt aus? 🙂
Sie müssen möglicherweise display: block und text-align: center; auf #nav li. und dann müssen Sie float der li-Elemente, vertikale Ausrichtung in der Mitte usw
Ich habe Hinzugefügt, wie es aussieht im Moment 😉 kalpaitch: thx, ich werde versuchen, dass jetzt
Eine sehr grundlegende Sache, die ich don ' T sehen überall ist die Breite der <a> - tag oder <p> - tag. Ohne Zuweisung breiten (entspricht, die mit deinem Bild), es werde schwierig sein, zu positionieren. Ich würde empfehlen, irgendwo ein Beispiel so, dass einer von uns dir helfen könnte. Ich sehe, dass Sie Hinzugefügt haben, wie dies aussieht wie jetzt. Sieht aus wie es könnte ein problem mit dem z-index als gut. Aber es sei denn, Sie geben ein Beispiel,ich kann nicht wirklich sagen, was das problem ist.
Ich kann nicht vertikal ausrichten, dass die li-Elemente ein, oder legen Sie einen Rand auf Sie, weil die li-Elemente enthalten, die gelben hintergrund-Bild. Wenn ich etwas ändern, um diejenigen, die li-Elemente, die dann das Hintergrundbild wird verschoben

InformationsquelleAutor Forza | 2013-01-02

Schreibe einen Kommentar