Versuch eines 2-Spalten Layouts

**Whiz-zarD** · 27.11.2011 12: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:

Klicke auf die Grafik für eine größere Ansicht

Name: layout.png
Hits: 53
Größe: 6,9 KB
ID: 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 12:57

Hab aus interesse an der Problemstellung mal das hier zusammengeschustert:

Code:

<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.

Zitat

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 13:08

Schon mal danke für die Antwort.

Zitat von nudelsalat

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 13:13

Code:

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.

Code (CSS):

#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:

HTML-Code:

<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 13:52

Zitat von Xardas der Dunkle

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.

Zitat von Xardas der Dunkle

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:

HTML-Code:

<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

Thema: Versuch eines 2-Spalten Layouts

Themen-Optionen

Anzeige

Versuch eines 2-Spalten Layouts

Berechtigungen