zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden rollover-buttons in fixed navigation

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.03.2014, 12:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.03.2014
Beiträge: 7
derbjoern befindet sich auf einem aufstrebenden Ast
Standard 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%;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.03.2014, 12:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.065
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.03.2014, 12:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.03.2014
Beiträge: 7
derbjoern befindet sich auf einem aufstrebenden Ast
Standard

Hallo!
Danke für die schnelle Antwort.
Ja, diesen Effekt suche ich bei allen drei Punkten, aber so sieht es aus:
ligaturen.net
Verstehe nicht, warum sich da gar nix tut??
Mit Zitat antworten
  #4 (permalink)  
Alt 18.03.2014, 13:05
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.065
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 18.03.2014, 13:17
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 18.03.2014, 14:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.03.2014
Beiträge: 7
derbjoern befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #7 (permalink)  
Alt 18.03.2014, 15:28
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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>
Du brauchst nur das nav-Element fixiert zu positionieren.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #8 (permalink)  
Alt 18.03.2014, 16:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.03.2014
Beiträge: 7
derbjoern befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 18.03.2014, 19:35
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

weil z-index fehlt.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 18.03.2014, 20:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.03.2014
Beiträge: 7
derbjoern befindet sich auf einem aufstrebenden Ast
Standard

danke! jetzt passt es! vielen dank!
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
button, fixed, navigation, rollover

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Ausrichtung Kalender greece4u CSS 20 14.05.2012 13:32
Navigation ist nicht mittig Schokokrapfen CSS 29 19.09.2011 23:19
Problem mit Navigation safari CSS 12 20.04.2011 11:11
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 15:29
Problem mit dem Menü [erledigt] Julian CSS 2 15.01.2006 23:27


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:11 Uhr.