?
Onbekende gebruiker
03-06-2009 19:31
Zet er eens bij height: auto;
Link gekopieerd
<div id="content">
// Hier al je content
<div style="clear:both"></div>
</div>
En nu zal de content wel mee moeten gaan ;)
Link gekopieerd
ok, even ter verduidelijking van Han zijn post.
<div id="content">
<p>inhoud</p>
<div style="clear:both"></div>
</div>
clear: both, zorgt ervoor dat de de div pas achter alle content gesloten wordt. Bij jou liep de content eigenlijk uit de div, waardoor je dus het gevoel krijgt dat de achtergrondkleur niet meerekt.
Link gekopieerd
Maar volgens mij werkt het niet als je de div float.
Link gekopieerd
Nog nooit problemen mee gehad eigenlijk.
Link gekopieerd
float of niet, het is op het object zelf, dus zou geen poblemen moeten opleveren
Link gekopieerd
Clear: Both; verwijderen werkt niet, het rekt niet mee.
Ik zal je de beide pagina's laten zien.
Style.css
body
{
margin: 0px;
}
#container
{
position: relative;
margin: 0px auto;
margin-top: 20px;
width: 700px;
}
#container_top
{
width: 700px;
height: 40px;
text-align: center;
background-image: url('img/container_top.png');
background-repeat: no-repeat;
}
#container_header
{
width: 700px;
height: 100px;
background-image: url(img/container_header.png);
background-repeat: no-repeat;
}
#container_mid
{
width: 700px;
height: 20px;
background-image: url('img/container_mid.png');
background-repeat: no-repeat;
}
#navbar
{
width: 700px;
height: 60px;
text-align: center;
background-color: #ffba00;
margin: 0px;
}
.navbar_btn
{
margin: 0px;
width: 100px;
height: 34px;
text-align: center;
background-image: url('img/navbar_btn.png');
background-repeat: no-repeat;
border-left: solid #ffba00 5px;
border-right: solid #ffba00 5px;
color: #FFFFFF;
font-size: 14px;
}
table
{
border-spacing: 0px;
position: relative;
margin: 0px auto;
}
#content
{
height: 400px;
height: auto !important;
min-height: 400px;
width: 700px;
background-image: url('img/contentbg.png');
background-repeat: repeat;
padding-bottom: 10px;
}
.bar1
{
margin-bottom: 10px;
}
.bar_header
{
width: 175px;
height: 40px;
background-image: url('img/bar_header.png');
background-repeat: no-repeat;
color: #FF6600;
font-size: 16px;
text-align: center;
}
.bar_content
{
width: 173px;
min-height: 118px;
background-color: #FFFFFF;
}
.bar_bottom
{
width: 173px;
min-height: 20px;
background-image: url('img/bar_bottom.png');
}
#collapse1
{
width: 175px;
margin-left: 15px;
margin-right: 15px;
float: left;
}
#collapse2
{
width: 225px;
float: left;
margin-top: -49px;
margin-left: 32px;
margin-right: 15px;
}
#bar2
{
margin-top: 50px;
margin-bottom: 10px;
}
#page_header
{
width: 225px;
height: 40px;
background-image: url('img/page_header.png');
background-repeat: no-repeat;
color: #FF6600;
font-size: 16px;
text-align: center;
}
#page_content
{
width: 225px;
min-height: 302px;
background-color: #FFFFFF;
}
#page_bottom
{
width: 225px;
height: 23px;
background-image: url('img/page_bottom.png');
}
#collapse3
{
width: 175px;
margin-left: 15px;
margin-right: 15px;
float: right;
}
.bar3
{
margin-bottom: 10px;
}
#container_bottom
{
width: 700px;
height: 23px;
clear: both;
background-image: url('img/container_bottom.png');
}
index.htm
<!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" xml:lang="en">
<head>
<title>Habbo page</title>
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="container">
<div id="container_top">
</div>
<div id="container_header">
</div>
<div id="container_mid">
</div>
<div id="navbar">
<table>
<tr>
<td class="navbar_btn"><b>Link</b></td>
<td class="navbar_btn"><b>Link</b></td>
<td class="navbar_btn"><b>Link</b></td>
<td class="navbar_btn"><b>Link</b></td>
<td class="navbar_btn"><b>Link</b></td>
<td class="navbar_btn"><b>Link</b></td>
</tr>
</table>
</div>
<div id="content">
<div id="collapse1">
<div class="bar1">
<div class="bar_header">
<b>Content</b>
</div>
<div class="bar_content">
</div>
<div class="bar_bottom">
</div>
</div>
<div class="bar1">
<div class="bar_header">
<b>Content</b>
</div>
<div class="bar_content">
</div>
<div class="bar_bottom">
</div>
</div>
</div>
<div id="collapse2">
<div id="bar2">
<div id="page_header">
<b>Content</b>
</div>
<div id="page_content">
</div>
<div id="page_bottom">
</div>
</div>
</div>
<div id="collapse3">
<div class="bar3">
<div class="bar_header">
<b>Content</b>
</div>
<div class="bar_content">
</div>
<div class="bar_bottom">
</div>
</div>
<div class="bar3">
<div class="bar_header">
<b>Content</b>
</div>
<div class="bar_content">
lala<p>lala<p>lala<p>lala<p>lala<p>lala<p>lala<p>lala<p>vlala<p>lala<p>lala<p>
</div>
<div class="bar_bottom">
</div>
</div>
</div>
</div>
<div id="container_bottom">
</div>
</div>
</body>
</html>
Link gekopieerd
