XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   layout mit css - problem (http://xhtmlforum.de/showthread.php?t=38096)

xxlcss 29.12.2005 15:52

layout mit css - problem
 
Hi,


arbeite mit ein CMS 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 spalten
footer 100% so breit wie des container

Problem:
Der footer verscheibt 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.

Kann mir jemand Helfen??? bitte?!
xxlcss


Hier mein 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>Template</title>
</head>

<body>

###TEMPDOK###
<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">


@Webmaster </p>
</div>###TEMPDOK###</div>

</body>

</html>

Sentinel 30.12.2005 03:25

float:none;
clear:both;

im footer sollte helfen.

ps: für code sachen (egal ob css oder html) immer die code funktion nutzen. 8)


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:52 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023