Footer Position

Status
Nicht offen für weitere Antworten.
S

spielmannszug

Grünschnabel
Hallo,

für das Design meiner zukünftigen Website möchte ich gerne ein CSS-Layout einsetzen.

Leider habe ich bei der Umsetzung folgende Probleme:

  • Die Höhe des Containers soll immer mindestens 100% betragen und beim Vergrößern des Browsers „mitwachsen“.
  • Der Footer soll immer am Ende der Seite angezeigt werden.

Code: 
html {
    margin:0px;
    padding:0px;
	height:100%;
}

body {
	background-color: #eeeeee;
	font-size: 0.8em;
	font-family: Arial, SunSans-Regular, Sans-Serif;
	color:#000000;
	margin:0px;
        padding:0px;
        height:100%;
}

#container {
	width: 77.4em;
	margin: 0 auto;
	padding: 0;
	background-color: #E2E2E2;
	border: 1px solid #000000;
}

#banner {
	margin: 0;
	padding: 0;
	background-image: url(..........);
}
#banner p{
	margin-left: 20em;
	padding: 20px;
}
#mainnavi {
	margin: 0;
	background-color: #3B3B3B;
	padding: 5px 0 5px 0;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	color: #ffffff;
}

#mainnavi p{
	margin-left: 16.8em;
	padding: 0 25px;
}

#main { 
    position: relative; 
    top:0; 
    left:0; 
    width: 100%;
}

#content {
	background-color: #ffffff;
	padding: 15px 20px 20px 20px;
	margin: 0 0 0 12em;
	border-left:dashed 1px #000000;
	min-height:600px;
}

#left {
	position: absolute;
	top: 0; 
        left: 0;
	width: 12em;
	margin: 0;
	padding:15px 0 0 0;
	color:#ffffff;
}

#footer {
	
        position:absolute;
        bottom: 0;
        margin:0 auto;
        background-color: #ffffff;
	padding: 0;
	background-color: #3B3B3B;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	color: #ffffff;
	text-align: center;
	padding:5px 0 5px 0;
	width:100%;
}

HTML: 
<div id="container">
<div id="banner">
</div>
<div id="mainnavi">
</div>
<div id="main">
<div id="left">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</div>
 
Hi,

versuch es mal hiermit:

Code: 
#container {
        width: 77.4em;
        margin: 0 auto;
        padding: 0;
        background-color: #E2E2E2;
        border: 1px solid #000000;
        min-height: 100%; /* moderne Browser */
        height: auto !important; /* moderne Browser */
        height: 100%; /* IE < 7 */
        position: relative;
}

#main {
    /*position: relative;*/ /* auskommentiert = deaktiviert */
    /*top:0;*/ /* auskommentiert = deaktiviert */
    /*left:0;*/ /* auskommentiert = deaktiviert */
    /*width: 100%;*/ /* auskommentiert = deaktiviert */
}

#left {
        /*position: absolute;*/ /* auskommentiert = deaktiviert */
        /*top: 0;*/ /* auskommentiert = deaktiviert */
        /*left: 0;*/ /* auskommentiert = deaktiviert */
        float: left;
        width: 12em;
        margin: 0;
        padding:15px 0 0 0;
        color:#ffffff;
}

#footer {
        position:absolute;
        bottom: 0;
        margin:0 auto;
        background-color: #ffffff;
        padding: 0;
        background-color: #3B3B3B;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size: 0.7em;
        color: #ffffff;
        text-align: center;
        padding:5px 0 5px 0;
        width:100%;
        clear: left;
}
 
Im IE 7 sieht es schon nicht schlecht aus. Im IE 6 beginnt der #content allerdings erst da, wo das Menü (left) aufhört.

Wie kann ich das beheben?
 
Tut mir leid, aber ich kann mit meinem Änderungsvorschlag im IE6 (Win2000 / WinXP) keine Verschiebung des Content-Bereichs unterhalb des linken Menüs feststellen bzw. reproduzieren. :confused:

Zeig doch bitte nochmal deinen vollständigen Code, oder gibt's eine Online-Version, um dort mal einen Blick drauf werfen zu können?
 
Hier der komplette CSS-Code (vielleicht etwas unaufgeräumt, da ich noch "probiere"):

Code: 
html {
    margin:0px;
    padding:0px;
	height:100%;
}

body {
	background-color: #eeeeee;
	font-size: 0.8em;
	font-family: Arial, SunSans-Regular, Sans-Serif;
	color:#000000;
	margin:0px;
    padding:0px;
    height:100%;
}

a {
    color: #0066CC; 
	font-weight:bold; 
	text-decoration:none;
}

a:visited {
    color:#0066CC;
}

a:hover {
    color: #3B3B3B;
}

a:active {
    color:#3B3B3B;
}

h1 {
	font-size: 2em; 
	font-weight: normal;
	color: #4F789F;
 }

h2 {
	font-size: 1.7em;
	font-weight: normal;
}

/* ----------container zentriert das layout-------------- */

#container {
        width: 77.4em;
        margin: 0 auto;
        padding: 0;
        background-color: #E2E2E2;
        border: 1px solid #000000;
        min-height: 100%;
        height: auto !important;
        height: 100%;
        position: relative;
}

/* ----------banner for logo-------------- */

