Vincent A.: Background-Image einer Überschrift nicht vollständig zu sehen

Hallo,
Ich bin gerade dabei eine kleine Seite zu entwerfen und möchte dabei die Überschriften durch ein Hintergrundbild ein wenig schöner gestalten.

Das ganze soll dann so aussehen wenn es fertig ist:

Immoment sieht es nur leider wie folgt aus:

Ich habe zwar eine feste Höhe angegeben für das background-image der klasse, jedoch wird es einfach nicht komplett dargestellt.
Eine min-height zu definieren hilft leider auch nicht; ich bin langsam wirklich ratlos.
Hat hier vielleicht jemand eine Idee?

Hier noch der dazugehöroge Quelltext:

HTML:~~~html

<div id="01ferienhaus">
   <a class="image01" href="images/01_image2.jpg"><span class="hidden">Das Ferienhaus</span></a>
   <span class="headline01">Das Ferienhaus</span>

<p>Neues, hochwertig und komfortabel eingerichtetes Ferienhaus bis 7 Personen.
   [...]
</div>

  
CSS:~~~css
  
.headline01 {  
font-weight: bold;  
color: #2e98de;  
background-image: url(images/01_head.jpg);  
background-repeat: no-repeat;  
width: 606px;  
height: 41px;  
}  
  
.hidden {  
display: none ;  
}  
  
.image01 {  
float: right;  
background-image: url(images/01_image1.jpg);  
width: 261px;  
height: 213px;  
}  
  

Liebe Grüße
Vincent

  1. @@Vincent A.:

    nuqneH

    <div id="01ferienhaus">

    Fehler. [in: HTML4 §6.2]

    <a class="image01" href="images/01_image2.jpg"><span class="hidden">Das Ferienhaus</span></a>

    Weder der Sinn des 'a'-Elements noch der des 'span'-Elements ist klar.

    Es ist wohl unsinnig, das Bild zu verlinken, nicht aber den Text.

    <span class="headline01">Das Ferienhaus</span>

    Wenn du eine Überschrift möchtest, möchtest du eine Überschrift.

    .headline01 {
    --8<--
    width: 606px;
    height: 41px;
    }

    Weder 'width' noch 'height' wirken bei nicht-ersetzten Inline-Elementen. [CSS2 §10.2, §10.5]

    Qapla'

    --
    Volumen einer Pizza mit Radius z und Dicke a: pi z z a
  2. Hi, Vincent!

    Gib der Klasse .image01 doch mal display: block mit, das dürfte helfen.

    Gruß, LX

    --
    RFC 1925, Satz 6a: Es ist immer möglich, einen weiteren Umweg einzufügen.
    RFC 1925, Satz 11a: Siehe Regel 6a
    1. Hi, Vincent!

      Gib der Klasse .image01 doch mal display: block mit, das dürfte helfen.

      Gruß, LX

      Hallo,
      der Befehl hat perfekt geholfen..vielen vielen Dank :)

      1. Hi,

        Gib der Klasse .image01 doch mal display: block mit, das dürfte helfen.

        der Befehl hat perfekt geholfen..

        Das ist weder ein „Befehl“, noch ist es perfekt.

        Zeichne zuerst mal die Überschrift vernünftig aus, wie Gunnar schon sagte.

        MfG ChrisB

        --
        “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]