Firmenlogo als <h1> deklarieren

[Chris]

Hallo.

Ich würde meine Seite gerne in CSS richtig strukturieren - und dazu das Firmenlogo als <h1>-Tag einbinden. Dann könnten die einzelnen Seitenüberschriften sinngemäß als <h2>-Tag eingebunden werden. Sinnvoll wäre es sicherlich, es so zu machen:

<h1>Firmenname</h1>

Aber das Logo muss schon als Grafik eingebunden werden (verwendet eine spezielle Schriftart und sowas). Also würde das so aussehen:

<h1><img src="..." width="" height="" alt=""></h1>

Oder alternativ das Logo per CSS als Hintergrundbild von h1:

<h1 style="background-image:url(logo.jpg); width:x; height:y;"></h1>

Für Suchmaschinen, Screenreader & Co. wäre das allerdings Mist. Wie macht man sowas üblicherweise? Am besten wäre, ich würde den Firmennamen im Klartext in das <h1>-Tag schreiben (wie im ersten Beispiel oben), und er würde aber durch entsprechende CSS-Definitionen nicht angezeigt werden, sondern statt dessen die Grafik darstellen.

Ist sowas machbar?

Beste Grüße
Chris

[suit]

Für Suchmaschinen, Screenreader & Co. wäre das allerdings Mist. Wie macht man sowas üblicherweise? Am besten wäre, ich würde den Firmennamen im Klartext in das <h1>-Tag schreiben (wie im ersten Beispiel oben), und er würde aber durch entsprechende CSS-Definitionen nicht angezeigt werden, sondern statt dessen die Grafik darstellen.

ich machs immer so
http://meiert.com/de/publications/articles/20050513/#toc-phark

gilder-levin ist imho zwar besser, allerdings verträgt das der ie6 nicht, wenn  ein link im h1-element zu finden ist

[Cheatah]

Hi,

<h1><img src="..." width="" height="" alt=""></h1>

eher alt="Firmenname", was das Äquivalent zur Text-Variante wäre.

Bei einem Firmenlogo scheiden sich die Geister, ob es Inhalt oder Verzierung ist. Meiner Ansicht nach sind beide Varianten legitim.

<h1 style="background-image:url(logo.jpg); width:x; height:y;"></h1>

Aber bitte mit ausgelagerten Styles ;-) und - selbstverständlich - dem Text. Für mich fällt es übrigens in die Schublade Best Practice[1], hochwichtige Textschnipsel (beispielsweise Überschriften oder auch die Links in der Hauptnavigation) in ein <span> zu kleiden; damit hättest Du noch zusätzliche Style-Möglichkeiten neben der von suit genannten Variante.

Cheatah

[1] Best Practice, die: etwas bewusst falsch machen, in dem Wissen, dass es langfristig für alle Beteiligten mehr Vor- als Nachteile hat.

[Florian Stascheck]

Hallo,

und er würde aber durch entsprechende CSS-Definitionen nicht angezeigt
werden, sondern statt dessen die Grafik darstellen.

Ich würde einfach sagen, folgendermaßen:

<h1 id="company">Firmenname</h1>

#company {  
    content : '';  
    height : 5em; /*ggf. Durch Bildbreite ersetzen*/  
    width : 20em;  
    background-image : url(logo.png);  
}

mfg, Flo

[ChrisB]

Hi,

#company {

content : '';
}

  
Welche Wirkung versprichst du dir von der Nutzung der content-Eigenschaft an dieser Stelle?  
  
Es hat keine - content wirkt nur in Verbindung mit :before/:after-Pseudoelementen.  
  
Wenn du den (Text-)Inhalt des Elements nicht darstellen willst, kannst du auch die Hoehe auf 0 und overflow auf hidden setzen - und das Hintergrundbild im padding darstellen lassen (Leahy-/Langridge-Methode auf der von suit verlinkten Uebersichtsseite; hat natuerlich auch die Schwachstelle CSS an/Bilder aus).  
  
MfG ChrisB  
  

-- 
„This is the author's opinion, not necessarily that of Starbucks.“

[Florian Stascheck]

Hallo,

Es hat keine - content wirkt nur in Verbindung mit :before/:after-Pseudoelementen.

Auch wenns blöd klingt, aber der IE machts trotzdem...
Ich würde diesen Fall abgesehen von der Frage, wieso nicht einfach das alt-Attribut setzen, entweder JS einsetzen oder noch ein zweites <h1> einsetzen, welches dann den Text hat und per display:none versteckt wird.

mfg, Flo

[Beat]

Es hat keine - content wirkt nur in Verbindung mit :before/:after-Pseudoelementen.

Auch wenns blöd klingt, aber der IE machts trotzdem...
Ich würde diesen Fall abgesehen von der Frage, wieso nicht einfach das alt-Attribut setzen, entweder JS einsetzen oder noch ein zweites <h1> einsetzen, welches dann den Text hat und per display:none versteckt wird.

display:none ist ungeschickt. Die meisten Screenreader werten CSS aus und wüürden bei display:none den Inhalt verbergen.
Statt dessen ist es besser mit text-indent oder mit Positionierung left:-999em zu arbeiten. Screenreader missachten solche Angaben eher.

Es ist extrem schwierig hier den bseten Kompromiss zu finden. Ich schlage vor, die erkundigst dich bei speziellen Betroffenengruppen, die ihre eigenen Foren haben:
http://www.rnib.org.uk/wacblog/

mfg Beat

[Gunnar Bittersmann]

@@Chris:

<h1><img src="..." width="" height="" alt=""></h1>

Mit richtigem Alternativtext, ja.

Oder alternativ das Logo per CSS als Hintergrundbild von h1

Der Sinn hinter CSS-Gefrickel erschließt sich mir nicht. Warum sollte man das 'img'-Element sparen wollen?

Wenn schon sparen, dann richtig: XHTML 2 sieht die vernünftige Syntax vor: <h1 src="http://example.com/logo">example dot com</h1>

Live long and prosper,
Gunnar