Frage stellen
ich heisse Chris und bin zum ersten mal hier.
Folgendes Problem habe ich nun ca. 5h probiert zu fixxen:
Ich habe eine abgerundete Navigation und wollte für den Mouseover die background-position verändern. Diverse tutorials haben mich zwar etwas weiter gebracht, aber im Kern hab ich glaube ich ein Verständnis Problem mit der Technik.
Hier kann man den Dummy begutachten: http://duix.org/TEMP/shape/mockup/dummy/index.html
CSS:
- Code: Alles auswählen
@charset "utf-8";
/* CSS Document */
* {
padding:0;
margin:0;
border:0;
}
p {
margin: 0
}
/* GLOBALHEADER */
#navi {
width:925px;
height:35px;
background: url("images/navbar.png") -0px -0px no-repeat;
;
positition:relative;
margin-top:210px;
}
/* Styles for using lists */
ul.nav {
width:925px;
height:35px;
list-style:none;
background:url(images/navbar.png) 0 0 no-repeat;
margin-top:210px;
}
ul.nav li {
width:auto;
height:35px;
float:left;
display:inline;
font-weight:normal;
padding-top:10px;
padding-left:25px;
}
ul.nav li a {
width:100px;
height:35px;
display:inline;
text-align:center;
text-decoration:none;
color:#303030;
}
ul.nav li a:hover {
height:70px;
display:inline;
background:url(images/navbar.png);
background-repeat:no-repeat;
background-position: -45px -35px ;
color:#fff;
padding-top:10px;
padding-bottom:10px;
}
html:
- Code: Alles auswählen
<div class="nav">
<ul class="nav">
<li><a href="index2.html">Startseite</a></li>
<li><a href="index2.html">Wir über uns</a></li>
<li><a href="index2.html">Studio</a></li>
<li><a href="index2.html">Mitgliedschaft</a></li>
<li><a href="index2.html">Kursangebot</a></li>
<li><a href="index2.html">Massage</a></li>
<li><a href="index2.html">Personal Training</a></li>
<li><a href="index2.html">Events</a></li>
<li><a href="index2.html">Kontakt</a></li>
</ul>
</div>
Es muss doch möglich sein, nicht extra jedem Link eine Klasse geben zu müssen und die background-position für jeden Link extra definieren zu müssen. Die konkrete Frage ist, wie bekomme ich es hin, dass a) der Background beim ersten Link auch den Anfang des Sprite Images nimmt, also die Ecken abgerundet sind, b) einen Abstand zwischen den Links auch so im Mouseover zu definieren, dass mir nicht gleich die komplette navigation zerschiesst. Sollte es nicht anders möglich sein, ausser dass man hier für jeden Link eine extra class machen muss, würde ich mich freuen wenn mir das Prinzip jemand erläutert, eventuell auch mit einem Beispielansatz.
Ich muss dazu sagen , ich bin schon 2 Jahre raus ausm CSS Coding und probier mich grade wieder reinzufummeln. Grundsätze sind mir schon geläufig aber die Zusammenhänge manchmal nicht
Die Navigation komplett als image sprite zu machen ist für mich keine Alternative.
Ich freue mich wenn sich jemand erbarmt mir zu helfen (vor allen Dingen möchte ich verstehen warum es so nicht geht und wie es sein muss. (Apple Beispiel und diverse Tuts hab ich mir angeschaut aber imemr wieer an der Anpassung auf meinen konkreten Fall gescheitert.
MFG
Chris