[jspawn]

Hallo liebe Gemeinde

Ich schlage mich nun schon seit ein paar Tagen mit nem Layout einer Homepage rum, das nicht so ganz das macht, was es soll. Mein Problem ist, dass sich der 'main' Bereich über die Grösse des 'container's hinaus wächst. (Siehe Beispielbild - der Container besitzt ne 1px black border). Ist es realisierbar, dass der Inhalt innerhalb des Containers bleibt und trotzdem einzeln scrollbar ist? Nach Möglichkeit mit Abstand zum Footer, welcher sich innerhalb des 'wrapper's immer am Browserboden befindet?

Vielen Dank für Eure Hilfe!

Grüessli
Christian

Beispielbild: http://temp.vollopte.ch/problem.jpg

Layout für: Contao CMS (Elemente vorgegeben)

Grundaufbau:


CSS:

html, body {
    background: #FFFFFF url("tl_files/SC_media/images/bg/SCbg01.jpg") left top no-repeat;
	top: 0;
	left: 0;
	height:99%; /* needed for container min-height */
}

#wrapper {
    margin:3px 3px 3px 40px;
	position:relative; /* needed for footer positioning*/
	width:1060px;
	/* real browsers */
	height:auto !important; 
	height:100%; /* IE6: treaded as min-height*/
	/* real browsers */
	min-height:100%; 
	max-height: 100%;
    font: 1em/100% Arial;
    color: #666;
    -moz-box-shadow: 0 0 10px #888;
    -webkit-box-shadow: 0 0 10px #888;
    box-shadow: 0 0 10px #888;
    /* Fallback for web browsers that don't support RGBa */
    background-color: rgb(255, 255, 255);
    /* RGBa with 0.6 opacity */
    background-color: rgba(255, 255, 255, 0.8);
    /* for non-css3 browsers */
    border: solid 1px #fff;
}

#container {
    height: auto !important; /*Cause footer to stick to bottom in IE 6*/
	height: 100%;
	max-height: 100%;
	min-height: 100%;
    margin: 0px 0px 0px 0px; /*Allow for footer height*/
    width: 1056px;
	position: absolute;
	top: 0;
	left: 0;
	padding: 1px;
	border: solid 1px #000;
	clear: both;
}


#left {
    width: 170px;
	margin: 136px 2px 2px 2px;
    padding:1px;
    color:#666;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    /* Fallback for web browsers that don't support RGBa */
    background-color: rgb(255, 255, 255);
    /* RGBa with 0.8 opacity */
    background-color: rgba(255, 255, 255, 0.8);
    /* for non-css3 browsers */
    border: solid 1px #fff;
}


#main {
	width: 871px;
	min-width: 871px;
	max-width: 871px;
	margin: 136px 2px 2px 2px; 	
    padding:1px;
    color:#666;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    /* Fallback for web browsers that don't support RGBa */
    background-color: rgb(255, 255, 255);
    /* RGBa with 0.8 opacity */
    background-color: rgba(255, 255, 255, 0.8);
    /* for non-css3 browsers */
    border: solid 1px #fff;
    overflow-y: scroll;
    overflow-x: hidden;
}

#clear_content {
	height: 1px;
	clear: both;
	width: 100%;
}

#footer {
    width: 1060px;
    position: absolute;
	clear: both;
    bottom: 3px;
	height: 62px;
	min-height: 62px;
	max-height: 62px;
    margin: 0;
	left: 0;
    line-height: 100%;
}

...

[Manfred62]

stell eine Testseite online, dann kann man mehr sagen.
Diese Codefragmente sind nicht sinnvoll

pos. absolute für #container... wozu??

width: 871px;
min-width: 871px;
max-width: 871px;

wozu ist das gut?? width reicht doch.

[jspawn]

Hey Manfred

Dank Dir für die schnelle Antwort. Beispielseite unter Referenzen - Willkommen bei Schlaginhaufen Consulting abrufbar.

Die 'width' Angaben hab ich bezüglich älterer Browser drin gelassen, da die max/min Angaben wohl nicht alle verstehen.

Grüessli
Christian

[Manfred62]

Zitat von jspawn

Die 'width' Angaben hab ich bezüglich älterer Browser drin gelassen, da die max/min Angaben wohl nicht alle verstehen.

Das ist doch Unsinn --> 3x der gleiche Wert??
width versteht jeder Browser

EDIT: ich empfehle, das ganze noch mal neu aufzusetzen. Das ganze position ist überflüssig.
Du versuchst überall zu clearen.. Vermute mal, es fehlt noch Basis Knowhow?

siehe hier: Little Boxes

BTW: http://validator.w3.org/check?verbos...%2Fsc%2Fsc.htm

[jspawn]

Ah jetzt versteh ich was du meinst. Ja an der Stelle würde das tatsächlich reichen (wird ausgebaut) Das kommt davon, wenn man einfach Sachen mitzieht

Hier siehts anders aus:

	height:auto !important; 
	height:100%; /* IE6: treaded as min-height*/
	
	min-height:100%; /* real browsers */
	max-height: 100%; /* real browsers */

Dank Dir!

Das Problem ist, dass das CMS Contao noch einiges an Informationen mitliefert und hier ist das CMS recht störrisch. Ich werde jetzt mal auf die Hauptelemente reduzieren, dass dort dann sauber hinbekommen und ggf. dann schauen, was sich im Contao umbiegen lässt. Der W3C Check meckert zu 90% am schon vorgegebenen Code des CMS - hier lässt sich nicht viel machen.

Grüessli
Christian

[jspawn]

14.4 Das Problem: Gefloatete Elemente ragen nach unten heraus - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)

Leider gibt es in CSS keine Option zum automatischen Einschließen von Floats, und die Schwierigkeit, gefloatete Objekte zuverlässig in ein umgebendes Element einbetten zu können, hat Webdesigner lange Zeit davon abgehalten, float-Umgebungen für komplexere Layoutzwecke zu benutzen.

Ich glaub das kommt meinem Problem ziemlich nahe.

P.S. Es fehlt definitiv Basis KnowHow Hab gestern mit CSS angefangen...

[Manfred62]

Zitat von jspawn

...
Hab gestern mit CSS angefangen...

Uups, na dann... nimm dir die Zeit und arbeite Little Boxes durch.
Wirst sehen, danach geht alles viel einfacher.

Manfred

[gato]

Zitat von jspawn

P.S. Es fehlt definitiv Basis KnowHow Hab gestern mit CSS angefangen...

Deshalb ist es sinnvoll seine Grundlektüre erstmal zu Ende zu lesen.

Diese Problematik wird in Little Boxes ausführlich beschrieben (und nicht nur dort).

[jspawn]

Perfekt Dank Euch für die schnelle Hilfe! Das gibt ein arbeitsfreudiges Wochenende...

Liebe Grüsse
Christian