Background-Image einer Überschrift nicht vollständig zu sehen
Vincent A.
- css
1 Gunnar Bittersmann
0 LX0 Vincent A.0 ChrisB
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
@@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'
Hi, Vincent!
Gib der Klasse .image01 doch mal display: block mit, das dürfte helfen.
Gruß, LX
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 :)
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