|
|||
rollover-buttons in fixed navigation
hallo forum!
ich habe für meine seite ligaturen.net das css einer fixierten navigation übernommen und angepasst. jetzt möchte ich gerne statt text-links rollover-buttons einfügen. ich habe dafür eine <li class> für jeden button erstellt, aber es funktioniert nicht. - buttons erscheinen hinter dme text, haben keinen link intus und auch der rollover-effekt entsteht nicht. was mache ich falsch? kann mir jemand helfen? bestens, Björn hier der html-code, relativ einfach: Code: Alles auswählen <div id="wrapper"> <div id="container_start"> <div id="stickynav"> <ul id="nav" class="clearfix"> <li class="we"><a href="#container_we">we</a></li><br /> <li class="you"><a href="#container_you">you</a></li><br /> <li class="done"><a href="#footer">done</a></li> </ul> </div> und hier das css: Code: Alles auswählen #stickynav { display: block; height: 450px; width: 92px; left: 70px; top: 250px; z-index: 9999; } #stickynav #nav { position: fixed; z-index: 9999; left: 70px; top: 250px; height: 92px; width: 92px; } #stickynav #nav li, #stickynav #nav li { display: block; float: left; height: 92px; width: 92px; list-style-type: none } #stickynav #nav li a:hover { text-decoration: none; } li.we { background-image: url(../bn_we.png); } li.you { background-image: url(../bn_you.png); } li.done { background-image: url(../bn_done.png); } li.we a { background-image: url(../bn_we_filled.png); } li.you a { background-image: url(../bn_you_filled.png); } li.done a { background-image: url(../button_done_filled.png); } li a:hover {background-image: none; } .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } |
Sponsored Links |
|
|||
Das <br> hinter dem </li> ist unnötig, nicht valide und gehört entfernt.
Ich weiß nicht, wieso das Bild hinter dem Text ist, schließlich habe ich deine Bilder nicht. Ich kann dir nur sagen, was du tust: Du definierst sowohl für die Liste als auch für die Links ein Hintergrundbild, wobei das Bild der Links das der Listenpunkte überdeckt. Das Bild der Links entfernst du, sobald du über den Link fährst. Ist dies nicht der Effekt, welchen du suchst? |
Sponsored Links |
|
|||
Untersucht man die Elemente mit Firebug (oder einem anderen Webdevelopertool) dann kann man sofort erkennen, wo das Problem liegt. Dein Link ist natürlich noch, wie standardmäßig vorgesehen, ein inline Element und nur so breit wie der Text. Ändere den Link auf ein Blockelement und mache dieses so groß wie gewünscht.
Auch scheint mir, du möchtest den Text durch das Bild ersetzen. Allerdings ist mir schleierhaft, wieso du dafür Bilder verwenden möchtest. Diesen Kreis um die Wörter kannst du auch mittels CSS lösen, genau wie das konsequente großschreiben der Wörter. Meine Empfehlung ist also: Vergiss die Bilder und löse dies komplett mit CSS. |
|
|||
Dein Code ist milde gesagt, sehr mies.
Verwende einen Texteditor, erstelle deine Seiten in HTML5 und CSS. Lasse Javascript für den Anfang weg. Speichere deine Seiten als UTF-8 ohne BOM. Beschäftige dich mit den Elementen von HTML5 und den Selektoren in CSS. Schreibe deine Seite neu und überprüfe sie mit dem Validator auf Fehler bevor du sie uns erneut vorstellst. Wenn du Quellcode hier reinstellst, verwende bitte in Zukunft die Code-Schalter aus dem Editor. Das sind deine Fehler zur Zeit und das lediglich im HTML-Quelltext: [Invalid] Markup Validation of http://ligaturen.net/ - W3C Markup Validator
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
|||
danke für die antworten und die kritik.
den validator werde ich anwenden. ich bin anfänger, ich weiß, da ist noch einiges im argen... jetzt stehen zumindest di buttons so, wie sie sollten. eine frage habe ich noch: beim rollover-button ist der zuerst sichtbare zum großen teil durchsichtig, weshlab der darunter liegende durchscheint. rollover-effekt ist damit ntürlich flöten gegangen. gibt's die möglichkeit den untern button zu verstecken? |
|
|||
Kopiere und speichere dir mal den folgenden Code und schau dir mal was passiert.
Versuche auch zu verstehen was da wann wirkt. HTML-Code:
<!DOCTYPE HTML> <html lang="de"> <head> <meta charset="UTF-8"> <title>test</title> <style type="text/css"> nav ul {display: block; list-style-type:none;} nav ul li, nav ul li a:link {display: block;width: 92px; height:92px;margin-top:20px;} nav ul li.we {background-image: url('http://ligaturen.net/bn_we.png');} nav ul li.you {background-image: url('http://ligaturen.net/bn_you.png');} nav ul li.done {background-image: url('http://ligaturen.net/bn_done.png');} nav ul li.we:hover {background-image: url('http://ligaturen.net/bn_we_filled.png');} nav ul li.you:hover {background-image: url('http://ligaturen.net/bn_you_filled.png');} nav ul li.done:hover {background-image: url('http://ligaturen.net/button_done_filled.png');} </style> </head> <body> <nav> <ul> <li class="we"><a href="#container_we"></a></li> <li class="you"><a href="#container_you"></a></li> <li class="done"><a href="#footer"></a></li> </ul> </nav> </body> </html>
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
|||
Hallo.
ok, ich bin beeindruckt. Das ist mit dem :hover ganz einfach gelöst. Ich danke Dir für diese Nachhilfestunde... Was mich dabei wundert: Die buttons springen schon an, klar. Aber sobald sie auf dem Bereich "content_we" landen, nicht mehr...? Woran liegt das? Tausend Dank! Björn |
Stichwörter |
button, fixed, navigation, rollover |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Ausrichtung Kalender | greece4u | CSS | 20 | 14.05.2012 14:32 |
Navigation ist nicht mittig | Schokokrapfen | CSS | 29 | 20.09.2011 00:19 |
Problem mit Navigation | safari | CSS | 12 | 20.04.2011 12:11 |
Javascript UL Navigation im IE6 | ven | CSS | 7 | 29.04.2008 16:29 |
Problem mit dem Menü [erledigt] | Julian | CSS | 2 | 16.01.2006 00:27 |