[CSS] Border geeft problemen met float - Softwareontwikkeling

vrijdag 28 augustus 2009 10:03

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Hallo,

Ik probeer al de hele tijd om een website te maken die enkel gebruik maakt van divs, maar ik kom steeds weer andere problemen tegen.

Een van die problemen is een float-probleem. Alles staat mooi, tot als ik de borders ga aanpassen. Mijn shortcuts zakken dan onder de inhoud ( maar blijven nog altijd rechts staan ).

Ik heb even een screenshot ge-upload, om de verschillen te kunnen laten zien. De kleuren zijn gewoon gebruikt om de verschillende div's duidelijk te maken.

Met border:
Afbeeldingslocatie: http://i27.tinypic.com/2z7qz40.png

Afbeeldingslocatie: http://i27.tinypic.com/2z7qz40.png

Zonder border:
Afbeeldingslocatie: http://i26.tinypic.com/2yysi7l.png

De code is als volgt:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<body>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title></title>
    <link href="file:///home/ruzzel/Desktop/layout.css" rel="stylesheet" type="text/css" />
    </head>

<body>
    <div id="container">
        <div id="banner">Banner</div>
        <div id="nav-menu">
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>     
                <li>Item 4</li>
                <li>Item 5</li>
                <li>Item 6</li>
            </ul>
        </div>
        <div id="kern">
            <div id="inhoud">Inhoud</div>
            <div id="shortcuts">
                <div id="shortcut1">Shortcut 1</div>
                <div id="shortcut2">Shortcut 2</div>
                <div id="shortcut3">Shortcut 3</div>
                <div id="shortcut4">Shortcut 4</div>
            </div>
        </div>
        <div id="footer">Footer</div>
    </div>
</body>
</html>

En de css:

Cascading Stylesheet:

@charset UTF-8

body{
background-color: #000000;
}

#container{
background-color: red;
width: 800px;
margin-left: auto;
margin-right: auto;
}

#banner{
background-color: blue;
}

#nav-menu{
background-color: yellow;
}

#kern{
background-color: aqua;
}

#inhoud{
background-color: BlueViolet;
float: left;
width: 600px;
margin-right: 50px;
border: 1px solid #CCCCCC;
}

#shortcuts{
background-color: DeepPink;
float: right;
width: 150px;
}

#shortcut1{
margin-bottom: 15px;
background-color: Khaki;
clear: both;
}

#shortcut2{
margin-bottom: 15px;
background-color: Khaki;
}

#shortcut3{
margin-bottom: 15px;
background-color: Khaki;
}

#shortcut4{
margin-bottom: 15px;
background-color: Khaki;
}

#footer{
background-color: green;
clear:both;
display:block;
}

vrijdag 28 augustus 2009 10:19

Acties:

0 Henk 'm!

mcDavid

De border valt búiten het element. Je zult dus de breedte van je elementen moeten aanpassen als je een border toevoegt.

vrijdag 28 augustus 2009 10:23

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Bedankt, het probleem is al meteen opgelost. Ik heb mijn inhoud-div even 2px kleiner gemaakt, en nu valt alles mooi op zijn plaats.