Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag01.08.2013 um 11:32 (UTC)    
Titel: [erledigt] Horizontale Navi mit Hover Effekt

Ich hab grade 3 geschlagene Stunden rumprobiert, aber nichts wollte klappen:

Ich hätte gerne für die Webseite http://fs-network.page.tl eine horizontale Navi.
Alle Navi Buttons sollen unabhängig von dem Text der in ihnen steht eine Breite von 96px haben.

Normal soll der Navlink so aussehen: http://img.webme.com/pic/f/fs-network/fsnetworkbutton.png

Wenn man mit der Maus rüberfährt, oder die Seite gerade aktiv ist, so: http://img.webme.com/pic/f/fs-network/fsnetworkbuttonhover.png


Kriegt das hier irgendwer hin? Wäre echt nett, positionieren schaffe ich hoffentlich dann selbst Smile



lG


Zuletzt bearbeitet von nilssisten am 02.08.2013, 01:57, insgesamt 3-mal bearbeitet
Beitrag01.08.2013 um 14:56 (UTC)    
Titel:

Ich weiß gerade nicht was das Problem daran ist deswegen weiß ich auch nicht ob das so deinen Vorstellungen entspricht:

Code:
#nav_container {
   height: 56px;
   background: url(http://img.webme.com/pic/f/fs-network/fsnetworkbutton.png);
   overflow: hidden;
}

ul#nav {
   list-style-type: none;
}

li.nav_element {
   width: 96px;
   height: 56px;
   border-right: 1px solid #59C5FE;
   text-align: center;
   line-height: 56px;
   float: left;
}

li.nav_element a {
   color: #FFFFFF;
   text-decoration: none;
   display: block;
}

li.nav_element:hover, li.checked_menu {
   background: url(http://img.webme.com/pic/f/fs-network/fsnetworkbuttonhover.png);
}

li.nav_element a:hover, li.checked_menu a {
   color: #000000;
}
Beitrag01.08.2013 um 20:36 (UTC)    
Titel:

Erstmal danke für die Antwort Pexxi und sorry dass ich jetzt erst antworte.

So in der Art wie du es gemacht hast hab ich es auch schon versucht, aber schau mal was dabei rauskommt Surprised

http://fs-network.de.tl/

Hast du ne Ahnung woran das liegen könnte??



Hier mal mein kompletter CSS Code: (Nach dem Einfügen von pexxi's code)

Code:
/* Ausblenden */


h1#header{display: none;}

h2#title{display: none;}



/* Werbung positioniert */

table[height="102"] {
position: absolute;
left: 0px;
top: -1px;
margin-left: 0px; }

´div#webme_sky_ad{
width: 160px;
position: absolute;
top: 160px;
margin-left: -160px;
right: 0;
left: 100%;
}



/* Inhalt */

div#content{
padding-top: 60px;
padding-left: 0px;}



/* Header */

body {
background-color:#Fdfdfd;
background-image:url(http://img.webme.com/pic/f/fs-network/fsnetworkheader.jpg);
background-repeat:no-repeat;



/* Navigation */

#nav_container {
   height: 56px;
   background: url(http://img.webme.com/pic/f/fs-network/fsnetworkbutton.png);
   overflow: hidden;
}

ul#nav {
   list-style-type: none;
}

li.nav_element {
   width: 96px;
   height: 56px;
   border-right: 1px solid #59C5FE;
   text-align: center;
   line-height: 56px;
   float: left;
}

li.nav_element a {
   color: #FFFFFF;
   text-decoration: none;
   display: block;
}

li.nav_element:hover, li.checked_menu {
   background: url(http://img.webme.com/pic/f/fs-network/fsnetworkbuttonhover.png);
}

li.nav_element a:hover, li.checked_menu a {
   color: #000000;
}


Zuletzt bearbeitet von nilssisten am 01.08.2013, 21:54, insgesamt einmal bearbeitet
Beitrag02.08.2013 um 00:27 (UTC)    
Titel:

Du hast die Styleanweisungen für body nicht mit einer geschweiften Klammer geschlossen. Wink
Beitrag02.08.2013 um 00:53 (UTC)    
Titel:

.......



*facepalm*



Jedes verdammte mal wenn irgendwas nicht klappt und ich hier im Forum frage liegt es nur daran dass ich irgendwelche bescheuerten Flüchtigkeitsfehler gemacht hab -.-


Danke pexxi & Gute Nacht Smile
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de