#banner {
	margin: 0;
	padding: 0;
	background-image: url(.....);
}
#banner p{
	margin-left: 20em;
	padding: 20px;
}
#mainnavi {
	margin: 0;
	background-color: #3B3B3B;
	padding: 5px 0 5px 0;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	color: #ffffff;
}

#mainnavi p{
	margin-left: 16.8em;
	padding: 0 25px;
}

/* -----------------Inhalt--------------------- */

#main {
    /*position: relative;*/ /* auskommentiert = deaktiviert */
    /*top:0;*/ /* auskommentiert = deaktiviert */
    /*left:0;*/ /* auskommentiert = deaktiviert */
    /*width: 100%;*/ /* auskommentiert = deaktiviert */
}

#content {
	background-color: #ffffff;
	padding: 15px 20px 20px 20px;
	margin: 0 0 0 12em;
	border-left:dashed 1px #000000;
	min-height:600px;
}

p, pre {
	padding: 0 0 15px 0;
	margin:0;
}

pre, code { font-size: 1.2em;}

h1 {
	padding-bottom: 15px;
	margin:0;
	font-size: 1.7em;
	clear:left;
}

h2 {
	padding: 5px 25px;
	margin:0;
	color: #4F789F;
}

.gross {
	width: 5.71em;
	height: 1.07em;
}


/* --------------left navigavtion------------- */

#left {
        /*position: absolute;*/ /* auskommentiert = deaktiviert */
        /*top: 0;*/ /* auskommentiert = deaktiviert */
        /*left: 0;*/ /* auskommentiert = deaktiviert */
        float: left;
        width: 12em;
        margin: 0;
        padding:15px 0 0 0;
        color:#ffffff;
}

#left ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#left li {
	display: inline;
}

#left a {
	display: block;
	padding: 5px 8px;
	border-bottom: 1px solid #FFFFFF;
	text-decoration: none;
	font-weight:normal;
	color: #3B3B3B;
}

#left a:hover {
	background: #4F789F;
	color: #FFFFFF;
	font-weight:bold;
}

#left .active a {
	background: #BABABA;
	color: #000000;
}


/* -----------footer--------------------------- */

#footer {
        position:absolute;
        bottom: 0;
        margin:0 auto;
        background-color: #ffffff;
        padding: 0;
        background-color: #3B3B3B;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size: 0.7em;
        color: #ffffff;
        text-align: center;
        padding:5px 0 5px 0;
        width:100%;
        clear: left;
}

/*-----------images------------------------*/

.img_left {
float: left;
padding: 0 15px 15px 0;
}

/*-----form-----*/

#formular {
    margin:0; 
	padding:0; 
	width:774px; 
}

fieldset {width:774px; border:1px solid #999; padding:0 10px; margin:0; text-align:left;}
fieldset:hover {border-color:#333;}
legend {font-size:1em; color:#000000; font-weight:bold; padding:5px; margin:5px; background:none;}
label {color:#000000; font-size:1em; margin:0 3px 3px 0; padding:0; line-height:1.5em; width:250px; display:block; float:left; clear:left;}
input {border:1px solid #666; padding-left:0.3em; margin-bottom:0.6em; width:240px; background:#fff; font-family:Arial, Helvetica, sans-serif;}
input:focus {border-color:#900; }
option {color:#900; width:240px;}
textarea {width:400px; border:1px solid #666; margin-bottom:0.6em; font-family:Arial, Helvetica, sans-serif;}
textarea:focus {border-color:#900;}
.captcha {margin-bottom:0.6em;}
.submitbtn {width:123px; background:#E2E2E2; border:1px solid; border-color:#999 #333 #333 #999; color:#3B3B3B; cursor:pointer; padding:0; margin:0;}
.submitbtn:hover {background:#4F789F; color:#fff; border:1px solid; border-color:#999 #333 #333 #999; font-weight:bold;}
 
Es bleibt vorerst bei meiner Aussage - siehe angehängten Screenshot (IE6, Win2k).

Vielleicht solltest du mal an dieser Stelle deinen vollständigen HTML-Code incl. der Box-Inhalte zeigen.
 

Anhänge

  • ie6.jpg
    ie6.jpg
    38,4 KB · Aufrufe: 29
Ich habe einen Verdacht, warum sich der content unter das Menü (left) schiebt. Könnte es evtl. mit dem clear:left in der Formatierung der Überschrift h1 in Verbindung stehen?
 
Wenn ich das clear:left bei h1 entferne (was ich übrigens auch für die Formatierung von Formularen nutzen wollte), ist das Layout der Seite durcheinander. Die Absätze liegen nicht mehr untereinander usw.

Wie kann ich das beheben?
 
Ich hatte dich doch gestern Abend bzw. heute Nacht darum gebeten, mal den vollständigen HTML-Code incl. aller Boxen-Inhalte zu posten, oder einen Link zur Seite zu nennen, damit man sich das mal direkt und in vollem Umfang anschauen kann.

Denn derzeit hab ich hier nur den "Prototypen" für das Layout vorliegen, der einwandfrei funktioniert, und kann nicht nachvollziehen, weshalb du überhaupt die clear:left-Eigenschaft benötigst.

Ansonsten kann ich dir nur schwer einen Tipp geben, wie sich das Problem fixen lässt.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück