Hallo,

ik ben begonnen aan een UserArea voor mijn website.
Maar ik krijg steeds een witruimte boven mijn sidebar en content.
Ook zou ik graag hebben dat mijn sidebar helemaal tot aan de onderkant van mijn website gaat...
Dit wil maar niet lukken...

Hieronder de code:

<div id="lside">
            <a href="userarea.php?p=home">Home</a><br/>
            <a href="userarea.php?p=page1">Page 1</a><br/>
            <a href="userarea.php?p=page2">Page 2</a><br/>
        </div>
        <div id="content">
            <h2>UserArea</h2>
        </div>


body {
    margin: 0;
}

#lside {
    width: 300px;
    float: left;
    background-color: red;
}

#content {
    margin-left: 300px;
}


Mvg
Kijk eens met de developer toos (vaak Ctrl+Shift+i) of recht-klik in je pagina en dan element inspecteren/checken.
Je ziet dan misschien waar de witruimte vandaan komt.

Met het beetje dat je nu geeft is dat niet te achterhalen.
Volgensmij is die margin-left van #content ook niet nodig.
Ik kan het echt niet vinden de developer tools zeggen dat het probleem in de <head> tags zit... Ik zie daar geen probleem.

<!DOCTYPE html>
<html>
    <head>
        <title>UserArea</title>
        <meta charset="utf-8" />
        <link href="assets/images/favicon.ico" rel="icon">
        <link rel="stylesheet" type="text/css" href="css/userarea_style.css">
        <script src="js/main.js"></script>
    </head>
    <body>        <div id="lside">
            <a href="userarea.php?p=home">Home</a><br/>
            <a href="userarea.php?p=page1">Page 1</a><br/>
            <a href="userarea.php?p=page2">Page 2</a><br/>
        </div>
        <div id="content">
            <h2>UserArea</h2>
            <p>Welkom Onbekende</p>
            <p>Gebruikersnaam: Onbekend</p>
            <p>Lid van familie(s): Nog te maken</p>
        </div>
    </body>
</html>


[size=xsmall]Toevoeging op 27/09/2015 10:15:15:[/size]

Er is ook tussen alle regels die ik met de <p></p> en de <h2></h2> tags extra ruimte.

[size=xsmall]Toevoeging op 27/09/2015 10:20:18:[/size]

Ik heb het allemaal in een JSFiddle gezet: https://jsfiddle.net/z1tjuL8o/
Het zou kunnen dat het door je h2-tag komt omdat die nog een top en bottom margin heeft.

Edit:
Ja, het klopt want maak er eens een andere tag van zoals b-tag dan heb je geen ruimte.
Waar geef ik die h2-tag dan top en bottom?
Nergens, het hoort bij het element.
Hoe los ik dat dan op?
De margins van je h2-tag te verwijderen zoals:[code]h2 {
margin: 0;
}

Reageren