Anmelden

Archiv verlassen und diese Seite im Standarddesign anzeigen : Versuch eines 2-Spalten Layouts



Whiz-zarD
27.11.2011, 11:36
Moin,

so allmählich verfluche ich die Welt der Webentwicklung ...

Ich versuche grad ein (IMO) simples 2-Spalten Layout zu entwerfen.
Hier mal eine kleine Skizze:

11357

Allerdings scheitere ich ich daran, dass #content und #navi sich immer an den größeren anpassen sollen.
Also sie sollen später immer gleich groß sein.

Hat da wer vielleicht eine Idee, wie man dies so umsetzen kann?

nudelsalat
27.11.2011, 11:57
Hab aus interesse an der Problemstellung mal das hier zusammengeschustert:

<html>
<head>

<style type="text/css">
body{
margin: 0;
padding: 0;
}

div#header{
position:absolute;
left: 0%;
width: 100%;
top: 0%;
height: 100px;
background-color: rgb(100,100,255);
}

div#navi{
position:absolute;
left: 0%;
width: 300px;
top: 100px;
height: 80%;
background-color: rgb(100,255,100);
}

div#content{
position:absolute;
left: 300px;
width: -moz-calc(100% - 300px);
top: 100px;
height: 80%;
background-color: rgb(255,100,100);
overflow: auto;
}

div#footer{
position:absolute;
left: 0%;
top: -moz-calc(80% + 100px);
width: 100%;
height: -moz-calc(20% - 100px);
background-color: rgb(255,255,100);
}

</style>

</head>


<body>


<div id="header">
header
</div>

<div id="navi">
navi
</div>

<div id="content">
content
</div>

<div id="footer">
footer
</div>

</body>
</html>

Mit dem css3 feature calc bzw. -moz-calc geht das ganze recht einfach. Funktioniert jetzt wegen -moz-calc nur im firefox.


so allmählich verfluche ich die Welt der Webentwicklung ...
Detto. Html und insbesondere div Layouts sind doch echt grauenhaft.

edit:
overflow: auto; zu #content hinzugefügt. Sonst läuft der Inhalt bei Übergröße unter dem Footer weiter.

Whiz-zarD
27.11.2011, 12:08
Schon mal danke für die Antwort.



Mit dem css3 feature calc bzw. -moz-calc geht das ganze recht einfach. Funktioniert jetzt wegen -moz-calc nur im firefox.

Und da haben wir auch schon das Problem, da die Seite auf beliebigen Browsern dargestellt werden soll.
Bei CSS3 gibt es ja anscheinend bis jetzt nur einzelne Insellösungen.

Xardas der Dunkle
27.11.2011, 12:13
edit:
overflow: auto; zu #content hinzugefügt. Sonst läuft der Inhalt bei Übergröße unter dem Footer weiter.

Dann kann man es auch gleich anders machen ohne komische CSS-3 Features.


#header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 300px;
}

#navi {
position: absolute;
top: 300px;
bottom: 300px;
left: 0;
width: 400px;
overflow: auto;
}

#content {
position: absolute;
top: 300px;
bottom: 300px;
left: 400px;
right: 0;
overflow: auto;
}

#footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 300px;
}


Allerdings glaube ich das Whiz-zarD nicht unbedingt möchte das der footer immer am unteren Bildschirm Rand steht.
In dem Fall geht es einfach nicht das die DIVs immer gleich hoch sind. Hier hilft nur die navi und den content in ein div zupacken und diesem ein Hintergrundbild zu geben, welches die Hintergrundfarbe eben bis nach unten durchzieht:

Einfachheit halber mal mit inline-css:

<div id="content" style="background: ...;">
<div id="navi" style="float: left; width: 300px;"></div>
<div id="content_main" style="float: left; width: 500px;"></div>
<div style="clear: both;"></div>
</div>

Whiz-zarD
27.11.2011, 12:52
Allerdings glaube ich das Whiz-zarD nicht unbedingt möchte das der footer immer am unteren Bildschirm Rand steht.
Das ist mir eigentlich egal. Wenns leichter ist, den Footer nach unten zu verfrachten, damit die beiden anderen gleich groß ist, soll es mir recht sein.
Mir ist nur wichtig, dass beiden Divs die selbe Größe aufweisen.



In dem Fall geht es einfach nicht das die DIVs immer gleich hoch sind. Hier hilft nur die navi und den content in ein div zupacken und diesem ein Hintergrundbild zu geben, welches die Hintergrundfarbe eben bis nach unten durchzieht:

Einfachheit halber mal mit inline-css:

<div id="content" style="background: ...;">
<div id="navi" style="float: left; width: 300px;"></div>
<div id="content_main" style="float: left; width: 500px;"></div>
<div style="clear: both;"></div>
</div>

mmh, so könnte es klappen.
Aber geht das wirklich nicht anders? Ich hätte irgendwie schon ganz gerne, dass der Hintergrund in #navi definiert wird und nicht im #content, weil es einfach für mich zur Navi gehört. Aber gut, so kann ich auch erstmal weiterarbeiten.

Danke erstmal :)