Link & Taxi Bild ändern?

Barocco · 14.12.2007, 15:00

Hallo Zusammen

Ich bin neu bei euch und hoffe jemand kann mir gleich mal Helfen

Ich mache mir gerade eine Homepage und wollte ein Link Symbol das sic ändert, zu finden ist dies unter http://www.0763939300.ch/site/prei.html

Bei der Navigation habe ich da ein png Taxi, von diesem Bild habe ich drei Versionen die ich gleich mal anhänge

Ich möchte als Standard das nav1k.png

wenn man nun über den Link fährt soll nav2k.png

Leuchten und bei aktivem Link das nav3k.png

Doch wie mache ich das

Ich habe es geschafft das wenigstens die Bilder und der Link keine underline mehr haben

Ich hoffe jemand kennt die Lösung und ist so Nett mir zu helfen

Mich@el · 14.12.2007, 16:40

Möglich ist das, in dem Du Deine Navigation so deklarierst, dass sie bei z.B. a:link a: visited bzw. bei a:hover entsprechend auf die png´s verweist. Auf maxdesign hast Du ein Beispiel mit den Buttons...

Grüße
Michael

satre · 14.12.2007, 16:50

Hallo,

diesen Effekt erreichst du mit einer Liste und CSS. Ein Beispiel mit Code findest du hier auf Listamatic.

Barocco · 15.12.2007, 19:02

Super danke für eure Antworten, ich habe das beinahe geschafft

der Test habe ich Test
Doch wie bekomme ich die Symbole nun vor den Text und nicht unter den Text??

Code:

<style type="text/css">
<!--
#navcontainer ul
{
list-style-type: none;
text-align: left;
}

#navcontainer ul li a
{
	background: transparent url(http://www.0763939300.ch/images/nav/nav1k.png) left center no-repeat;
	padding-left: 15px;
	text-align: left;
	font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
	text-decoration: none;
	color: #999;
}

#navcontainer ul li a:hover
{
	background: transparent url(http://www.0763939300.ch/images/nav/nav2k.png) left center no-repeat;
	color: black;
}

#navcontainer ul li a#current
{
	background: transparent url(http://www.0763939300.ch/images/nav/nav3k.png) left center no-repeat;
	color: #666;
}



body,td,th {
	color: #000000;
}
body {
	background-color: #CCCCCC;
}
#apDivNAV1 {
	position:absolute;
	left:160px;
	top:52px;
	width:245px;
	height:90px;
	z-index:1;
}
-->
</style></head>

Code:

<body>



<div id="apDivNAV1">
  <div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="http://www.08763939300.ch/index.html" id="current">Home1</a></li>
<li><a href="http://www.08763939300.ch/site/index.html">Web Home</a></li>
<li><a href="http://www.08763939300.ch/site/prei.html">Preise</a></li>
<li><a href="http://www.08763939300.ch/site/kont.html">Kontakt</a></li>
<li><a href="http://www.08763939300.ch/site/serv.html">Service</a></li>
</ul>
</div></div>
</body>

satre · 15.12.2007, 19:16

Hallo,

dazu musst du den "padding-left"-Abstand im Container "#navcontainer ul li a" erhöhen. Da deine Taxi-Bilder 30px breit sind, würde ichs mal mit einem Wert von 35-40px versuchen, je nachdem wie's am besten aussieht.

Barocco · 15.12.2007, 19:30

Super das Klappt, vielen Dank

Zitat:

Zitat von satre

Hallo,

dazu musst du den "padding-left"-Abstand im Container "#navcontainer ul li a" erhöhen. Da deine Taxi-Bilder 30px breit sind, würde ichs mal mit einem Wert von 35-40px versuchen, je nachdem wie's am besten aussieht.