XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   teilweise fixiertes, teilweise liquides layout (http://xhtmlforum.de/showthread.php?t=63248)

Wlan-Kabel 14.12.2010 17:42

teilweise fixiertes, teilweise liquides layout
 
Hallöchen, ich habe ein, wohl altes Problem, wozu ich aber irgendwie keine befriedigende Lösung finde.
Es ist ein Problem (nicht das mit der sich anpassenden Höhe) was mit Tabellen theoretisch laufen müsste, mit Boxen aber mir nicht so laufen zu wollen scheint.
Die Höhe und Breite ist auf 100% festgelegt und soll auch nicht überschritten werden. Das Problem dabei ist, dass der Header und die Navi an der Seite feste Pixelangaben haben und der Inhalt soll durch overflow: auto halt größer sein können.
Aber vielleicht kann ich durch den code etwas besser vermitteln was ich will:

HTML-Code:

<?php
        session_start();
        include("data/config.php");
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
        <head>
                <meta name="DC.creator" content="T** K******" />
                <meta name="editor" content="Notepad++" />
                <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
               
                <title>Datei</title>
               
                <link rel="stylesheet" type="text/css" href="<?php echo $pf_data["style"];?>"/>
                <link rel="shortcut icon" type="image/x-icon" href="bilder/fav.ico" />
        </head>
        <body>
        <div id="body">
                        <div id="navicol">
                                <div id="navihead">
                                </div>
                        </div>
                        <div id="inhaltcol">
                                <div id="inhalthead">
                                </div>
                                <div id="inhalt">
                                </div>
                        </div>
        </div>
        </body>
</html>

Code:

body, html{
        font-family: Arial;
        padding: 0px;
        margin: 0px;
        height: 100%;
        width: 100%;
}
#navicol{
        float:left;
        height: 100%;
        width: 200px;
        background: #08f;
        border-right: 2px dashed #555;
}
#navihead, #inhalthead{
        background:#555;
        height: 150px;
}
#inhaltcol{
        height: 100%;
}
#inhalthead{
        border-bottom: 5px solid #08f;
}
#inhalt{
        overflow: auto;
}
#body{
        width:100%;
        height:100%;
        background: #eee;
}
#bodyrow1, #bodyrow2{
}
#head{
        background:#555;
        height: 150px;
        border-bottom: 4px solid #08f;
}
#navi{
        height: 100%;
        margin-top: -4;
        width: 200px;
        background: #08f;
        border-right: 1px solid #000;
}

So habe ich es bissher versucht, läuft aber nicht ganz so wie es soll, da ich dem Inhalt ja keine absolute höhe zuweisen kann (100% - 150px).

als Tabelle währe das warscheinlich kein problem, aber ich versuche es gar nicht erst, weil ich es einfach nicht schön finde, und wissen will, ob bzw. wie es auch anders geht.

Danke schonmal.


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:08 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023