Problem mit CSS basiertem Layout...

André Griepenburg

André Griepenburg

Legendäres Mitglied
Hallo,

habe für einen Kunden ein 3 spaltiges Layout mit Fußzeile entworfen.
Dabei ist die Fußzeile jeweils am unteren Rand des Fensters oder wird vom Inhalt "nach unten gedrückt".
Für die linke und rechte Spalte funktioniert dies super, allerdings nicht für die mittlere.

Wenn ich nun in die mittlere Spalte Inhalte packe, die die Größe des Fensters übersteigen wird die Fußzeile "überschnitten", statt diese nach unten zu pushen.

Nun hoffe ich, dass ihr mir helfen könnt und den Fehler findet
wink.gif

Hab das ganze mal auf das minimum gekürzt:

HTML:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style/nn.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="style/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>

<div id="outer">
<div id="clearheader"></div>
<!-- to clear header -->
<div id="left">
<!-- left collum -->
</div>

<div id="right">
<!-- right collum -->
</div>

<div id="centrecontent">
<!--centre content goes here -->
</div>

<div id="clearfooter"></div>
<!-- to clear footer -->
</div>
<!-- end outer div -->

<div id="footer">
<!-- footer content goes here -->
</div>
<div id="header"><!-- Header - currently not used --></div>
</body>
</html>




Zugehöriges CSS:

CODE
html>body #minHeight{float:right;width:0px;height:100%;margin-bottom:-52px;} /*safari wrapper */


/* Beginn Definitions */
/* Some init stuff */
* {margin:0;padding:0}
/* commented backslash hack v2 \*/
html, body{height:100%;}
/* end hack */
#clearheader{height:72px;} /*needed to make room for header*/
#clearfooter{clear:both;height:27px;} /*needed to make room for footer*/
* > html #clearfooter {float:left;width:100%;}/* ie mac styles */
/* Ende init stuff */

/* ########## Main Definitions ############# */
/* Page Body */
body {
background-image: URL(../images/hands2.gif);
background-repeat: repeat-x;
background-position:center top;
background-color: #CC3300;
text-align:center;
font-family: Verdana, 'Times New Roman', Arial;
min-width:980px;
}

/* outer area div */
#outer{
width: 550px;
margin:auto auto -22px auto;
min-height:100%;
}

/* Main Content Area */
#centrecontent {
width:100%;
height:600px;
float:left;
position:relative;
z-index:1;
margin:0 -1px; /* moz fix*/
color: #FFF;
margin-top: 60px;
}

/* left block, main definition */
#left {
position:relative; /*ie needs this to show float */
width:175px;
float:left;
margin-left:-174px; /*must be 1px less than width otherwise won't push footer down */
z-index:100;
left:-1px;
}

/* right block, main definition */
#right {
position:relative; /*ie needs this to show float */
width:225px;
float:right;
margin-right:-224px; /*must be 1px less than width otherwise won't push footer down */
padding-top: 30px;
left:1px;
color: #000000;
}

/* Header Definition - currently not used */
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:70px;
border-top: 0px solid #000;
border-bottom: 0px solid #000;
overflow:hidden;
}

/* Footer Definition */
#footer {
width:100%;
clear:both;
height:20px;
border-top:1px solid #000;
border-bottom:1px solid #000;
background-color: #406700;
text-align:center;
position:relative;
}



ie.css:

CODE /* CSS Document */
* html #outer{ height:100%;}
#minHeight {display:none}
#left {margin-right:-3px;}/*3px jog */
#right {margin-left:-2px;padding-bottom:50px}/*3px jog */
* html #footer {
height:52px;/* for ie5 */
he\ight:50px;/* for ie6 */
}
#centrecontent {margin:0}
#outer{word-wrap:break-word}
 
Habe den Code jetzt nicht durchgelesen.
Aber habe einen intressanten link für dich.

Hoffentlich ist dein Layout auch dabei, dann kannst du diesen übernehmen oder einfach die Unterscheide beachten.

Ich weiss das der Footer eine sehr lästige Angelegenheit ist. Hatte auch schon so meine Probleme damit. (Besonders wenn man noch auf verschiedene Browser achtenmuss).

CSS Layouts

Grüsse, Crazy
 
Danke Crazy,

leider ist kein entsprechendes Layout dabei.
Es gibt dort zwar genügend mit Fußzeile und 3 Spalten, jedoch keines, dessen Fußzeile auch tatsächlich am unteren Rand des Fenstern hängt. Und das soll ja gerade der Fall sein, zumindest so lange der Content nicht die Fenstergröße überschreitet.


Ich hatte zum Entwerfen auch ein fertiges Layout benutzt, leider kann ich die Quelle nicht mehr finden.
 
du möchtest also das wenn der content das fenster nicht überschreitet der footer untem am fensterrand bleibt?
und sobald der content grösser wird, dieser den footer runter drückt?

möchte der kunde das so? also ich finde es eher unübersichtlicher anstatt das es unten am content hängt...

hmm... also ich bin dafür überfragt.
was ich noch kenne ist min-height.
aber glaube das funktioniert nicht für alle browser....
 
Okay,
hab das Problem gelöscht.
Oder besser:
Der Autor des Templates hat mich auf die entsprechende Stelle hingewiesen.

Ich hab wohl vor lauter Codezeilen das offensichtliche nicht gesehen:

QUOTE
/* Main Content Area */
#centrecontent {
width:100%;
height:600px;
float:left;
position:relative;
z-index:1;
margin:0 -1px; /* moz fix*/
color: #FFF;
margin-top: 60px;
}



Sag einem Browser, er soll etwas mit einer Höhe von 600px darstellen, und er wird es tun... :-/


Thread kann geschlossen werden ^^
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben