✔ Height Probleme

[soyo]

Hallo,

hier direkt mal der URL zur Seite: http://www.frank-germann.de/dezentral.info/

CSS: http://www.frank-germann.de/dezentral.info/css/style.css

Wie bekomm ich die Navi, den linken und rechten Rand immer bis runter gezogen? Beim Content ist es ja einfach, bei dem Rest weiß ich nicht weiter.


Gruß Thomas

 

[Paspirgilis]

Ich würde dir gerne helfen aber werde bitte genauer.
Das Div in dem das navi ist geht bis nach ganz unten.

 

[soyo]

Welchen Browser benutzt du? Im IE7 und FF 3.0 bekomm ich genau die gleiche Anzeige(unglaublich aber wahr :suspekt. Im Anhang ist das was ich meine.

Gruß Thomas

Edit: natürlich auch bin ganz unten scrollen

 

[Paspirgilis]

wtf hast n da gemacht
das wolken hinterrgund dingens mit float dann mit absolute das andere mit margin -500 oda so. hättest du nicht die wolken als hintergrund in den body einbauen können und alles mit gefloateten divs sortieren und mit clear:both; arbeiten...
Sry ich hab mit bug ne menge versucht aber ging nichts.

 

[Maik]

Hi,

so wie ich das in dem "Einzeiler-Stylesheet" überblicke, werden alle height-Deklarationen von den Browsern als fixe Höhe behandelt - besonders height:889px für #cnt, sowie height:908px für #borderL_u und #borderR_u stechen hier förmlich ins Auge, denn diese Angaben setzen dem Layout seine Grenze in der Vertikalen.

Sorge also beim nächsten Mal dafür, dass das Stylesheet, dass du hier zur Überprüfung vorstellst, leserlich formatiert ist, einen Einzeiler durchforste ich nämlich nur ungerne, und wird von mir zukünftig definitiv boykottiert

@Paspirgilis: Und an dich hab ich die Bitte, in deinen Beiträgen zum einen auf deine Ausdrucksweise zu achten, und zum anderen die Groß- und Kleinschreibung nicht zu vernachlässigen. Vielen Dank!

mfg Maik

 

[soyo]

@Paspirgilis: Ich weiß das einige Dinge noch überflüssig sind. Teilweise waren sie nur zu testzwecken drin. Ich durchforste am Ende immer die CSS noch und nehme solche sachen raus. Und das mit margin-left: -493px; hat auch einen Sinn

Das mit dem Einzeiler ist mir auch schon aufgefallen, das kommt aber nur auf dem Server so. Also hier einfach die style.css:

#wolken
{
	background: url('../image/wolken.jpg') 40% repeat-x;
  	height: 288px;
 	float:left;
 	position: absolute;
 	left:0;
 	right: 0;
}

#main
{
	height: 100%;
	position: absolute;
	left: 50%;
	margin-left: -493px;
	width: 986px;
}

#borderL_o
{
	background: url('../image/borderL_o.png');
	height: 107px;
	width: 18px;
	float: left;
}

#banner
{
	background: url('../image/banner.jpg');
	height: 107px;
	width: 950px;
	float: left;
}

#borderR_o
{
	background: url('../image/borderR_o.png');
	height: 107px;
	width: 18px;
	float: left;
}

#borderL_u
{
	background: url('../image/borderL_u.png');
	height: 908px;
	width: 18px;
	float: left;
}

#cnt
{
	background: #f3f6fb url('../image/bg_content.jpg') repeat-x;
	height: 889px;
	width: 950px;
	float: left;
}

#content
{
	background: #f3f6fb url('../image/bg_content2.jpg') repeat-x;
	height: auto;
	margin: 30px 0 0 211px;
	color: #196595;
}

#content p
{
	font: 0.8em verdana;
}

#borderR_u
{
	background: url('../image/borderR_u.png');
	height: 908px;
	width: 18px;
	float: left;
}

#navigation
{
	background: #f2f7fb;
	height: auto;
	width: 190px;
	float: left;
}

#navigation a
{
	display: block;
  	width: 190px;
  	float: left;
  	height: 29px;
  	text-align: right;
  	font: 0.9em/26px verdana;
  	color: #124a6e;
}

#navigation a span
{
	margin-right: 20px;
}

#navigation	a.n1
{
	background: url('../image/nav_01_01.jpg');
}

#navigation	a.n1:hover
{
	background: url('../image/nav_01_02.jpg');
}

#navigation	a.n2
{
	background: url('../image/nav_02_01.jpg');
}

#navigation	a.n2:hover
{
	background: url('../image/nav_02_02.jpg');
}

#navigation	a.n3
{
	background: url('../image/nav_03_01.jpg');
}

#navigation	a.n3:hover
{
	background: url('../image/nav_03_02.jpg');
}

#navigation	a.n4
{
	background: url('../image/nav_04_01.jpg');
}

#navigation	a.n4:hover
{
	background: url('../image/nav_04_02.jpg');
}

#navigation	a.n5
{
	background: url('../image/nav_05_01.jpg');
}

#navigation	a.n5:hover
{
	background: url('../image/nav_05_02.jpg');
}

#navigation	a.n6
{
	background: url('../image/nav_06_01.jpg');
}

#navigation	a.n6:hover
{
	background: url('../image/nav_06_02.jpg');
}

#navigation	a.n7
{
	background: url('../image/nav_07_01.jpg');
}

#navigation	a.n7:hover
{
	background: url('../image/nav_07_02.jpg');
}

#navigation	a.n8
{
	background: url('../image/nav_08_01.jpg');
}

#navigation	a.n8:hover
{
	background: url('../image/nav_08_02.jpg');
}

#navigation img
{
	float:left;
}

.border1pxBlack
{
	border: 1px solid #000;
}

.border1pxBlue
{
	border: 1px solid #88b1c7;
}

.cl
{
	clear: both;
}

 

[Maik]

Wandel die fixe Höhe für #main und #cnt in eine Mindesthöhe um, und erzeuge den grafischen Rahmen in Form eines Hintergrundbildes (1022*?px) für #main, dessen derzeitige Breite du dementsprechend anpasst, sei's über width oder padding.

Die vier DIVs zur Rahmenerzeugung entfallen somit gänzlich im Markup.

Wenn du dann noch die Floatumgebung der Navigation und des Inhalts zum Ende aufhebst, dürften die "Height-Probleme" aus der Welt geräumt sein.

mfg Maik

 

[soyo]

Meinst du Faux-Columns?

 

[Maik]

Mit diesem Fachbegriff kann man es auf den Punkt bringen

mfg Maik

 

[soyo]

So, hier mein Ergebnis: http://www.frank-germann.de/dezentral.info/

Nu hab ich das float in der Navigation und im content rausgenommen. FF stellt es korrekt dar, aber der IE leider nicht . Hat jemand eine Idee dazu?

Gruß Thomas

EDIT: hier natürlich noch die CSS

/***CUSTOM SETTINGS***/
#wolken
{
	background: url('../image/wolken.jpg') 40% repeat-x;
  	height: 288px;
 	position: absolute;
 	left:0;
 	right: 0;
}

#main
{
	min-height: 1022px;
	height: 1022px;
	position: absolute;
	left: 50%;
	margin-left: -493px;
	width: 986px;
}

#borderL_o
{
	background: url('../image/borderL_o.png');
	height: 107px;
	width: 18px;
	float: left;
}

#borderR_o
{
	background: url('../image/borderR_o.png');
	height: 107px;
	width: 18px;
	float: left;
}

#banner
{
	background: url('../image/banner.jpg');
	height: 107px;
	width: 950px;
	float: left;
}

#cntBorder
{
	background:  url('../image/shadow.png');
	height: auto;
	width: 	986px;
	float:left;
}

#cnt
{
	background: #f3f6fb url('../image/bg_content.jpg') repeat-x;
	width: 950px;
	margin-left: 18px;
}

#content
{
	background: #f3f6fb url('../image/bg_content.jpg') repeat-x;
	height: auto;
	width: 720px;
	margin-left: 210px;
	font: 0.8em verdana;
}

#navigation
{
	background: #f2f7fb;
	height: auto;
	width: 190px;
}

#navigation a
{
	display: block;
  	width: 190px;
  	float: left;
  	height: 29px;
  	text-align: right;
  	font: 0.9em/26px verdana;
  	color: #124a6e;
}

#navigation a span
{
	margin-right: 20px;
}

#navigation	a.n1
{
	background: url('../image/nav_01_01.jpg');
}

#navigation	a.n1:hover
{
	background: url('../image/nav_01_02.jpg');
}

#navigation	a.n2
{
	background: url('../image/nav_02_01.jpg');
}

#navigation	a.n2:hover
{
	background: url('../image/nav_02_02.jpg');
}

#navigation	a.n3
{
	background: url('../image/nav_03_01.jpg');
}

#navigation	a.n3:hover
{
	background: url('../image/nav_03_02.jpg');
}

#navigation	a.n4
{
	background: url('../image/nav_04_01.jpg');
}

#navigation	a.n4:hover
{
	background: url('../image/nav_04_02.jpg');
}

#navigation	a.n5
{
	background: url('../image/nav_05_01.jpg');
}

#navigation	a.n5:hover
{
	background: url('../image/nav_05_02.jpg');
}

#navigation	a.n6
{
	background: url('../image/nav_06_01.jpg');
}

#navigation	a.n6:hover
{
	background: url('../image/nav_06_02.jpg');
}

#navigation	a.n7
{
	background: url('../image/nav_07_01.jpg');
}

#navigation	a.n7:hover
{
	background: url('../image/nav_07_02.jpg');
}

#navigation	a.n8
{
	background: url('../image/nav_08_01.jpg');
}

#navigation	a.n8:hover
{
	background: url('../image/nav_08_02.jpg');
}

#navigation img
{
	float:left;
}

.border1pxBlack
{
	border: 1px solid #000;
}

.border1pxBlue
{
	border: 1px solid #88b1c7;
}

.cl
{
	clear: both;
}