nicht angemeldet
Bild als Überschrift - und das als Link
Moin,
auf einer Seite ersetze ich eine h1-Überschrift durch ein Bild. Der html-Quellcode sieht so aus:
<h1><span>Überschriftstext</span></h1>
Das dazugehörende CSS so:
h1
{
background:transparent url(überschriftsbild.jpg) no-repeat;
display:block;
height:120px;
margin:0 auto;
width:350px;
}
h1 span
{
display:none;
}
Das funktioniert (ohne CSS sieht man den Überschriftstext, mit CSS statt dessen das Bild) und ist laut Validator valide.
Nun möchte ich das ganze zu einem Link machen. Und zwar so, dass nur der 350*120px Bereich des Bildes ein Link ist.
Ich seh den Wald vor lauter Bäumen nicht. Wie schreib ich da den Quelltext bzw. das CSS richtig, so dass die Seite valide bleibt? Das <a> vor dem <h1> liefert beim Validator eine Fehlermeldung. Das <a> vor oder nach dem <span> bringt zwar eine valide Seite, aber ohne Link.
Danke!
Regina
-
Ich seh den Wald vor lauter Bäumen nicht. Wie schreib ich da den Quelltext bzw. das CSS richtig, so dass die Seite valide bleibt? Das <a> vor dem <h1> liefert beim Validator eine Fehlermeldung. Das <a> vor oder nach dem <span> bringt zwar eine valide Seite, aber ohne Link.
<h1><a href="http://example.com">foobar</a></h1>h1 bleibt wie sie ist.
a wird darin absolut positioniert, der Ankertext wird mit negativem text-indent ins Nirvana geschossen. -
Hi,
Das funktioniert (ohne CSS sieht man den Überschriftstext, mit CSS statt dessen das Bild)
Und mit CSS an, Anzeige von Bildern aber deaktiviert - gar nichts.
Empfehlenswerte Lektüre zur Thematik: http://meiert.com/de/publications/articles/20050513/
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hi,
Und mit CSS an, Anzeige von Bildern aber deaktiviert - gar nichts.
aber es machen ja auch andere so. ;-)
MfG
Regina Müller
-
Und mit CSS an, Anzeige von Bildern aber deaktiviert - gar nichts.
aber es machen ja auch andere so. ;-)
0wn3d :)
-
-
-
Om nah hoo pez nyeetz, Regina Müller!
<h1><a href="...">Überschriftstext<img src="..." alt="Überschriftstext"></a></h1>
Formatierung wie suit, das Hintergrundbild von h1 ist das <img> und bei Bilder aus, CSS an sieht man den alt-text.
Matthias
--
