Probleem met float oid.

**Youri v/d Bogert** · 28-02-2007, 13:08

Beste SD'ers,

Ben beetje aan het prutsen geweest met mn layout aangezien ik nog niet echt goed kan slicen wou ik het ff proberen, tot nu toe gaat alles goed. op een ding na. content rekt niet mee (zie screenshot voor meer informatie).

index.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <title>Untitled Document</title>
    
    <script type="text/javascript" src="images/mouseover.js"></script> 
    <link href="images/style.css" rel="stylesheet" type="text/css" />
    
</head>

<body>
    <div id="container">
    
        <div id="top">
            <div style="float: right">Woensdag, 28 February, 2007</div>
            <div style="float: left"><b>Beginpagina</b></div>
        </div>
        
        <div id="banner">
            <!---- leeg ---->
        </div>
        
        <div id="menu">
            <a href="#"><img src="images/buttons/beginpagina_hover.gif" hsrc="images/buttons/beginpagina_over.gif" border="0" /></a>
            <a href="#"><img src="images/buttons/mogelijkheden_hover.gif" hsrc="images/buttons/mogelijkheden_over.gif" border="0" /></a>
            <a href="#"><img src="images/buttons/rondleiding_hover.gif" hsrc="images/buttons/rondleiding_over.gif" border="0" /></a>
            <a href="#"><img src="images/buttons/demonstratie_hover.gif" hsrc="images/buttons/demonstratie_over.gif" border="0" /></a>
            <a href="#"><img src="images/buttons/contactopnemen_hover.gif" hsrc="images/buttons/contactopnemen_over.gif" border="0" /></a>
            <a href="#"><img src="images/buttons/helpfaq_hover.gif" hsrc="images/buttons/helpfaq_over.gif" border="0" /></a>
        </div>
        
        <div id="content_container">
        <div style="float: left">
            <div id="menu_persoonlijk">
                Gebruikersnaam<br />
                <input name="gebruikernsaam" type="text" class="loginclass" /><br />
                Wachtwoord<br />
                <input name="gebruikernsaam" type="password" class="loginclass" /><br />
                <small>Nog niet geregistreerd?</small>
                <br />
                
                <div id="loginbutton">
                    <img src="images/menus/login_button.gif" />
                </div>
            </div>
            
            <div id="menu_spacer">
                <!---- leeg ---->
            </div>
            
            <div id="menu_overige">
                    <a href="#"><img src="images/menus/statistieken_hover.gif" hsrc="images/menus/statistieken_over.gif" border="0" style="margin-bottom: 3px;" /></a>
                    <a href="#"><img src="images/menus/vraagopzoeken_hover.gif" hsrc="images/menus/vraagopzoeken_over.gif" border="0" style="margin-bottom: 3px;" /></a>
                    <a href="#"><img src="images/menus/ledenlijst_hover.gif" hsrc="images/menus/ledenlijst_over.gif" border="0" /></a>
            </div>
        </div>
        <div style="float:right">haha</div>
        </div>
        
        <div id="bottom">
            <!---- leeg ---->
        </div>
    </div>
</body>
</html>

style.css

Code:

body
{
    background-color: #2f3b46;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}

#container
{
    width: 696px;
    margin: 0px auto;
}
#top 
{
    background-image:url(top.gif);
    
    height: 20px;
    
    padding-left: 30px;
    padding-right: 35px;
    padding-top: 9px;
    
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
}
#banner
{
    background-image:url(banner.gif);
    height: 43px;
}
#menu 
{
    background-image:url(menu_bg.gif);
    height: 30px;
    
    padding-left: 32px;
    padding-top: 7px;
}
#content_container
{
    background-image:url(content_bg.gif);
}
#bottom 
{
    background-image:url(bottom.gif);
    
    height: 53px;
}
#menu_persoonlijk 
{
    background-image:url(menus/persoonlijke_menu.gif);
    background-repeat:no-repeat;

    height: 95px;
    width: 175px;
    
    margin-left: 19px;
    
    padding-left: 15px;
    padding-top: 20px;
    
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
}
#menu_overige 
{
    background-image:url(menus/overige_menu.gif);
    background-repeat:no-repeat;

    height: 78px;
    width: 175px;
    
    margin-left: 25px;
    
    padding-left: 9px;
    padding-top: 20px;
    
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
}
#menu_spacer
{
    background-image:url(menus/spacer.gif);
    
    height: 8px;
    
    margin-left: 20px;
    width:179px;
    
}
#loginbutton 
{
    padding-top: 5px;
    padding-left: 0px;
}
.loginclass
{
    border: 1px solid #BFBFBF;
    
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    
    width: 125px;
    height: 12px;
    
    padding: 0px;
    margin: 0px;
}

**Cédric Siroux** · 28-02-2007, 14:32

Code:

#bottom 
{
    background-image:url(bottom.gif);
    clear: both;
    height: 53px;
}

probeer dit eens aan te passen
clear: both; zorgt ervoor dat deze div (eventueel br) pas begint na een elemelt met een float erop, indien niet komt de rest er gewoon onder :)

**Youri v/d Bogert** · 28-02-2007, 15:14

Origineel gepost door Cédric Siroux

Code:

#bottom 
{
    background-image:url(bottom.gif);
    clear: both;
    height: 53px;
}

probeer dit eens aan te passen
clear: both; zorgt ervoor dat deze div (eventueel br) pas begint na een elemelt met een float erop, indien niet komt de rest er gewoon onder :)

Gedaan, de bottom gaat nu meer beneden, alleen de content container nog niet. Clear both daar ook op geprobeert maar dat doet het nog niet.

**Cédric Siroux** · 28-02-2007, 15:54

geef is een printscreen van wat je nu hebt + wat je wil bekomen ?
zou handig zijn

**Youri v/d Bogert** · 28-02-2007, 16:04

Origineel gepost door Cédric Siroux

geef is een printscreen van wat je nu hebt + wat je wil bekomen ?
zou handig zijn

Er is niets veranderd op de screenshot die staat geupload, de achtergrond van de content moet mee rekken, de content_container is dat.

**Cédric Siroux** · 28-02-2007, 16:52

ah zo :)
voeg dan ff voor het einde van je content container "<br style="clear:both;"/> toe

**Youri v/d Bogert** · 28-02-2007, 16:57

Origineel gepost door Cédric Siroux

ah zo :)
voeg dan ff voor het einde van je content container "<br style="clear:both;"/> toe

Dat heeft gewerkt, hartelijk dank !

**Cédric Siroux** · 28-02-2007, 17:51

graag gedaan hoor ;)

Probleem met float oid.