CSS Layout

ovbb · 29.08.2011

So jetzt steh ich mal wieder am Schlauch und finde gerade keine Lösung :-/

Mein Ziel ist es ein CSS-Layout zu erstellen mit 100% Höhe wo links eine Navileiste (100% Höhe) und im Content rechts daneben ein Balken oben und unten fix angeordnet wird.

Jegliche Positionierung hat irgendwie nicht richtig hin gehauen.

code ist asp.net deswegen auch der form-tag

HTML:

<body>
    <form id="form1" runat="server">
    <div id="wrapper">
        <div id="navigation">
        
        </div>
        <div id="topbar"></div>
        <div id="maincontent">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div id="bottombar"></div>
    </div>
    </form>
</body>

meine css-datei dazu in der natürlich ein Fehler drinnen ist :-(
hat irgendwie mit den 100% Höhe im maincontent zu tun?!

HTML:

/*
 * CLEAR ALL
 ****************************************/

*
{
    padding: 0;
    margin: 0;
    outline: none;
}

/*
 * MAIN SETTINGS
 ****************************************/
 
html, body, form
{
    height: 100%;
    margin: 0px;
    padding: 0px;
}
body
{
    font: 12px Tahoma;
    background-color:Gray;
    color: #333;
}
#wrapper 
{
    height:100%;
}

#navigation 
{
    background-color: #6380af;
    width:200px;
    height:100%;
    float:left;

}
#topbar 
{
    background-color:#becad1;
    height: 30px;
}
#bottombar
{
    background-color:#FF0000;
    height: 30px;
}
#maincontent 
{
    height:100%;
    overflow:auto;
    background-color:Gray;
}

danke im voraus

sokie · 29.08.2011

AW: CSS Layout

ovbb schrieb:
hat irgendwie mit den 100% Höhe im maincontent zu tun?!

ja klar. durch die 100% ist die Höhe schon voll ausgefüllt, sodass weitere Elemente (topbar, bottombar) einen overflow erzeugen.
eine Lösung könnte so aussehen, dass man das durch negatives Margin wieder ausgleicht, allerdings muss man dann die Stapelreihenfolge (z-index) beachten.
zb

Code:

/*
 * CLEAR ALL
 ****************************************/

*
{
    padding: 0;
    margin: 0;
    outline: none;
}

/*
 * MAIN SETTINGS
 ****************************************/
 
html, body, form
{
    height: 100%;
    margin: 0px;
    padding: 0px;
}
body
{
    font: 12px Tahoma;
    background-color:Gray;
    color: #333;
}
#wrapper 
{
    height:100%;
}

#navigation 
{
    background-color: #6380af;
    width:200px;
    height:100%;
    float:left;

}
#topbar 
{
    background-color:#becad1;
    height: 30px;
     position: relative;
     z-index: 2;
}
#bottombar
{
    background-color:#FF0000;
    height: 30px;
     margin: -30px 0 0 0;
     position: relative;
     z-index: 2;
}
#maincontent 
{
    height:100%;
    overflow:auto;
    background-color:Gray;
     margin: -30px 0 0 0;
     position: relative;
     z-index: 1;
}

ovbb · 29.08.2011

AW: CSS Layout

Danke dir ... daran mit negativen margins zu arbeiten hab ich überhaupt nimmer gedacht.

hab jetzt noch die navi nach vorne gebracht und nun sieht es so aus wie ich es haben wollte ... ist zwar nicht schön aber was macht man nicht alles wenn jemand es so haben will :-(