zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hilfe 3 Spaltiges Layout mit 100% höhe

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.06.2007, 22:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.06.2007
Beiträge: 7
sydios befindet sich auf einem aufstrebenden Ast
Standard Hilfe 3 Spaltiges Layout mit 100% höhe

Hallo,

ich bin am verzweifeln, ich bekomme das einfach nicht hin.
Ich habe mal 2 Bilder erstellt wie ich mir das Layout vorstelle.

Kurz zur Beschreibung der große schwarze Rahmen soll das Browserfenster darstellen. Das kleine blaue ein Logo.

Ich möchte gerne das wie auf 1.jpg wenn nicht viel Text im Content bereich ist
die beiden Spalten links und rechts 100% höhe haben und mit dem Fenster abschließen. Das Logo soll am unteren ende der linken Spalte zu sehen sein.

Wenn jetzt aber wie in 2.jpg der Text im Content Bereich länger läuft sollen die linke und rechte Spalte genau so lang sein wie der Content Bereich. Das gleiche auch für die anderen Spalten egal wo wieviel Text steht es sollen immer alle Spalten gleich lang sein.

Das Logo soll auch wenn die Spalten länger sind als die Fensterhöhe am unteren ende der linken Spalte sein.

Ich bedanke mich schon im voraus für jede Hilfe.

Viele Grüße

S.
Angehängte Grafiken
Dateityp: jpg 1.jpg (13,6 KB, 17x aufgerufen)
Dateityp: jpg 2.jpg (23,4 KB, 16x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.06.2007, 22:39
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Siehe in den FAQ die Punkte 1 und 7.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.06.2007, 01:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.06.2007
Beiträge: 7
sydios befindet sich auf einem aufstrebenden Ast
Standard

danke für den Tipp und Sorry fürs nicht FAQ lesen.
Ich hab das jetzt so hinbekommen, aber es gibt noch kleine Probleme
die ich nicht lösen kann.

Ich hab das ganze mal Online gestellt unter Link

1. Wie bekomme ich die Abstände weg die Boxen links,content,rechts sollen
bündig mit dem Banner anschließen.

2. Wie bekomme ich das Logo unten auf die links Spalte

3. beim FF ist über dem Banner ein Spalt wie bekomme den Weg ?

zu 1. Beim IE sind die Boxen links, rechts bündig aber nicht der Content

Nachtrag :

Hab noch einen Bug gefunden, wenn man viel Content eingibt funzt das unter FF irgendwie nicht
Link




Vielen dank schonmal ...

Hier der Code und das CSS :

Code:
<body>
<div id="container">
	<div id="nonFooter">
		<div id="banner"><h2>Logo</h2></div>
		<div id="left">links</div> 
		<div id="right">rechts</div> 
  		<div id="content">Content</div>
	</div>
</div>

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

</body>
Code:
body {
	background-color: #e1ddd9;
	font-size: 0.8em;
	font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
	color:#000000;
	padding:0;
	margin:0;
}
html, body {height:100%;}



#container {
	width: 990px;
	margin: 0 auto;
	padding: 0;
	background-image:url(bg_main.gif);
	background-repeat:repeat-y;
	height:100%;
}


#banner {
	margin: 0;
	padding: 0;
	background-color: #fff4cc;
	height:130px;
}



#content {
	background-color:#CCCC00;	
	padding: 0;
	margin: 0 180px;
	width:510px;
}


#left {
	float: left;
	width: 180px;
	margin: 0;
	padding:0 0 0 0;
	background-color:#00FF33;
}

#right {
	float: right;
	width: 300px;
	margin: 0;
	padding: 0;
	background-color:#00FF33;
	
}



#nonFooter
{
position: relative;
min-height: 100%;

}

* html #nonFooter
{
height: 100%;
}

#footer
{
position: relative;
margin-top: -4.5em;
background-color:#00FF55;
width:100px;

}

