Link auf Hintergrundbild?

[ignoramus]

Hallo!

Ich versuche mich daran, ein Wordpress-Template zu basteln. Jetzt habe ich die Kopfgraphik der Seite so realisiert:

style.css:
-------------------------------------------------------
#headerimage {
 clear: both;
 background: url(img/header.png) no-repeat center 0px;
 margin: 10px;
 height: 130px;
}
-------------------------------------------------------

In der html-Datei sieht das dann einfach so aus:
-------------------------------------------------------
<div id="headerimage">
</div>
-------------------------------------------------------

Jetzt möchte ich gerne auf das Bild einen Link legen, denn ich schaffe es irgendwie nicht, einen Text in dem Bereich zu platzieren, ohne dass das Bild mit verrutscht. Ist das überhaupt möglich, die ganze "Sektion" mit einem Link zu versehen?

Vielen Dank für jede Hilfe!
ignoramus

[wucher wichtel]

Hallo!

Jetzt möchte ich gerne auf das Bild einen Link legen,

Was meinst du damit?

denn ich schaffe es irgendwie nicht, einen Text in dem Bereich zu platzieren, ohne dass das Bild mit verrutscht. Ist das überhaupt möglich, die ganze "Sektion" mit einem Link zu versehen?

Warum gehst du das Problem nicht an seiner Wurzel an? Zeige uns deinen Code, der die Probleme mit der Positionierung von Text macht. Am besten wäre es, wenn du uns einen Link posten könntest :-) In welchem Browser hat es die Probleme gegeben?

ciao, ww

[ignoramus]

Hallo!

Vielen Dank für Deine Antwort!

Jetzt möchte ich gerne auf das Bild einen Link legen,
Was meinst du damit?

Ich möchte gerne, dass ich auf die Startseite komme, wenn ich in den header-Bereich klicke. Aber da ist ja nur das Bild, welches nicht mit <img src...> eingebunden wurde, sondern per CSS als Hintergrund. Daher weiß ich nicht, wie und ob ich einen Link darauf legen kann? Kann ich in der CSS-Datei dem Hintergrund einen Ziel-URL zuweisen?

Du merkst schon, ich habe da nicht so den Plan. Mache bisher immer alles per try-and-error ;-)

Warum gehst du das Problem nicht an seiner Wurzel an?
Zeige uns deinen Code, der die Probleme mit der Positionierung von
Text macht.
Am besten wäre es, wenn du uns einen Link posten könntest :-)
In welchem Browser hat es die Probleme gegeben?

Die Text-Variante wäre eh nur 2te Wahl. Am liebsten wäre mir die oben beschriebene.

Der benutzte Browser ist Firefox 2.0.0.2 unter Fedora.

[wucher wichtel]

Hallo!

Kann ich in der CSS-Datei dem Hintergrund einen Ziel-URL zuweisen?

Nein. Mit CSS bestimmst du nur das Aussehen. Das Problem ist, dass ein Link keine Block-Elemente enthalten darf (siehe Der Martin). Also kannst du dein <div> nicht verlinken. Du könntest mit onClick und location.href arbeiten.

Du merkst schon, ich habe da nicht so den Plan. Mache bisher immer alles per try-and-error ;-)

So lerne ich auch alles :-)

ciao, ww

[ignoramus]

Hallo!

Vielen Dank für Deine Hilfe!

Du könntest mit onClick und location.href arbeiten.

Etwa so? (geht nicht ;-)

<div id="headerimage" onclick="javascript:window.location.href = http://google.de">
</div>

[wucher wichtel]

Hallo!

Etwa so? (geht nicht ;-)

lol...aber fast ;-)

<div id="headerimage" onclick="javascript:window.location.href = http://google.de">
</div>

<div id="headerimage" onclick="window.location.href = 'http://google.de"'>
</div>

JavaScript erwartet einen String. Deswegen muss die URL in einfache Anführungszeichen gesetzt werden.

ciao, ww

[ignoramus]

Hallo!

Super! Läuft wie geschmiert!
Vielen Dank nochmal und einen schönen Abend!

ignoramus

<div id="headerimage" onclick="window.location.href = 'http://google.de"'>
</div>

JavaScript erwartet einen String. Deswegen muss die URL in einfache Anführungszeichen gesetzt werden.

[Detlef G.]

Hallo wucher wichtel

... Du könntest mit onClick und location.href arbeiten.

Javascript, für ein einfaches CSS-Problem?

Auf Wiederlesen
Detlef

[wucher wichtel]

Hallo!

... Du könntest mit onClick und location.href arbeiten.

Javascript, für ein einfaches CSS-Problem?

Ich kannte die Lösung, die du vorgeschlagen hast, nicht. Ich hatte auch noch nie das Bedürfniss ein Block-Element zu verlinken :-) Aber ich werde es mir auf jeden Fall merken.

ciao, ww

[ignoramus]

Moin!

Habe das im Ergebnis jetzt wohl hinbekommen, indem ich in der HTML-Datei  einen Link "um das <div> Element" gelegt habe, also

<a href="http://google.de"><div id="headerimage"></div></a>

Aber das ist nicht xhtml-konform - und das möchte ich dann nicht... ;-)

[Detlef G.]

Hallo ignoramus

Welchen Dokumenttyp verwendet dein Template?

Bei Transitional oder, wenn #headerimage nicht direkt Kind von body ist könntest du es so machen:

<a href="example.org" id="headerimage"></a>  

#headerimage {  
 display:block; /* damit wird der Link zum Block */  
 background: url(img/header.png) no-repeat center 0px;  
 height: 130px;  
 /* eventuell könnte noch width:100% für alte IEs nötig sein */  
}  

Bei Strict:

<div id="headerimage">  
 <a href="example.org"></a>  
</div>  

#headerimage {  
 background: url(img/header.png) no-repeat center 0px;  
 text-align: center; /* für alte IEs */  
}  
#headerimage a {  
 display:block;  
 width:100%; /* oder Breite der Grafik, dann dazu noch  
 margin:0 auto; */  
 height:130px  
}

... denn ich schaffe es irgendwie nicht, einen Text in dem Bereich zu platzieren, ohne dass das Bild mit verrutscht.

Einen Linktext kannst du einfach im a-Element angeben, der dürfte dann auf der Grafik angezeigt werden, ohne irgendetwas zu verschieben.

Auf Wiederlesen
Detlef