Hintergrundbild einer versteckten Überschrift

Arachon` · #1 (**permalink**) 19.01.2006, 23:05

Halli hallo,

ich hab da ein kleines Problem mit dem Hintergrundbild einer Überschrift.

Code:

<div class="content">
    <h2>Add a Team</h2>
    ...
</div>

Das Stylesheet zur Überschrift sieht entprechend so aus:

Code:

.content h2 {
    background-image: url(http://www.ethernasports.de/gfx_layout/teams_add.jpg);
    width: 484px;
    height: 24px;
    background-repeat:no-repeat;
    visibility: hidden;
}

Wenn ich das soweit richtig verstanden hab, müsste

Code:

    visibility: hidden;

doch den Inhalt der <h2>-Tags verstecken, wärend

Code:

    background-image: url(http://www.ethernasports.de/gfx_layout/teams_add.jpg);

weiterhin das Hintergrundbild anzeigen müsste, oder ?

IChao · #2 (**permalink**) 20.01.2006, 11:18

Nein.

Zitat:

hidden
The generated box is invisible (fully transparent, nothing is drawn), but still affects layout.

(2.1 11.2)

Du kannst den Text per negativem text-indent zur Seite schleudern, was man für rollover nutzen kann.

kadees · #3 (**permalink**) 20.01.2006, 17:18

hi,

wenn ich Dein Problem richtig verstanden habe, willst du das Hintergrundbild als "Normalzustand", wenn kein CSS geladen wird, dann soll der Text erscheinen.

Wäre z.B. so lösbar:

CSS:

Code:

.invis {display: none;}

.content p.header2 {
    background-image: url(http://www.ethernasports.de/gfx_layout/teams_add.jpg);
    width: 484px;
    height: 24px;
    background-repeat:no-repeat;
}

HTML:

Code:

<div class="content">
    <h2 class="invis">Add a Team</h2>
    <p class="header2"> </p>
    ...
</div>

was's das?

dieter

Arachon` · #4 (**permalink**) 20.01.2006, 21:57

So. Erstma "Danke!" an euch beide (beide Lösungen funktionieren).

Mit einem

Code:

    margin: 0px;

bringen beide Varianten den gewünschten Effekt, wie kadees ihn auch schon beschrieben hat.

Ich hab jetzt allerdings die Variante von IChao genommen, da sie mir als die "sauberere" Lösung erscheint. Ich "schubse" lieber den Text von der Seite, als dass ich ein im Prinzip leeres Element zusätzlich erstelle, was (wenn mich nicht alles täuscht) dem Sinn von XHTML & CSS wiederspricht.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Darstellungsfehler Hintergrundbild Überschrift	Novastar	CSS	57	19.09.2010 17:10
Fehlendes(?) oder falsch positioniertes Hintergrundbild in IE6 und IE7	shredder01	CSS	4	28.11.2009 20:38
Repeat-y - Hintergrundbild nur nach unten wiederholen lassen	*pi	CSS	2	29.08.2008 13:42
Barrierefreiheit wirklich nötig?	jensr	Barrierefreiheit	128	06.11.2006 10:54
Problem: Überschrift <hx> innerhalb von Abschnitt <p>	Ares	CSS	7	24.10.2006 13:30