nicht angemeldet
Breite der Überschrift einschränken
Hoi!
Ich habe ein <div> in dem eine Überschrift steht (Rechtsbündig). Jetzt möchte ich, dass der Raum links von der Überschrift eine Hintergrundfarbe erhält (in der Farbe der Überschrift) und der Hintergrund unter der Überschrift weiß ist.
Wenn ich jetzt den div mit einer Hintergrundfarbe belege und die Überschrift auch, so wird der komplette div von der Überschrift überdeckt und es gibt keine andere Hintergrundfarbe als die der Überschrift.
Ist das einigermaßen verständlich gewesen? :)
Der HTML Code:
<div class="header"><h2>Herzlichen Glückwunsch</h2></div>
Das CSS:
h2 {
margin-top: 10px;
background-color: #FFFFFF;
}
.csc-header {
color: #d1e36e;
text-align: right;
margin-bottom: 10px;
background-color: #d1e36e;
}
Danke!
-
Die CSS Klasse heißt natürlich auch "header". Da ist mir ein kleiner Copy-Paste-Fehler unterlaufen
-
Die CSS Klasse heißt natürlich auch "header". Da ist mir ein kleiner Copy-Paste-Fehler unterlaufen
lass mich raten - du verwendest TYPO3 und bekommst diesen schwachsinnigen code von css_styled_content (csc) generiert ;)
float: right; oder display: inline; für das h2-element sollten dich deinem wunsch näher bringen
-
lass mich raten - du verwendest TYPO3 und bekommst diesen schwachsinnigen code von css_styled_content (csc) generiert ;)
Jep, so ist es. Wollte es der Einfachheit halber nicht so dumme Klassennamen dastehen lassen.
Funktioniert wunderbar! Vielen Dank!
Gruß
Fabian
-
-
-
Yerf!
Wenn ich jetzt den div mit einer Hintergrundfarbe belege und die Überschrift auch, so wird der komplette div von der Überschrift überdeckt und es gibt keine andere Hintergrundfarbe als die der Überschrift.
Ein Blockelement wie die Überschrift nimmt automatisch die volle zur Verfügung stehende Breite ein. Umgehen liese sich das z.B. mittels float:right für die Überschrift (anstelle des text-align am div). Möglicherweise musst du dann noch bei dem nachfolgenden Element den Fluss mittels clear:right wieder herstellen.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->