Gute Idee, hat aber nicht geklappt.
Beiträge von sigiman
-
-
Ich habe Hyperlinks mit Hintergrundbilder erstellt. Geht inzwischen prima bei allen Browsern, nur nicht beim neuen IE 10. Dort erhalte ich immer eine Linienumrandung, die ich nicht haben will. Auch mit text-decoration: none; tut sich nichts. Hat jemand eine gute Idee?
-
Hallo,
dein
Ok, daran habe ich auch schon gedacht. Und noch viel besser: Wenn ich das img weglasse und nur den "alt"-Text benutze, wird eine Umrandung der Schriftbox sichtbar und den Text kann ich lesen. Das beste daran: Wenn ich über die Schriftbox klicke, funktioniert der Link. Aber das ist nur ein Teil des Bildes und den Rand möchte ich auch nicht mehr sehen. -
Hallo,
ich mache einen ersten verzweifelten Versuch - seit gestern bin ich neues Mitglied.
Beim Erstellen einer neuen Homepage bin ich bei einem Teilbereich der Verlinkung hängen geblieben. Dabei möchte ich mit kleinen Grafiken den Link interessant machen. Ich habe dazu 2 Grafiken erstellt: eine geschlossene und eine halboffene Haustür. Nun habe ich über Background-images gearbeitet (auch um dieses Kapitel einmal zu erlernen). Normal ist eine geschlossene Tür. Mit :hover eine halbgeöffnete Tür, wenn ich mit der Maus darüberfahre. Mit :active wieder die geschlossene Tür, wenn ich die Maustaste drücke. Das funktioniert prima.
Aber sobald ich im html-Teil die "a-ref=" für die Verlinkung eingebe, ist alles vorbei: kein :hover, kein :active. Die Verlinkung funktioniert, aber das Spiel der einzelnen Schritte (geschlossene Tür, halboffene Tür) nicht. Was mache ich falsch?
Die Dateien und Grafiken liegen bei.
Ich hoffe auf eine sachliche Antwort.
SigimanDie Dateien:
1. Html
<!DOCTYPE html>
<html><head>
<title>background</title>
<link rel="stylesheet" type="text/css" href="styles/stylesb.css">
</head><body>
<div id="seite">
<a href="club-vip.html"><img src="images/haust-o.jpg" alt="Tür offen"/></a>
</div></body>
</html>2. CSS:
#seite
{
margin: auto;
width: 71px;
height: 108px;
background-image: url(../images/haust-z.jpg);
}#seite:hover
{
margin: auto;
width: 71px;
height: 108px;
background-image: url(../images/haust-o.jpg);
}#seite:active
{
margin: auto;
width: 71px;
height: 108px;
background-image: url(../images/haust-z.jpg);
}