Matze: Zentriertes, 100% hohes DIV mit Hintergrundbildern und DIVs

Beitrag lesen

SELF-Forum

Zentriertes, 100% hohes DIV mit Hintergrundbildern und DIVs

Matze
– Informationen zu den Bewertungsregeln

Hi Marc,

danke für die superschnelle Antwort. Wenn ich das so versuche, sieht die Nummer bei mir so aus:

Es ist zwar alles zentriert, aber das Hintergrundbild der content-area ist nicht sichtbar und das PADDING wird links nicht berücksichtigt.

Der Content-Bereich ist auch ein wenig kompliziert: Zunächst soll dort ein Hintergrundbild von 700px Höhe abgebildet werden. Sind Bildschirm oder abzubildender Content länger, soll sich daran ein per repeat-y wiederholtes 1px hohes Hintergrundbild anschließen.

Gemäß Deinem Vorschlag sieht mein Code nun so aus:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<html>  
    <head>  
        <title>Gospeltribe</title>  
        <link rel="stylesheet" href="./css/template.css" type="text/css">  
    </head>  
  
    <body>  
        <div id="banner">  
        </div>  
        <div id="menu"> Hier kommt ein Menü hin  
        </div>  
        <div id="content"> Hier kommen ganz tolle Inhalte hin  
        </div>  
        <div id="footer"> Hier kommen weitere tolle Sachen hin  
        </div>  
    </body>  
</html>  


  
html, body {  
    margin: 0;  
    padding: 0;  
    height: 100%;  
    text-align: left;  
    background-image:url(../images/background.jpg);  
}  
  
#banner {  
    width:861px;  
    height:278px;  
    background-image:url(../images/banner.jpg);  
    margin: 0 auto;  
}  
  
#menu {  
    width:861px;  
    height:26px;  
    background-image:url(../images/menu_fill.gif);  
    background-repeat:repeat-x;  
    margin: 0 auto;  
    text-align:left;  
    color:white;  
}  
  
#content {  
    width:861px;  
    min-height:700px;  
    background-image:url(../images/body_ background.gif);  
    background-repeat:no-repeat;  
    padding:75px;  
    margin: 0 auto;  
    text-align:left;  
}  
  
#footer {  
    width:100%;  
    height:26px;  
    position:fixed;  
    bottom:0px;  
    background-image:url(../images/menu_fill.gif);  
    background-repeat:repeat-x;  
    color:white;  
}

Wie oben gezeigt, haut das Ergebnis aber noch nicht so ganz hin. Hast Du einen Vorschlag, wie man das Background-Image-Problem in den Griff kriegen kann?

TRANSITIONAL ist übrigens nicht zwingend erforderlich. Sehr alte Browser müssen auch nicht unterstützt werden.

Herzlichen Dank!

Matze

Beitrag melden
–
Informationen zu den Bewertungsregeln