✔ Background-Image mit Link versehen

[orffyre]

Hallo!

Ich habe folgendes Problem: bei mir wird ein background-Image per css in eine xhtml-Seite eingebunden. Das sieht ungefähr so aus:

#header {
position: relative;
top: 0px;
background: url('images/header.jpg');
width: 700px;
height: 100px;
margin: 0px;
margin-top: 0px;
}


Die Implementierung später in der xhtml sieht dann so aus:

<div id="header">
</div>


Also alles recht simpel. Da ich noch Newbee im Bereich css und xhtml bin, habe ich folgendes Problem:

Ich würde gerne das Image mit einem Link hinterlegen. Also wenn jemand über das Image mit der Maus fährt, sollte ein Link angezeigt werden.

Wie mache ich das jetzt am besten?
Wichtig: es sollte xhtml- und css-valid sein! Ich hatte nämlich schon eine Idee und habe einfach um das

<div id="header">
</div>

ein <a href="... gebastelt und dann hatte mein Image den Link! Die valide Seite aber war dann futsch.

Also wenn jemand was weiss, bitte melden und danke schonmal im Vorraus!

many greetz,
orffyre

 

[Quaese]

Hi,

solange sich keine Blockelemente innerhalb des a-Tags befinden, kannst du mal folgendes versuchen:

#header a{ display: block;
           width: 700px;
           height: 100px;
           margin: 0;
           padding: 0;}

Deine Definitionen für #header bleiben unverändert.

Und die zugehörige HTML-Passage:

<div id="header">
  <a href="seite.html">&nbsp;</a>
</div>

Ciao
Quaese

 

[Gumbo]

Nimm lieber Folgendes, damit hat der Link wenigstens einen Inhalt:

<div id="header">
	<a href="seite.html" title="Gehe zur Startseite"><span>Startseite</span></a>
</div>

#header {
	position: relative;
	top: 0;
	width: 700px;
	height: 100px;
	background: url('images/header.jpg');
}
#header a {
	display: block;
	height: 100%;
}
#header a span {
	display: none;
}

 

[orffyre]

Alles klar, das wars schon. So was ähnliches habe ich mir schon gedacht, wäre aber nicht auf das unsichtbare "span" gekommen.

Vielen Dank!

 

[Maik]

Dann markiere bitte zukünftig solche Threads auch als erledigt