Zur Navigation

einem div - h1 und alt-text zuweisen

1 Gustafsson

moin,

wie muss es aussehen, wenn ich einem div den h1 tag und alttext zuweisen möchte?

<div id="header"></div>

#header { margin:auto; width: 780px; height: 120px; margin-top: 0px; margin-bottom: 0px; background-image:url(firmeneintrag-kostenlos/header-01.jpg); }

danke und gruß uwe

19.01.2006 09:47

2 Jörg

Hallo Uwe,

die Überschrift h1 fügst du zwischen <div> und </div> ein:


<div id="header">
<h1>Überschrift</h1>
</div>

... also eine ganz normale Verschachtelung von HTML-Elementen - oder meintest du mit "Zuweisung" etwas anderes?

Ein Alt Attribut kann einem img Element zugewiesen werden, nicht aber einem Hintergrundbild. Du könntest stattdessen aber das title-Attribut für das entsprechende div verwenden:


<div id="header" title="Alternativer Text für das Hintergrundbild">
<h1>Überschrift</h1>
</div>

19.01.2006 10:03

3 Gustafsson

danke dir. dann ginge es also auch so

<h1><div id="header" title="Alternativer Text für das Hintergrundbild"><p class="headertext">überschrift innerhalb der headergrafik</p></div></h1>

ich möchte aber nicht spammen, daher mache ich mir gedanken, weil ja die eigentliche überschrift dieses projekts nicht aus dem geschriebenen wort besteht, sondern aus einer grafik

19.01.2006 10:10

4 Jörg

Diese Verschachtelung h1 > div > p halte ich nich für sinnvoll. Im Grunde genommen benötigst du ja nur ein Element, wenn im Header nichts anderes steht als die Überschrift, da kannst du auch auf das div verzichten:


<h1 title="Alternativer Text für das Hintergrundbild">überschrift innerhalb der headergrafik</h1>

... und im CSS-Teil:


h1 { margin:auto; width: 780px; height: 120px; margin-top: 0px; margin-bottom: 0px; background-image:url(firmeneintrag-kostenlos/header-01.jpg); }

Die Überschrift hat dann sozusagen das Bild, welches die Überschrift zum Ausdruck bringt als Hintergrund. Das title-Attribut würe ich dann aber nur einsetzen, wenn es sich vom Text innerhalb h1 unterscheidet.

19.01.2006 10:27 | geändert: 19.01.2006 10:31

5 Gustafsson

ja klar, aber im css ist "überschrift innerhalb der headergrafik" nachfolgend formatiert, bzw. so sollte es sein...

.headertext { color:#603E2D; text-align:left; font-family:verdana; font-size:9px; margin-left:15px; margin-top: 5px;}

nu ist aber die formatierung weg ???

19.01.2006 10:54

6 Jörg

Das packst du stattdessen mit in die Definitionen für h1 rein, wobei das margin von .headertext einem padding in h1 entspricht:


h1 { margin:auto; width: 780px; height: 120px; margin-top: 0px; margin-bottom: 0px; background-image:url(firmeneintrag-kostenlos/header-01.jpg); color:#603E2D; text-align:left; font-family:verdana; font-size:9px; padding-left:15px; padding-top: 5px; }

Teste mal, ob das in den verschiedenen Browsern mit den Abständen so hinkommt

19.01.2006 11:01 | geändert: 19.01.2006 11:03

7 Gustafsson

hab ich schon versucht jörg, aber dann verschiebt es die gesammte grafik... ich denke das liegt an der zuweisung - padding-left:15px; padding-top: 5px; - für den text ??

19.01.2006 11:06

8 Gustafsson

dann könnte es doch auch so gehen:

<h1 title="Alternativer Text für das Hintergrundbild"><p class="headertext">überschrift innerhalb der headergrafik</p></h1>

.headertext { color:#603E2D; text-align:left; font-family:verdana; font-size:9px; margin-left:15px; margin-top: 5px; font-weight: normal;}

19.01.2006 11:21

9 Jörg

Ja, hast recht, die 15px für den linken Innenabstand müssen von der Breite wieder abgezogen werden:


h1 { margin:auto; width: 775px; height: 120px; margin-top: 0px; margin-bottom: 0px; background-image:url(irmeneintrag-kostenlos/header-01.jpg); color:#603E2D; text-align:left; font-family:verdana; font-size:9px; padding-left:15px; padding-top: 5px; }

Wichtig ist dabei noch, dass das HTML Dokument ganz am Anfang eine Doctype Angabe hat, zumindest für HTML 4.01 transitional:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Funktioniert es dann (in Firefox und IE)?

19.01.2006 11:22

10 Jörg

h1 > p würde ich auf keinen Fall verschachteln, das ist kein korrektes HTML - eine Überschrift kann keinen Absatz enthalten; da besser div > h1 verschachteln, falls meine obige Lösung nicht funktioniert.

19.01.2006 11:27 | geändert: 19.01.2006 11:27