Geändert von sydios (15.06.2007 um 01:19 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 15.06.2007, 02:36
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von sydios Beitrag anzeigen
Wie bekomme ich die Abstände weg die Boxen links,content,rechts sollen bündig mit dem Banner anschließen.
Welche Abstände meinst Du?

Zitat:
Zitat von sydios Beitrag anzeigen
Wie bekomme ich das Logo unten auf die links Spalte
#footer muß genauso breit und zentriert sein wie #container.

Zitat:
Zitat von sydios Beitrag anzeigen
beim FF ist über dem Banner ein Spalt wie bekomme den Weg ?
"collapsing margins" durch default-margin-top von h2 - Abhilfe siehe FAQ "CSS-Prolog".

Zitat:
Zitat von sydios Beitrag anzeigen
Beim IE sind die Boxen links, rechts bündig aber nicht der Content
Er rutscht herunter - zuwenig Platz wegen des 3px-Bugs; lasse am besten alle 3 divs floaten (margin entfernen).

Zitat:
Zitat von sydios Beitrag anzeigen
wenn man viel Content eingibt funzt das unter FF irgendwie nicht
#container bekommt die min-height: 100%;, nicht #nonFooter (letzteres brauchst Du eh nicht).
Mit Zitat antworten
  #5 (permalink)  
Alt 15.06.2007, 03:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.06.2007
Beiträge: 7
sydios befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Welche Abstände meinst Du?



Er rutscht herunter - zuwenig Platz wegen des 3px-Bugs; lasse am besten alle 3 divs floaten (margin entfernen).


#container bekommt die min-height: 100%;, nicht #nonFooter (letzteres brauchst Du eh nicht).
Danke für die Tipps und die schnelle Hilfe die Abstände stimmen jetzt aber in FF wird der BG immer noch nicht ganz nach unten gezogen wenn Inhalt drinnen ist.

Und der footer klebt jetzt auch immer genau ein Stück unter dem eigentlichen Content ich möchte das der ca. 50 px über dem bottom liegt, das es nicht so hingeklatscht aussieht. Beim FF bleibt der Footer auch stehen und rutsch nicht nach unten.

Die margin's habe ich entfernt aber beim IE ist der Abstand immer noch drinnen

Code:
* { margin: 0; padding: 0; }
body {
	background-color: #e1ddd9;
	font-size: 0.8em;
	font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
	color:#000000;
	padding:0;
	margin:0;
}
html, body {height:100%;}



#container {
	width: 990px;
	margin: 0 auto;
	padding: 0;
	background-image:url(bg_main.gif);
	background-repeat:repeat-y;
	height:100%;
	min-height: 100%;
}


#banner {
	margin: 0;
	padding: 0;
	background-color: #fff4cc;
	height:130px;
}



#content {
	width:510px;
}


#left {
	float: left;
	width: 180px;
	
	padding:0 0 0 0;
	
}

#right {
	float: right;
	width: 300px;
	
	padding: 0;
	background-color:#00FF33;
	
}



#nonFooter
{
position: relative;
min-height: 100%;

}

* html #container
{
height: 100%;
}

#footer
{
position: relative;
margin-top: -4.5em;
background-color:#00FF55;
width: 990px;
margin: 0 auto;
padding: 0;
}
html

Code:
<body>
<div id="container">
		<div id="banner"><h2>Logo</h2></div>
		<div id="left">links</div> 
		<div id="right">rechts</div> 
  		<div id="content">Content</div>
	
</div>

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

</body>
danke
Mit Zitat antworten
  #6 (permalink)  
Alt 15.06.2007, 03:25
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Du hast meine letzten beiden Tipps noch nicht umgesetzt.
Mit Zitat antworten
  #7 (permalink)  
Alt 15.06.2007, 03:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.06.2007
Beiträge: 7
sydios befindet sich auf einem aufstrebenden Ast
Standard

Ahh ok das float habe ich vergessen jetzt ist der Abstand weg.


dem container habe ich aber das min-height gegeben und den noFooter div
habe ich auch entfernt.

Code:
#container {
	width: 990px;
	margin: 0 auto;
	padding: 0;
	background-image:url(bg_main.gif);
	background-repeat:repeat-y;
	height:100%;
	min-height: 100%;
}

