Manuelw: Div Schatten wird nicht angezeigt

SELF-Forum

Div Schatten wird nicht angezeigt

Manuelw
– Informationen zu den Bewertungsregeln

Hallo!

Ich experimentiere seit einiger Zeit mit Div Schatten und CSS Layouts herum.

Ich möchte um meine Website herum einen Schatten machen und habe deswegen drei  "Schatten- Grafiken" erstellt. Diese nennen sich "Top.png", "Content.png" und "Bottom.png".

Zuerst habe ich nur einmal mit der "Top" Grafik gearbeitet.

Dafür habe ich folgendes in meine Stylesheet Datei geschrieben:

  
#top {  
      background: url(top.png);  
      background-position: center;  
      background-repeat: no-repeat;  
}

danach habe ich folgendes in mein Html Dokument geschrieben:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Unbenanntes Dokument</title>  
<link rel="stylesheet" type="text/css" href="stylesheet.css" />  
</head>  
<div id="top"></div>  
<body>  
</body>  
</html>

Bei diesem Code habe ich jetzt aber das Problem, dass die "Top.png" Grafik nicht angezeigt wird.

Ich bin drauf gekommen, dass die Grafik nur dann erscheint, wenn ich in die Div Box einen Text hineinschreibe.
In meinem Fall sollte aber dieser Teil auf meiner Website leer sein.

Kann mir hierbei vielleicht jemand weiterhelfen?

Liebe Grüße,
Manuel

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Div Schatten wird nicht angezeigt

    Der Martin
    +2 Informationen zu den Bewertungsregeln

    Hi,

    »» #top {  

>       background: url(top.png);  
>       background-position: center;  
>       background-repeat: no-repeat;  
> }

    Größe und Position bzw. Positions-Eigenschaften des Elements #top werden also nicht angetastet.

    »» <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

> <html xmlns="http://www.w3.org/1999/xhtml">  
> <head>  
> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
> <title>Unbenanntes Dokument</title>  
> <link rel="stylesheet" type="text/css" href="stylesheet.css" />  
> </head>  
> <div id="top"></div>  
> <body>  
> </body>  
> </html>

    Möchtest du das div-Element nicht lieber innerhalb des body setzen? Im Niemandsland zwischen head und body fühlt es sich ausgesprochen unwohl.

    Bei diesem Code habe ich jetzt aber das Problem, dass die "Top.png" Grafik nicht angezeigt wird.

    Natürlich. Sie ist ja auch nur als Hintergrundgrafik definiert, das Element, zu dem sie gehört, hat aber die Höhe 0, weil es leer ist.

    Ich bin drauf gekommen, dass die Grafik nur dann erscheint, wenn ich in die Div Box einen Text hineinschreibe.

    Ja, dann hat das div auch eine Höhe >0.

    In meinem Fall sollte aber dieser Teil auf meiner Website leer sein.

    Dann wirst du eine Höhe (oder eine Mindesthöhe) per CSS vorgeben müssen.

    Ciao,
     Martin

    --
    "Drogen machen gleichgültig."
     - "Na und? Mir doch egal."
    Beitrag melden
    +2
    Informationen zu den Bewertungsregeln