Hier erstmal alles komplett für die bessere übersicht!
-----------------------------------------------
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style type="text/css">
<!--
#nav1,#nav1 li {
margin: 0;
padding: 0;
list-style: none;
}
#nav1 a {
width: 176px;
height: 22px;
background: url(images/buttons/bild1.gif) no-repeat;
color: #666;
display: block;
font: bold 12px/22px Arial, sans-serif;
text-decoration: none;
text-indent: 14px;
}
#nav1 a:hover {
background-position: 0 -22px;
color: #900;
text-decoration: none;
}
-->
</style></head>
<body>
<table width="185" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
<tr>
<td id="nav1" width="185"><a href="index.php"></a></td>
</tr>
</table>
</body>
</html>
-----------------------------------------------
So zur Erklärung:
Unten (<body>...</body>) muss ich glaube ich nichts erklären...
also <td id="nav1" ... steht dafür das hier die erste nav die ihr oben beschrieben habt eingesetzt wird!
und <a href="...." gibt den link an wo das ganze hinführen soll!
<table width....... sind bloß einstellungen zur Tabbele...
So zu Oben!
-----------------------------------------------
#nav1,#nav1 li {
margin: 0;
padding: 0;
list-style: none;
}
#nav1 a {
width: 176px;
height: 22px;
background: url(images/buttons/bild1.gif) no-repeat;
color: #666;
display: block;
font: bold 12px/22px Arial, sans-serif;
text-decoration: none;
text-indent: 14px;
}
#nav1 a:hover {
background-position: 0 -22px;
color: #900;
text-decoration: none;
}
-----------------------------------------------
Ihr müsst für JEDES Bild das den Rollovereffekt haben soll den css neu definieren!!! Das heißt wenn ihr zwei bilder habt muss das ganze so aussehen:
-----------------------------------------------
#nav1,#nav1 li {
margin: 0;
padding: 0;
list-style: none;
}
#nav1 a {
width: 176px;
height: 22px;
background: url(images/buttons/bild1.gif) no-repeat;
color: #666;
display: block;
font: bold 12px/22px Arial, sans-serif;
text-decoration: none;
text-indent: 14px;
}
#nav1 a:hover {
background-position: 0 -22px;
color: #900;
text-decoration: none;
}
#nav2,#nav1 li {
margin: 0;
padding: 0;
list-style: none;
}
#nav2 a {
width: 176px;
height: 22px;
background: url(images/buttons/bild2.gif) no-repeat;
color: #666;
display: block;
font: bold 12px/22px Arial, sans-serif;
text-decoration: none;
text-indent: 14px;
}
#nav2 a:hover {
background-position: 0 -22px;
color: #900;
text-decoration: none;
}
-----------------------------------------------
Ihr müsst überall wo am Anfang #nav1... steht #nav2... schreiben!
Jetzt zu dem eigentlichen Bild! Das MUSS folgendermasen aussehen:
http://home.arcor.de/tod.raziel/button1.gif
bzw so...
http://home.arcor.de/tod.raziel/button2.gif
Bei
-----------------------------------------------
#nav2 a {
width: 176px;
height: 22px;
-----------------------------------------------
müsst ihr die Höhe und Breite des EINZELNEN Buttons angeben!!!
Bei
-----------------------------------------------
background-position: 0 -22px;
-----------------------------------------------
gebt ihr an wie viel, das lässt sich schwer erklären...
Wenn ihr ein Bild gemacht habt wie es oben angegeben ist also mit den eigentlichen zwei buttons und der eine ist Button ist jetzt 22 Pixel hoch müsst ihr an dieser stelle im quelltext -22px; schreiben!!
Ist jeder der einzelnen Buttons 56 Pixel groß müsst ihr im Quelltext -56px; angeben! Ist jetzt klar oder?! ich hoffe es zumindest! xD
Hier noch eine Beispiel seite von mir:
http://ct2004.lima-city.de/tut.htm
Wer noch fragen hat einfach bei mir melden!
Am besten über ICQ: 307-588-770
oder email: ct_raziel(at)web.de
oder pn! ^^