mjchael: Link-Navigation mit Button/Bild

Beitrag lesen

Beispiele für Navigationslinks mit separatem CSS-Teil (im Head-Bereich oder in einer seperaten CSS-Datei)
---
.navli a:link{
   font-family:Arial, Helvetica, sans-serif;
   text-decoration:none;
   color:#000000;
   font-size:14px;
   font-weight:bold;
   padding-left:20px;
   margin:15px;
   display:block;
 background-image: url(../img/Rechteck000.png);
 background-repeat: no-repeat;
}

.navli  a:visited{
   font-family:Arial, Helvetica, sans-serif;
   text-decoration:none;
   color:#666666;
   font-size:14px;
   font-weight:bold;
   padding-left:20px;
   margin:15px;
   display:block;
 background-image: url(../img/Rechteck666.png);
 background-repeat: no-repeat;
}

.navli  a:hover{
   font-family:Arial, Helvetica, sans-serif;
   text-decoration:none;
   color:#FF9900;
   font-size:14px;
   font-weight:bold;
   padding-left:20px;
   margin:15px;
   display:block;
 background-image: url(../img/RechteckF90.png);
 background-repeat: no-repeat;
}
---
Der eigentliche Link:

<a href="../index.html">Inhalt</a>
--------------------------------------------
In dem A-Tag:

<a href="../index.html" style="background-image: url(../img/RechteckF90.png); background-repeat: no-repeat; background-color:#FF9900;" >Inhalt</a>

Problem: man benötigt auf alle Fälle einen Inhalt als Schrift.
-----------------------------------
Aber warum nicht einfach:
<a href="../index.html" style="background-color:#FF9900">
   <img src="../img/Hintergrund.png " width="100" height="62" />
</a>