TigerWoods2001
Threadersteller
Dabei seit: 13.10.2002
Ort: Düsseldorf
Alter: -
Geschlecht: -
|
Verfasst Do 02.02.2006 19:35
Titel CSS mit Layoutproblem |
|
|
Hi,
grad arbeite ich mit Typo3 und versuche gerade ein neues Design via css zu erstellen.
Idee ist ein Zentriertes Design
Ein container der alles zentriert und in sich hält
Header 100% breit wie der container
3 Salten
footer 100% so breit wie des container
Problem:
Der footer verschiebt sich unterhalb der mittleren Spalte, aber sollte der doch unter der rechten spalte bleiben, da diese viel höher ist (nach unten).
Und der Hintergrund "weiß" wird beim FireFox nicht mit nach unten gezogen, so dass nur bei IE die rechte spalte begleitet wird.
Ich bin ratlos. Kann einer mir erklären wo das Problem liegt?
MfG
TW
Hier mein Code:
Code: |
body {
text-align:center;
background-color: #99CCFF;
font-size: 11px;
padding:0px;
margin:0px;
background-image: url(t.gif);
}
#container {
width:800px;
height: 100%;
border: solid;
Border-left-width: 5px;
border-color: #ffffff;
margin-top:20px;
margin-bottom: 20px;
margin-right:auto;
margin-left:auto;
padding:0px;
background-color: #ffffff;
text-align:left;
}
#left {
width:175px;
padding:0px;
float:left;
background:#F8F7EF;
}
#content {
width:430px;
padding:0px;
float:left;
background:#eee;
}
div#content {
min-height: 300px;
height:expression(this.scrollHeight > 300 ? "auto":"300px");
text-align:left;
}
#right {
width: 175px;
padding: 0px;
float: right;
background: #F8F7EF;
margin: 0px;
margin-right:auto;
margin-left:auto;
}
#header {
padding: 0px;
margin: 0px;
background-image: url(n.jpg);
height: 200px;
background-color:#ffffff;
}
p,h1,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
#header h1 {
font-size:14px;
padding:10px;
margin:0px;
}
#right p { font-size:10px}
}
#copyright {
bottom: 0px;
position: absolute;
height: 50px;
width: 100%;
background-color: rgb(255,255,243);
color: #666666;
text-align: center;
}
Und hier meine DIV aufstellung:
<html>
<head>
<title>:::..UNDER CONSTRUCTION..:::</title>
</head>
<body>
###DOKUMENT###
<div id="container">
<div id="header">
banner
</div>
<div id="left">###MENU###</div>
<div id="content">###CONTENT_NORMAL### </div>
<div id="right">###CONTENT_RIGHT### </div>
<div id="copyright">
<p>@Webmaster </p>
</div>###DOKUMENT###</div>
</body>
</html>
|
//edit by barett
benutz bitte die code-tags
Zuletzt bearbeitet von Barett am Do 02.02.2006 19:37, insgesamt 1-mal bearbeitet
|
|