nafetS: DIV-Container auto-breite bzw auto-höhe, aber wie?

SELF-Forum

DIV-Container auto-breite bzw auto-höhe, aber wie?

nafetS
– Informationen zu den Bewertungsregeln

Hallo alle zusammen,

mittlerweile hab ich meine HP auf DIV-Container umgestellt. Das ausrichten, Anzeigen etc. macht mir keine Probleme.Wie es Grafisch aussehen soll und den gekürzten Quelltext dazu habe ich weiter unten stehen.

Probs bzw. weiter kommte ich nicht mit den Boxen 4 und 8. Box 4 enthält eine Grafik die entsprechend der BrowserHÖHE nach unten gekachelt werden soll. Box8 macht mir den gleichen Ärger. Nur soll hier im Browserfenster eine Grafik nach rechts gekachelt werden.

Wie man sieht hab ich es u.a. mit einem AUTO-Wert versucht, aber keinen Erfolg erzielt.

Kann mir jemand weiterhelfen???

<div>     <div>                    <div>
|-------| |----------------------| |-----------|
| Box1  | |    box5              | | box8      |
|-------| |----------------------| |-----------|
</div>    </div>                   </div>

<div>     <div>
|-------| |----------------------|
| Box2  | |    box6              |
|-------| |----------------------|
</div>    </div>

<div>     <div>
|-------| |----------------------|
| Box3  | |                      |
|       | | box7                 |
|-------| |                      |
</div>    |                      |
          |                      |
<div>     |                      |
|-------| |                      |
| box4  | |                      |
|-------| |----------------------|
</div|    </div>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>&nbsp;</title>
<style type="text/css">
#box1 { position:absolute; top:0px; left:0px; width:199px; height:73px;}
#box2 { position:absolute; top:73px; left:0px; width:199px; height:12px;}
#box3 { position:absolute; top:85px; left:0px; width:199px; height:309px;}
#box4 { position:absolute; top:394px; left:0px; width:199px; height:auto;}
#box5 { position:absolute; top:0px; left:199px; width:400px; height:73px;}
#box6 { position:absolute; top:73px; left:199px; width:400px; height:12px;}
#box7 { position:absolute; top:85px; left:199px; width:400px; height:500px;}
#box8 { position:absolute; top:0px; left:599px; width:auto; height:73px;}
</style>
<style type="text/css">
.div4 {
 background-image: url(../templates/test/images/3.gif);
 background-repeat:repeat-y;
 background-position: 0 0;
}

.div8 {
 background-image: url(../templates/test/images/4.gif);
 background-repeat:repeat-x;
 background-position: 0 0;
}
</style>
</head>

<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

<div id="box1" class="div1"><img src="../templates/test/images/logo.gif" alt="Fachverband für Systemische Beratung" height="50" width="199"></div>
<div id="box2" class="div2">&nbsp;</div>
<div id="box3" class="div3"><?php mosLoadModules ( 'left' ); ?></div>
<div id="box4" class="div4">&nbsp;</div>
<div id="box5" class="div5"><img src="../templates/test/images/schriftzug.gif" width="399" height="40" /></div>
<div id="box6"><span class="pathway"><?php include "pathway.php"; ?></span></div>
<div id="box7"><span class="pathway"><br><?php include ("mainbody.php"); ?></span> <span class="pathway"> </span> </div>
</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. DIV-Container auto-breite bzw auto-höhe, aber wie?

    wahsaga Homepage des Autors
    – Informationen zu den Bewertungsregeln

    hi,

    <div>     <div>                    <div>
    |-------| |----------------------| |-----------|
    | Box1  | |    box5              | | box8      |
    |-------| |----------------------| |-----------|
    </div>    </div>                   </div>

    <div>     <div>
    |-------| |----------------------|
    | Box2  | |    box6              |
    |-------| |----------------------|
    </div>    </div>

    <div>     <div>
    |-------| |----------------------|
    | Box3  | |                      |
    |       | | box7                 |
    |-------| |                      |
    </div>    |                      |
              |                      |
    <div>     |                      |
    |-------| |                      |
    | box4  | |                      |
    |-------| |----------------------|
    </div|    </div>

    Der Anblick eines solch vergleichsweise komplexen Layoutwunsches lässt mich eigentlich erwarten, dass da jemand eine Grundahnung vom Layouten mit CSS haben sollte - aber wenn ich dann sehe, dass das alles nur über absolute Positionierung erzielt werden soll, bekomme ich da wieder Zweifel.

    Probs bzw. weiter kommte ich nicht mit den Boxen 4 und 8. Box 4 enthält eine Grafik die entsprechend der BrowserHÖHE nach unten gekachelt werden soll.

    In guten Browsern könntest du die Höhe dieser Box bestimmen, in dem du jeweils für top und bottom eine Angabe machst.
    Im IE nicht, da dürfte es sich vermutlich nur durch ein Hintergrundbild für body (o.ä.) realisieren lassen.

    Box8 macht mir den gleichen Ärger. Nur soll hier im Browserfenster eine Grafik nach rechts gekachelt werden.

    Gleiches wie oben, left und right angeben.

    Wenn du das Layout mittels floatender Bereiche erstellt hättest, könntest du hier auch einfach die Box 8 gar nicht floaten lassen, so dass sie in der Breite den restlichen Platz einnähme.

    Kann mir jemand weiterhelfen???

    Zuerst solltest du mal von der absoluten Positionierung wegkommen - damit wird dir nämlich dein komplettes Layout um die Ohren fliegen, wenn der Viewport nicht so groß sein sollte, wie du ihn gerne hättest.

    http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout und
    http://de.selfhtml.org/css/layouts/mehrspaltige.htm
    wären da meine ersten Lesetipps.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln