CSS DIVs anordnen mit statischen und dynamischen Elementen

bitmuncher

bitmuncher

Senior-Nerd
Ich brauch mal Unterstützung von 'nem CSS-Kundigen. Ziel ist es dieses Layout zusammenzubasteln:

layout.png


Abstand zwischen den Boxen soll bei 5px liegen. Da der Content scrollbar sein soll, ist mir als CSS-Laien nicht bekannt, ob's dafür einen Iframe braucht oder ob das via CSS umsetzbar ist. CSS wäre mir natürlich lieber.

Der Footer soll sich immer am unteren Browser-Rand befinden.

Das HTML dafür ist wie folgt angeplant:

Code: 
<head>
...
{SCRIPT}
</head>

<body>

  <div id="wrapper">

    <div id="mainnaviwrap">
      <div id="mainnavi">
	{MAINNAVI}
      </div>
    </div>

    <div id="subnaviwrap">
      <div id="subnavi">
	{SUBNAVI}
      </div>
    </div>

    <div id="headerwrap">
      <div id="header">
	{HEADER}
      </div>
    </div>

    <div id="newswrap">
      <div id="news">
	<center>{NEWS}</center>
      </div>
    </div>
    
    <div id="contentliquid">
      <div id="contentwrap">
	<div id="content">
	  {MAINCONTENT}
	</div>
      </div>
    </div>

    <div id="footerwrap">
      <div id="footer">
        <p>{FOOTER}</p>
      </div>
    </div>

  </div>

</body>

</html>

Die "wrap-Divs" sind für die Platzierung der Elemente gedacht. Die darin befindlichen Divs sind für das restliche Design (Fonts, Borders etc.). So zumindest die Planung. Wenn jemand bessere Ideen hat, immer her damit.

Ich brauche lediglich Hilfe beim CSS für die Anordnung der DIVs. Den Rest bekomme ich dann allein hin. Nur daran verzweifel ich gerade und poste meine ganzen Versuche besser nicht. Das wär sonst peinlich. :D
 
Habe die Wraps erstmal gelöscht, weil es quasi leere Divs sind und nichts gemacht haben, außer in Firebug das Debuggen zu stören und kognitiven Overhead verursachen. Dazu paar ID's umbenannt, um sie mit deiner Grafik zu "synchronisieren".

Der Code ist recht einfach gehalten, um links und rechts zwei Elemente zu platzieren, wird das linke div mit float:left,width:200px ausgestattet und das rechte div mit padding-left:200px, damit der Inhalt korrekt fließt.

Code: 
<html>
    <head>
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            #mainmenu {
                background-color: lime;
                height: 45px;
            }
            
            #zweitereihe {
                height: 150px;
            }    
            #submenu {
                float: left;
                width: 200px;
            }
            #header {
                padding-left: 200px;
            }

            #widgets {
                float: left;
                width: 200px;
            }
            #content {
                padding-left: 200px;
            }
            
            #footer {
                height: 35px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="mainmenu">{MAINMENU}</div>

        <div id="zweitereihe">
            <div id="submenu">
                {SUBMENU}
            </div>
            <div id="header">
                {HEADER}<br>
                {HEADER}<br>
                {HEADER}<br>
            </div>
            <!--<div style="clear: left"></div>-->
        </div>

        <div id="drittereihe">
            <div id="widgets">
                <center>{WIDGETS}</center>
            </div>

            <div id="content">
                {CONTENT}<br>
                {CONTENT}<br>
                {CONTENT}<br>
                {CONTENT}<br>
            </div>
            <!--<div style="clear: left"></div>-->
        </div>
        
        <div id="footer">
            <p>{FOOTER}</p>
        </div>
    </body>
</html>
https://jsfiddle.net/jw9bojqb/
 
Vielen Dank. Mit ein paar Modifikationen bin ich fast zum gewünschten Ergebnis bekommen. Die Einteilung in Zeilen macht es um einiges einfacher. CSS-seitig sieht es jetzt so aus:

Code: 
* {
    padding: 0;
    margin: 0;
}

#wrapper {
    width: 100%;
    min-height:100%;
    min-width: 800px;
    max-width: 2000px;
    margin: 0 auto;
    position: relative;
    padding:inherit;
    margin:inherit;
}

#mainnavi {
    height: 55px;
    height: 20px;
    border-radius: 10px;
    border: 1px solid #009933;
    margin: 5px;
}

#line2 {
    height: 220px;
}

#subnavi {
    height: 155px;
    float: left;
    width: 200px;
    border-radius: 10px;
    border: 1px solid #009933;
    margin-left: 5px;
    padding-left: 5px;
    padding-top: 5px;
}

#header {
    height: 160px;
    border-radius: 10px;
    border: 1px solid #009933;
    margin-left: 215px;
    margin-right: 5px;
    font-size: 2.5em;
}

#header img {
    height: 220px;
    width: 100%;
}

