CSS/Bilder: Unterschied zwischen den Versionen

Aus Linupedia.org
Wechseln zu: Navigation, Suche
K (Restaurationsversuch aus einem Newsfeed-Archiv ;-))
 
K (Bild mit Link versehen: Kategorie hinzugefügt)
 
(Eine dazwischenliegende Version von einem anderen Benutzer wird nicht angezeigt)
Zeile 1: Zeile 1:
 
 
== Bild mit Link versehen ==
 
== Bild mit Link versehen ==
Als Beispiel dient der Header von [http://www.yehudi.de/ www.yehudi.de] Dieser soll mit einem Link versehen werden:
+
Als Beispiel dient der Header von [http://www.yehudi.de/ www.yehudi.de] Dieser soll mit einem Link versehen werden (Unter Joomla funktioniert dieses Beispiel im Gegensatz zu den anderen, wird aber unter W3C als Fehler gesehen):
  
 
So sieht die Eintragung in der index.php oder dem html Dokument aus:
 
So sieht die Eintragung in der index.php oder dem html Dokument aus:
Zeile 38: Zeile 37:
 
----
 
----
 
[[CSS|zurück zu CSS]]
 
[[CSS|zurück zu CSS]]
 +
[[Kategorie:Webdesign]]

Aktuelle Version vom 10. August 2007, 21:35 Uhr

Bild mit Link versehen

Als Beispiel dient der Header von www.yehudi.de Dieser soll mit einem Link versehen werden (Unter Joomla funktioniert dieses Beispiel im Gegensatz zu den anderen, wird aber unter W3C als Fehler gesehen):

So sieht die Eintragung in der index.php oder dem html Dokument aus:

<a href="http://www.yehudi.de/"><div id="header"></div></a>

Im CSS steht dann dafür folgender Eintrag

#header {
padding: 0px;
margin-right: 0px;
width: 764px;
height: 170px;
background: url(../images/header.jpg) no-repeat;
}

Alternativ würde es jedoch auch auf folgendem Weg gehen:

<a class="grafik" href="http://www.yehudi.de/"></a>

Im CSS stünde dann dafür folgender Eintrag

.grafik {
padding: 0px;
margin-right: 0px;
width: 764px;
height: 170px;
background: url(../images/header.jpg) no-repeat;
}

was dann die gesamte Klasse "grafik" betreffen würde. Es ist jedoch auch möglich die Stylesheetinformationen auf genau ein Element in der Klasse zu begrenzen. Dies sähe dann für einen Link folgendermaßen im CSS aus:

a.grafik {
padding: 0px;
margin-right: 0px;
width: 764px;
height: 170px;
background: url(../images/header.jpg) no-repeat;
}

zurück zu CSS