✔ 2-spalter mit footer dynamische höhe und browserprobleme

[tarantism]

Hallo ich habe folgende Probleme,

http://sandor.sa.funpic.de/

Die Seite soll in der Breite fest sein, zentriert im
Browserfenster stehen und die Höhe soll sich flexibel
verhalten also, soll der dunkle Balken , je nach Fenster
höher der tiefer rücken. Mit Html mittels * kein Problem aber
mit CSS anscheinend schon.

Ich hab das jetzt mehr oder eher weniger hinbekommen,
jedoch überlappt der Balken wenn das Fenster entsprechend
klein ist, den Scrollbalken des Inhalt Containers.
Noch viel schlimmer ist, das es in Firefox und Opera noch
bescheidener aussieht. Es wird nicht zentriert und Firefox
schießt den Text viel zu weit raus.

Ich hoffe Ihr könnt mir helfen, ich hab mich erst vor 2 Tagen
in die Thematik reingelesen, deswegen wundert euch nicht,
wenn noch viele Anfängerfehler drinn sind.

 

[Maik]

Vielleicht helfen dir Stu Nicholls' CSS-Modelle weiter?

• stu nicholls | CSS PLaY | CSS layouts | 'Fixed' layout version 1
  
  
• stu nicholls | CSS PLaY | CSS layouts | CSS Layout Basics 2

 

[tarantism]

danke,
das sieht schon mal gut aus, ich werd mir das mal genauer ansehen

 

[tarantism]

ach ich komm irgendwie trotz des tutorials nicht wirklich weiter,
kann mir vieleicht einer an meiner webseite sagen, was ich falsch gemacht habe?

 

[tarantism]

http://sandor.sa.funpic.de/

Ich hab das Tutorial jetzt soweit umgebaut, das es Internet Explorer so aussieht wie ich es haben will, aber warum funktioniert das padding des contents im Firefox nicht?
Statts einfach den Text enger zurücken schießt er den ganzen Inhalt raus. Die Navigationsleiste sieht man immer noch viel zu lang, wenn das Fenster kleiner gerückt ist.. Man scrollt im Firefox praktisch die gesamte Seite statt den inneren Bereich wie im I-explorer, ich bin ratlos .

 

[Maik]

Ich hab das Tutorial jetzt soweit umgebaut, das es Internet Explorer so aussieht wie ich es haben will, aber warum funktioniert das padding des contents im Firefox nicht? Statts einfach den Text enger zurücken schießt er den ganzen Inhalt raus.

Der FireFox (1.0.2) zeigt die Seite korrekt an, denn nach dem Boxmodell setzt sich die 'tatsächliche' Breite des DIV#content aus den width- und padding-Angaben zusammen -> 800px + 150px + 20px = 970px.

Da vor der Doctype-Deklaration ein HTML-Kommentar notiert wurde, läuft der IE (6) im Quirks-Mode und interpretiert das Boxmodell anders / falsch, d.h. er addiert die Werte nicht zusammen und zeigt das DIV#content 'nur' mit 800px Breite an.

Lösung: die padding-Angaben für das DIV entfernen bzw. auf 0 setzen, und ein Kindelement mit dem Innenabstand formatieren, wie z.B.

div#content p
{
padding-left:150px;
padding-right:20px;
}

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

Anmerkung: entferne in der CSS-Datei style.css das style-TAG:

<style type="text/css">

</style>

 

[tarantism]

wunderbar, das bringt mich schon ein ganzes Stück vorwärts,

aber warum ist die Navigationsleiste länger als 100%,
sie geht über den footer hinaus, was kann ich da machen?
wie kann ich ihm bei bringen, das da Schluss ist?

http://sandor.sa.funpic.de/

 

[tarantism]

Hier ist das ccs, falls das hilft

html {
	height:100%; 
	max-height:100%; 
	padding:0; 
	margin:0; 
	border:0px none; 
	background:#FFF9E5;
	font-size:76%; 
	font-family:georgia, palatino linotype, times new roman, serif;
	/* hide overflow:hidden from IE5/Mac */ 
	/* \*/ 
	overflow: hidden;
	}