#widgets {
    float: left;
    width: 200px;
    border-radius: 10px;
    border: 1px solid #009933;
    margin-left: 5px;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

#content {
    border-radius: 10px;
    border: 1px solid #009933;
    margin-top: 5px;
    margin-left: 215px;
    margin-right: 5px;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
}

#footer {
    height: 35px;    
    min-width: 99%;
    margin: 5px;
    bottom: 0;
    position: relative;
    overflow: auto;
    border-radius: 10px;
    border: 1px solid #009933;
}

Das HTML dazu so:

Code: 
  <div id="wrapper">
    
    <div id="mainnavi">
      {MAINNAVI}
    </div>
    
    <div "line2">
      <div id="subnavi">
	{SUBNAVI}
      </div>
      
      <div id="header">
	{HEADER}
      </div>
    </div>
    
    <div id="line3">
      <div id="widgets">
	<center>{NEWS}</center>
      </div>
      
      <div id="content">
	{MAINCONTENT}
      </div>
    </div>
    
    <div id="footer">
      <p>{FOOTER}</p>
    </div>
    
  </div>

Mit deiner Variante saßen leider die Borders nicht korrekt, weswegen ich auf margin anstatt padding zurückgreifen musste. Nun bleibt aber immer noch das Problem, dass der Footer nach oben rutscht, sobald im Content- und/oder Widget-Bereich nicht genug Inhalte sind um das Browserfenster bis unten auszufüllen. Ich möchte daher, dass der Inhalt vom Content-Bereich scrollbar ist und der Footer immer ganz unten im Browser sitzt. Content- und Widget-Bereich sollen dabei immer den Platz bis zum Footer ausfüllen.

Die Größen habe ich nochmal etwas angepasst, da sie noch nicht optimal waren.
 
HTML: 
<style>
* {
    padding: 0;
    margin: 0;
}

#wrapper {
    width: 100%;
    min-height:100%;
    min-width: 800px;
    max-width: 2000px;
    margin: 0 auto;
    position: relative;
    padding:inherit;
    margin:inherit;
}

#mainnavi {
    height: 55px;
    height: 20px;
    border-radius: 10px;
    border: 1px solid #009933;
    margin: 5px;
}

#line2 {
    height: 220px;
}

#subnavi {
    height: 155px;
    float: left;
    width: 200px;
    border-radius: 10px;
    border: 1px solid #009933;
    margin-left: 5px;
    padding-left: 5px;
    padding-top: 5px;
}

#header {
    height: 160px;
    border-radius: 10px;
    border: 1px solid #009933;
    margin-left: 215px;
    margin-right: 5px;
    font-size: 2.5em;
}

#header img {
    height: 220px;
    width: 100%;
}

#widgets {
    float: left;
    width: 200px;
    border-radius: 10px;
    border: 1px solid #009933;
    margin-left: 5px;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

#content {
    border-radius: 10px;
    border: 1px solid #009933;
    margin-top: 5px;
    margin-left: 215px;
    margin-right: 5px;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
}

#footer {
    height: 35px;    
    min-width: 99%;
    margin: 5px;
    bottom: 0;
    left: 0;
    position: absolute;
    overflow: auto;
    border-radius: 10px;
    border: 1px solid #009933;
}

#line3 {
    padding-bottom: 35px; /* height of your footer */
}
body {
    height: 100%;
    position: relative;
}        
#wrapper {
    min-height:100%;
    position:relative;
}

</style>


<div id="wrapper">
    
    <div id="mainnavi">
      {MAINNAVI}
    </div>
    
    <div "line2">
      <div id="subnavi">
    {SUBNAVI}
      </div>
      
      <div id="header">
    {HEADER}
      </div>
    </div>
    
    <div id="line3">
      <div id="widgets">
    <center>{NEWS}</center>
      </div>
      
      <div id="content">
    {MAINCONTENT}
    
                <script>
                    function lines(n) {
                        tmp = "";
                        for (var i=0; i<n; i++)
                            tmp += "Line #" + i + "<br>";
                        document.getElementById("contentlines").innerHTML = tmp;
                    }
                </script>
                <button onclick="lines(10)">lines(10)</button>
                <button onclick="lines(100)">lines(100)</button>
                <div id="contentlines"></div>
    
      </div>
    </div>
    
    <div id="footer">
      <p>{FOOTER}</p>
    </div>
    
  </div>
Habe nur dein #footer angepasst und die CSS-Regeln darunter.

Mit zwei Buttons, um ein bisschen Inhalt zu generieren, gut zum Testen. Fehlt noch ein bisschen Pixel-Anpassung, weil der Footer border-bottom direkt unten aufliegt. Der Border vom {MAINCONTENT} skaliert nicht bis zum Footer, dass geht IMO auch nicht cross-browser, weil man die Höhe wahrscheinlich mit calc(100% - pixel von footer+header+line2) berechnen müsste.

Die Idee stammt von hier: CSSReset.com - Demo - How To Keep Footer At Bottom of Page
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben