Google und display:none

[Detlef G.]

Hallo Andy

Das einfachste Beispiel, was auch Kuno genannt hat und vielfach eingesetzt wird, ist das Ersetzen der Überschriften mit Grafiken.

So zum Beispiel:
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.
Warum nicht einfach:

<h1><img src="ueberschriften/gbm.gif" alt="Google baut Mist!"></h1>  

Oder etwas aufwändiger:

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.)

Auf Wiederlesen
Detlef