nicht angemeldet
Hallo Detlef,
HTML:
<h1 id="gbm"><span>Google baut Mist!</span></h1>
> > CSS:
> > ~~~css
> > h1 span {
> > display:none;
> > }
> > h1#gbm {
> > display:block;
> > width:200px;
> > height:40px;
> > background-image:url(ueberschriften/gbm.gif);
> > }
> >
Wodurch dann überhaupt keine Überschrift erscheint, wenn aus irgendwelchen Gründen die Grafik nicht geladen wird.
Schön, schön, schlecht für die, die grafiklastige Layouts bauen!
Warum nicht einfach:
<h1><img src="ueberschriften/gbm.gif" alt="Google baut Mist!"></h1>
Ja, warum nicht? Weil es in dem Kontext nicht die richtige Vorgehensweise ist. Man will ja eine Überschrift und keine Grafik an dieser Stelle!
> Oder etwas aufwändiger:
>
> HTML:
> ~~~html
<h1 id="gbm"><span></span>Google baut Mist!</h1>
>
CSS:
h1#gbm, h1#gbm span {
display:block;
width:200px;
height:40px;
position:relative;
}
h1#gbm span {
background-image:url(ueberschriften/gbm.gif);
position:absolute;
top:0;
left:0;
}
>
> (Natürlich müssen dabei die Schriftgröße und die Größe von h1 und der Grafik angepasst werden.)
Schönes Beispiel, aber das Markup gefällt mir gar nicht! Ein leeres span-tag? Ich hab das mal auf mein Markup umgebaut, leider spielt der Internetexplorer dann nicht mit, da ich mit z-index gearbeitet habe und er einfach keine Ebene in den Hintergrund schieben wollte.
Ausserdem: Was komplett gegen diesen Ansatz spricht sind Überschriftsgrafiken, die einen transparenten Hintergrund haben (bzw. haben müssen) und somit die ursprüngliche Überschrift durchscheinen lassen!
Gruß,
Andy