PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
J

Sidebar

Door John De Zon op 26-09-2015 18:58 gewijzigd op 26-09-2015 19:20
2.317 views
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
J
Jan de Laet
27-09-2015 09:24
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.
Marthijn Buijs
27-09-2015 09:46
Volgensmij is die margin-left van #content ook niet nodig.
J
John De Zon
27-09-2015 10:02
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/
Marthijn Buijs
27-09-2015 10:26 gewijzigd op 27-09-2015 10:27
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.
J
John De Zon
27-09-2015 10:31
Waar geef ik die h2-tag dan top en bottom?
Marthijn Buijs
27-09-2015 10:32
Nergens, het hoort bij het element.
J
John De Zon
27-09-2015 10:32
Hoe los ik dat dan op?
Marthijn Buijs
27-09-2015 10:34 gewijzigd op 27-09-2015 10:34
De margins van je h2-tag te verwijderen zoals:[code]h2 {
margin: 0;
}

Reageren

Inloggen om te reageren