body {
	height:100%; 
	max-height:100%; 
	overflow:hidden; 
	padding:0; 
	margin:0; 
	border:0px none;
	background:#FFF9E5;
	}

#content {
	display:block; 
	overflow:auto; 
	position:absolute; 
	z-index:3; 
	top:92px; 
	bottom:52px; 
	width:800px; 
	margin-left:-400px; 
	left:50%; 
	border-left:1px solid #000;
	border-right:1px solid #000;
	background:#fff;
	
	}
	
	* html #content {
	top:15px; 
	bottom:0; 
	height:100%;
	width:800px;
	border-top:90px solid #fff; 
	border-bottom:50px solid #fff;
	
	}
	
	div#content p
{
padding-left:150px;
padding-right:20px;
text-align:justify;

}
	
#menue {
	position: absolute;
	top: 93px;
	left: 50%;
	margin-left:-400px; 

	width: 137px;
	height: 100%;
	background-color: #fff;
	color: #000;
	
	margin-bottom: 20px;
	padding: 0px;
	border-left: 1px solid #6B6662;
	border-right: 1px solid #6B6662;
	border-style: none dashed none solid;
	z-index:6;
	overflow: hidden;
	}

* html #menue {
	top:95px; width:137px; height:100%; 
	}

#head {
	position:absolute; 
	margin-left:-400px; 
	left:50%; 
	top:0; 
	width:800px; 
	min-width:800px; 
	height:87px; 
	background:#fff; 
	font-size:1em; 
	z-index:5; 
	border:0px;
	}

* html #head {
	top:2px; width:800px; height:87px;
	}




#foot {
	text-align:center;
	position:absolute; 
	margin-left:-400px; 
	left:50%; 
	bottom:0; 
	width:800px; 
	min-width:800px; 
	height:50px; 
	background:url('heading.jpg') 0 100px; font-size:1em; 
	z-index:5; 
	border:1px solid #000;
	font-family: trebuchet MS, tahoma, verdana, arial, sans-serif;
	font-weight:bold;
	color:#000
	}

* html #foot {
	bottom:2px; width:800px; height:48px;
	}



.boldhead {
	font-size:1.5em; 
	font-weight:bold;
	}
.bold {font-weight:bold;}
.left {float:left; margin:10px; border:1px solid #000;}
.right {float:right; margin:10px; border:1px solid #000;}
.lefttext {float:left; width:300px; text-align:justify;}
.righttext {float:right; width:300px; text-align:justify;}

* html .lefttext {float:left; width:310px; text-align:justify;}
* html .righttext {float:right; width:310px; text-align:justify;}

 

[Quaese]

Hi,

du musst für das Menu die gleiche Vorgehensweise verwenden, wie für den Content.

Für Nicht-IE-Browser absolute Positionierung über top, left und bottom. Die erforderlichen Definitionen
für den IE werden mit Hilfe des Star-Hacks angegeben. Dort wird die Höhe wieder zu 100 Prozent
bestimmt. Die Abstände nach oben und unten werden mit Hilfe der Rahmenstärke realisiert. Zu
beachten ist, dass der z-Index niedriger ist als der von Header und Footer.

Versuch mal folgendes CSS für das Menu:

#menue {
  position: absolute;
  overflow: hidden;
  top: 87px;
  bottom: 50px;
  left: 50%;
  width: 137px;
  margin-left:-400px;
  padding: 0;
  border-left: 1px solid #6B6662;
  border-right: 1px dashed #6B6662;
  background-color: #fff;
  color: #000;
  z-index:4;
  }

* html #menue {
  height: 100%;
  top: 0;
  bottom: 0;
  border-top: 87px solid #fff;
  border-bottom: 50px solid #fff;
  }

Ich hoffe, das bringt dich weiter.

Ciao
Quaese

 

[Maik]

Hab deine Seite eben nochmal gecheckt -> sieht perfekt aus

• Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 8.50