Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 20.01.2011, 22:32
DerStefan DerStefan ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.01.2011
Beiträge: 1
DerStefan befindet sich auf einem aufstrebenden Ast
Standard Scrollbarer, in der größe beschränkter Bereich in der Seitenmitte

Die Lektüre von FAQ, Hifletexten, etc. hat mir (bislang war ich ausschließlich für die Programmierung zuständig und die Grafikerin hat Skin/SCC/Themendateien geliefert) geholfen, einen Teil der Anforderung zu erfüllen, nämlich das ganze in der Höhe zu zentrieren.
Bei 4 Dingen stehe ich aber komplett an.

Ein Layout mit 3 Spalten sowie Kopf- und Fußzeile soll mittig ausgerichtet sein, eine Höhe von maximal 700px haben und eine Breite von max. 1000px.
Kopf- und Fußzeile sind je 50xp hoch
die linke und die rechte content-spalte 200px breit, die Höhe und Breite mittleren Content-Spalte ergibt sich durch vorhandene Breite - 400 bzw vorhandene Höhe minus 100.

So siehts derzeit aus:
--> http://sso.e-box.at/default.aspx

der Code dazu:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        html, body
        {
            height: 100%;
        }
        body
        {
            text-align: center; /* horizontal centering for IE Win quirks */
        }
        
        #distance
        {
            width: 1px;
            height: 50%;
            background-color: #fc6;
            margin-bottom: -13.75em; /* half of container's height */
            float: left;
        }      
        
        #inhalt
        {
            vertical-align: middle;
            position: relative;
            text-align: left;
            height: 27.5em;
            width: 45em;
            clear: left;
            text-align: center;
            max-height: 500px;
            width: 600px;
            background-color: #f5f5f5;
        }
        #top
        {
            position: absolute;
            height: 50px;
            width: 100%;
            text-align: left;
            padding: 0px;
            background-color: #ff2222;
        }
        #bottom
        {
            position: absolute;
            height: 50px;
            width: 100%;
            text-align: left;
            padding: 0px;
            bottom: 0px;
            background-color: #ff2222;
        }
        
        #left
        {
            position: absolute;
            height: 100%;
            width: 100px;
            text-align: left;
            top: 51px;
            bottom: 51px;
            padding: 0px;
            background-color: #22ff22;
        }
        #right
        {
            position: absolute;
            height: 100%;
            width: 100px;
            text-align: left;
            top: 51px;
            bottom: 51px;
            right: 0px;
            padding: 0px;
            background-color: #22ff22;
        }
        #content
        {
            position: absolute;
            text-align: left;
            top: 51px;
            bottom: 51px;
            right: 51px;
            bottom: 51px;
            min-width: 200px;
            max-width: 1000px;
            padding: 0px;
            background-color: #2222ff;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div id="distance">
    </div>
    <div id="inhalt">
        <div id="top">
            AAA</div>
        <div id="left">
            CCC<br />
            CCC<br />
            CCC<br />
            CCC<br />
            CCC</div>
        <div id="content">
             blablabla</div>
        <div id="right">
            EEE<br />
            EEE<br />
            EEE<br />
            EEE<br />
            EEE</div>
        <div id="bottom">
            BBB</div>
    </div>
</body>
</html>
Was ich nicht zusammenbringe ist
1.) dass der blaue Bereich zwischen den beiden grünen ist
2.) dass der grüne bereich nicht untern hinausrutscht. Ist zuviel INhalt da, muß dieser abgeschnitten werden.
3.) dass der blaue Content-Berech einen Scrollbar bekommt, wenn der Inhalt über die verfügbare Höhe hinausgeht, und nur dieser bereich gescrollt wird.
4.) dass der gesamte Bereich mittig ausgerichtet ist.

Vielen Dank für Input im Voraus.
Mit Zitat antworten
Sponsored Links