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
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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Gibt es einige Dinge über Ihre Auszeichnungen, die optimiert werden konnten (wie von Ihnen erwähnt, "hässlich"). Verwenden Sie keine Bilder, wo Sie können web-Farben verwenden. Für Bild, text, setzen Sie den eigentlichen text, der das Bild repräsentiert, in den html-Code und verwenden Sie
background-image
für die eigentliche jpg in der css. Vertikal zentrieren ist nicht so einfach, wie es sein sollte (es sei denn, Sie sind mit dem Tabellen-Zellen), aber Sie können verwenden Sie die oben/unten-padding oder line-height in einer Menge von Fällen.Hier ist eine Geige mit ein paar Dinge aktualisiert. Hoffe, das hilft.
Schauen Sie sich auch diese blog-post mit verschiedenen vertikalen alignment-Methoden. Einer von Ihnen sollte für Sie arbeiten, wenn die mine nicht.
danke. froh, dass es geholfen hat
verzeihen Sie mir für das Fragen wieder, aber wenn ich diese Technik außerhalb von block-Elementen funktioniert es nicht. Wie kann ich das ident-text für normale links mit einem Bild dahinter? Die links werden nicht in <li> tags dieser Zeit. Eine Lösung, die ich über viele Male ist die Verwendung von H1-tags, aber das funktioniert nicht wie ich will nicht jedes H1-tag auf einer neuen Zeile
Schon bekam er, Farbe: transparent hat den job 😉
Hmm, aber ändert sich der cursor in einen Zeiger wenn Sie den Mauszeiger über die invisbile text. Immer noch nicht ideal... irgendwelche Ideen?
InformationsquelleAutor Scrimothy
Ich hoffe das löst es..ich werde aktualisieren mit dem rest der details, wenn ich weiß, wenn das ist, was Sie wollte.
http://jsfiddle.net/7hSny/7/
Korrigierte ich die html obwohl.
InformationsquelleAutor AdityaSaxena
Ich schlage vor, Sie verwenden die gleiche Technik wie gettyimages ( und Ihre css spritesheet ), und führen Sie eine einfache css spritesheet. So machen Sie sich auf die bessere Nutzung von semantischen und styling.
Betrachten Sie eine navigation mit einer Liste :
Dann, Sie stilisieren Sie mit einem einfachen CSS :
Und dann mit einem einfachen spritesheet zu "malen" Ihre Schaltflächen (tutorial für spritesheets) :
InformationsquelleAutor y_nk