css layout

sir.hacks.alot

Aktives Mitglied
Thread Starter
Dabei seit
10.03.2005
Beiträge
2.408
Reaktionspunkte
115
Ich habe folgende aufteilung meiner seite Vor:
Ohne Titel.png
Nun habe ich das Problem, das ich nicht weiss wie ich die Höhe und Position von Content1, Content2 und Footer angeben soll.
Content1 soll eine fixe höhe bekommen(kein Problem)
Content2 soll den Raum bis zum Footer ausnutzen und bei Bedarf Scrollbalken einblenden. Am liebsten wäre es mir, wenn der Querscrollbalken nicht eingeblendet würde. Ich habe es mit overflow:auto probiert, jedoch wird mir dann auch immer ein leerer querscrollbalken angezeigt.
Der Footer soll genau am unteren Ende des Browserfensters kleben.

Meine Probleme sind nun :
1) wie mache ich die Höhenangabe für Content2
2) wie setze ich den Beginn von Content2 es wird Verschiedene Content1 mit unterschiedlichen Höhen geben (kann ich die Höhe vielleicht autmatisch dem Inhalt anpassen? Oder passiert das Automatisch wenn ich keine Höhen angabe mache)
3) Wie bekomme ich den Footer dazu am Boden zu kleben?
4) der Oben erwähnte hässliche Querbalken muss weg.

Besten Dank im Vorraus
 
Was spricht gegen
Code:
position: fixed;
für Content1, ein entsprechendes padding auf Content2? Content2 scrollt dann unter Content1 weg. Und Querbalken gibt es auch keinen mehr.

Und mit
Code:
position: absolute; bottom: 0;
sollte sich dein Footer festnageln lassen.
 
Was spricht gegen
Code:
position: fixed;
für Content1, ein entsprechendes padding auf Content2? Content2 scrollt dann unter Content1 weg. Und Querbalken gibt es auch keinen mehr.

Und mit
Code:
position: absolute; bottom: 0;
sollte sich dein Footer festnageln lassen.


Danke, das habe ich inzwischen auch rausgefunden.
Mein grösstes Problem ist jedoch wie den Zwischenraum zwischen Content1 und Footer von der Höhe her bestimme, wenn ich die Seite der grösse des Browserfensters anpassen will.
 
Sehe das Problem grad nicht.

HTML:
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
#header {
	height: 50px;
	background: #FF0;
	position: fixed;
	width: 100%;
}

#content1 {
	background: #F00;
	position: fixed;
	height: 250px;
	width: 100%;
	margin-top: 50px;
}

#content2 {
	background: #0F0;
	width: 100%;
	padding-top: 300px;
	padding-bottom: 100px;
}

#footer {
	background: #00F;
	position: fixed;
	bottom: 0;
	height: 100px;
	width: 100%;
}
</style>
<div id="header">Header</div>
<div id="content1">Content1</div>
<div id="content2">
	<p>Lorem ipsum first</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum last</p>
</div>
<div id="footer">Footer</div>
 
So ähnlich habe ich es auch Probiert nur ist bei mir Content zwei immer über den Footer hinausgelaufen wenn ich längeren Inhalt hatte, werde mal versuchen deine Angaben zu Testen
 
Ja, ich hab auch festgestellt, dass es mit
Code:
position: absolute;
genau das passiert, deswegen auch
Code:
position: fixed;
für den Footer.
 
Das sieht fast schon genauso aus wie ich es brauche.

wenn ich jedoch versuche mit:

Code:
#menu{
position : fixed;
float:left;
width:150px;}
meine Navigation einzufügen geht das vollkommen daneben.
Was mich noch ein bischen an der Sache stört ist, daß der Scrollbalken halt am ganzen Fensetr hängt und nicht nur an dem Bereich wo gescrollt werden soll.
Die Optik ist mir zum Glück gerade Primär nicht ganz so wichtig, da es mir um die Darstellung eines php-projektes geht, daß sich noch im Aufbau befindet. Nen "schönes" Stylesheet werde ich mir wohl am Ende erstellen lassen.

Besten Dank
 
HTML:
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
#header {
	height: 50px;
	background: #FF0;
	position: fixed;
	width: 100%;
	z-index: 15;
}

#content1 {
	background: #F00;
	position: fixed;
	height: 250px;
	width: 100%;
	margin-top: 50px;
	z-index: 10;
}

#content2 {
	background: #0F0;
	width: 100%;
	padding-top: 300px;
	padding-bottom: 100px;
	padding-left: 200px;
}

#footer {
	background: #00F;
	position: fixed;
	bottom: 0;
	height: 100px;
	width: 100%;
}

#menu {
	width: 200px;
	background: #FC0;
	height: 300px;
	float: left;
	position: fixed;
	padding-top: 300px;
	z-index: 5;
}
</style>
<div id="header">Header</div>
<div id="content1">Content1</div>
<div id="menu">Menu</div>
<div id="content2">
	<p>Lorem ipsum first</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum</p>
	<p>Lorem ipsum last</p>
</div>
<div id="footer">Footer</div>

Oder du baust dir um #menu und #content2 noch einen Hilfscontainer, was sich eh empfiehlt, wenn du nicht Probleme mit irgendwelchen clear's bekommen willst.
 
  • Gefällt mir
Reaktionen: sir.hacks.alot
Besten Dank, jetzt habe ich die Aufteilung die ich haben wollte, habe gerade auf jedenfall einiges dazugelernt.
 
Zurück
Oben Unten