<body>
<div id="container">
		<div id="banner"><h2>Logo</h2></div>
		<div id="left">links</div> 
		<div id="right">rechts</div> 
  		<div id="content">Content</div>
	
</div>

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

</body>
Mit Zitat antworten
  #8 (permalink)  
Alt 15.06.2007, 03:56
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von sydios Beitrag anzeigen
#container {
width: 990px;
margin: 0 auto;
padding: 0;
background-image:url(bg_main.gif);
background-repeat:repeat-y;
height:100%;
min-height: 100%;

}
Ein Widerspruch height muß natürlich raus.

Jetzt mußt Du nur noch clearen, damit #container die Floats einschließt. Entweder mit einem clearenden Element nach dem letzten Float, unmittelbar vor dem schließenden Tag von #container, oder per "Easy Clearing" (diese sowie alle weiteren clear-Varianten findest Du in den FAQ Punkt 2).
Mit Zitat antworten
  #9 (permalink)  
Alt 15.06.2007, 04:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.06.2007
Beiträge: 7
sydios befindet sich auf einem aufstrebenden Ast
Standard

Cool hat geklappt

Jetzt nur noch eins und ich lass dich in ruhe
Wie bekomme ich jetzt den Footer 40px höher da ja in dem nachher nur ein gif
steckt. Ich hab schon versucht die margin werte zu ändern aber dann ist das zwar an der stelle an der ich es haben möchte aber nicht mehr zentriert.

Code:
* { margin: 0; padding: 0; }
body {
	background-color: #e1ddd9;
	font-size: 0.8em;
	font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
	color:#000000;
	padding:0;
	margin:0;
}
html, body {height:100%;}



#container {
	width: 990px;
	margin: 0 auto;
	padding: 0;
	background-image:url(bg_main.gif);
	background-repeat:repeat-y;
	
	min-height: 100%;
}


#banner {
	margin: 0;
	padding: 0;
	background-color: #fff4cc;
	height:130px;
}



#content {
	width:510px;
	float:right;

}


#left {
	float: left;
	width: 180px;
	
	padding:0 0 0 0;
	
}

#right {
	float: right;
	width: 300px;
	
	padding: 0;
	background-color:#00FF33;
	
}



#nonFooter
{
position: relative;
min-height: 100%;

}

* html #container
{
height: 100%;
}

#footer
{
position: relative;
margin-top: -4.5em;
background-color:#00FF55;
width: 990px;
margin: 100 auto;
padding: 0;
}
Code:
<body>
<div id="container">
		<div id="banner"><h2>Logo</h2></div>
		<div id="left">links</div> 
		<div id="right">rechts</div> 
  		<div id="content">Content</div>
		<div style="clear:both;"></div>
	
</div>

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

</body>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 15.06.2007, 04:24
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von sydios Beitrag anzeigen
Code:
#footer
{
position: relative;
margin-top: -4.5em;
background-color:#00FF55;
width: 990px;
margin: 100 auto;
padding: 0;
}
Noch ein Widerspruch, und dann auch noch ohne Einheit... Der Footer braucht eine Höhe, und um genau diese wird er nach oben geschoben.

Dann brauchst innerhalb von #container auch noch ausreichend Platz nach unten (damit seine Inhalte nicht überlagert werden), z.B. durch ausreichend margin-/padding-bottom jedes einzelnen Floats, oder durch eine Höhe des clearenden Elementes. Elegant wäre dafür hr mit visibility: hidden;, da hr (im Gegensatz zu einem leeren div) auch einen Sinn hat (auch wenn dieser erst ohne CSS sichtbar wird).
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
3 spaltiges Layout mit CSS Serpico CSS 2 20.12.2010 16:53
3 spaltiges Layout mit flexibler Mitte skobe CSS 1 11.12.2007 17:48
Footer Problem (3 spaltiges Layout, variable Höhe) Lofesto CSS 2 23.07.2007 17:13
Hilfe bei Umsetzung von Layout... darvida CSS 8 29.04.2005 12:32
layout problem mit höhe Deude CSS 6 31.03.2005 22:00


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:08 Uhr.