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

SELF-Forum

Zentriertes, 100% hohes DIV mit Hintergrundbildern und DIVs

Matze
– Informationen zu den Bewertungsregeln

Hallo

Das Thema ist schon so alt wie CSS, aber nichts, was ich im Internet hierzu habe finden können, funktioniert bei mir richtig. Wo mache ich einen Fehler?

Ich möchte die folgende Seite bauen:

Hinweise:
1. Der gelbe "Rand" soll sich links und rechts bis zum Bildschirmrand erstrecken
2. Wir reden hier also über ein Hintergrundbild, das (wohl im body-tag) per repeat-x wiederholt angezeigt wird.
3. Der eigentliche Inhalt soll in der zentrierten Spalte stehen
4. Diese Spalte muss immer 100% Höhe haben, wobei auch dessen Hintergrund dargestellt werden muss. (Derzeit ist das ein GIF mit 1 Pixel Höhe und 861 Pixel Breite, das per repeat-y die gesamte content-area ausfüllt)

Aber es gelingt mir nie, diese Aufgabe cross-browser-kompatibel umzusetzen. Hier mein Code:

  
<!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="wrapper" align="center">  
            <div id="center-column">  
                <div id="banner">  
                </div>  
                <div id="menu"> Hier kommt ein Menü hin  
                </div>  
                <div id="content"> Hier kommen ganz tolle Inhalte hin  
                </div>  
            </div>  
        </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);  
}  
  
#wrapper {  
    height:100%;  
}  
  
#center-column {  
    height:100%;  
    background-image:url(../images/body_fill.gif);  
    background-repeat:repeat-y;  
}  
  
#banner {  
    width:861px;  
    height:278px;  
    background-image:url(../images/banner.jpg);  
}  
  
#menu {  
    width:861px;  
    height:26px;  
    background-image:url(../images/menu_fill.gif);  
    background-repeat:repeat-x;  
    text-align:left;  
    color:white;  
}  
  
#content {  
    width:861px;  
    min-height:700px;  
    background-image:url(../images/body_ background.gif);  
    background-repeat:no-repeat;  
    padding:75px;  
    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;  
}

Bei mir sieht diese Nummer nun so aus:

Ich habe schon diverse Tips aus dem www ausprobiert - aber nichts funktioniert wirklich. Ich wäre Euch wirklich extrem dankbar, wenn Ihr mir dabei helfen könntet.

Wenn ihr mit o.g. Code etwas spielen möchtet, findet ihr hier die zugehörigen images:

Die Images

Ganz herzlichen Dank

Matze

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Zentriertes, 100% hohes DIV mit Hintergrundbildern und DIVs

    Marc Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Matze,

    mach es Dir doch nicht so kompliziert. Unterstützt du eigentlich den IE>=6

    Sonst reicht das hier:

      
  
<!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>  
    </body>  
</html>  


      
#bvanner, #menu, #content {  
    margin: 0 auto;  
}

    Warum überhaupt Transitional?

    Viele Grüße,
    Marc.

    --
    Und immer schön
    validieren (http://validator.w3.org/)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. 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

      1. Zentriertes, 100% hohes DIV mit Hintergrundbildern und DIVs

        Marc Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo Matze,

        danke für die superschnelle Antwort.

        Dafür hat es diesmal umso länger gedauert... :-(

        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.

        Wenn das Hintergrund-Bild nciht sichtbar ist, wird irgendetwas falsch sein - Dein CSS scheint mir richtig zu sein - stimmen die Pfade? Groß-Kleinschreibung?

        Kann ich mir das mal irgendwo "live" ansehen? - Statt der Bilder hättest Du lieber den Code zum DL angeboten... ;-)

        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.

        Wenn Du zwei Hintergrund-Bilder benutzen willst, brauchst Du zwei Elemente. Das heißt du brauchst ein contentWrap und ein content oder so - gib dem inneren Element das ein Pixel hohe image mit und gib an:

          
min-height:700px;  
background-position:left 700px;  
background-repeat:repeat-y;

        Für das Äußere div (z. B. #contentWrap) gibst du das 700 px hohe Bild als Hintergrund an, aber keine Höhe.

        Paddings werden horizontal addiert! Wenn Dein div so breit ist wie die anderen, bekommt es links und rechts ein padding hinzugefügt (nicht abgezogen!) - es sei denn du hast den IE in den Quirks-Modus geschickt.

        Installier dir mal den Firebug für den Firefox und guck dir die Dimensionen der einzelnen DIVs an...

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

        Dann mach doch STRICT - Transitional braucht man eigentlich nur für iFrames und target...

        Herzlichen Dank!

        Gerne! - Ich hoffe, es wirkt. :-)

        Viele Grüße,
        Marc.

        --
        Und immer schön
        validieren (http://validator.w3.org/)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. Zentriertes, 100% hohes DIV mit Hintergrundbildern und DIVs

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Matze:

    nuqneH

    Wo mache ich einen Fehler?

    Du verwendest Flaggen für Sprachen. Zum einen ist das unpassend (oft genug hier diskutiert), zum anderen passen die bunten Farbkleckse nicht du den Farbtönen der Seite.

    Beschrifte die Links zu anderssprachigen Seiten mit der Zielsprache in der Zielsprache: „deutsch“, „English“, „русский“, …

    1. Diese Spalte muss immer 100% Höhe haben, wobei auch dessen Hintergrund dargestellt werden muss. (Derzeit ist das ein GIF mit 1 Pixel Höhe und 861 Pixel Breite, das per repeat-y die gesamte content-area ausfüllt)

    Das sollte höher sein als 1 Pixel, damit es nicht so oft wiederholt werden muss. ↗Pixelgröße für kachelbare Hintergrundgrafik

    Qapla'

    --
    Volumen einer Pizza mit Radius z und Dicke a: pi z z a
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln