Margin

Hallo,

Ik heb nu het probleem, dat waarschijnlijk meer mensen hebben, dat een vak hoger word als de div eronder een margin-top geeft.
Ik wil ruimte tussen deze 2 vakken creeeren, alleen met de margin-top code word de bovenste gewoon hoger, waardoor er dus geen ruimte tussen komt.

Dit is de situatie:
Links is zonder margin, rechts met.
De bedoeling is nu dus dat er gewoon ruimte tussen komt, en dat dat dus die licht grijze kleur heeft.
Helaas gebeurt dit nu niet.
Codes van de 2delen:

CSS

Spoiler tonen

/***** Menu *****/
.menu{
    height:44px;
}
.menu ul{ padding:0; margin:0; }
.menu ul li{ list-style:none; margin:0; padding:0; display:inline; }
.menu a{ display:inline-block; height:37px; margin-top:3px; color:#FFF; }
.menu a span{ display:inline-block; height:26px; margin-left:5px; font-size:13px; padding-left:9px; padding-top:10px; padding-right:18px; margin-top:1px; }
.menu a:hover{ background-image:url(../images/layout/menuhoverbg.png); color:#30c1f1; }
.menu a span:hover{ background-image:url(../images/layout/menuhoverbgr.png); background-position:right; background-repeat:no-repeat; }

/***** Forum *****/

.forum{
    width:940px;
    background-color:#FFF;
    margin-top:50px;
}

.forum .menubar{ width:925px; height:33px; background-color:#2b2b2b; color:#d8d7d5; font-size:14px; padding-left:15px; }
.forum .menubar a{ display:inline-block; padding-left:10px; padding-right:10px; background-image:url(../images/layout/forummenubg.png); background-repeat:no-repeat; background-position:left, center; height:24px; padding-top:9px; margin:0; }
.forum .menubar a:hover{ background-color:#1c1c1c; background-image:none; }
.forum .menubar a.first{ background-image:none; }
.forum .menuunderbar{ height:13px; width:940px; background-color:#1c1c1c; }

HTML

Spoiler tonen

<div class="menu">
    <div class="houder">
        <ul>
            <li><a href="[COLOR= #0000BB]<?php[/COLOR] [URL="http://www.php.net/echo"]echo[/URL] _ROOT_[COLOR= #007700];[/COLOR] ?>"><span>Home</span></a></li>
            <li><a href=""><span>Over </span></a></li>
            <li><a href="[COLOR= #0000BB]<?php[/COLOR] [URL="http://www.php.net/echo"]echo[/URL] _ROOT_[COLOR= #007700];[/COLOR] ?>forum"><span>Het Forum</span></a></li>
            <li><a href=""><span>De Marktplaats</span></a></li>
            <li><a href=""><span>Geld Verdienen</span></a></li>
            <li><a href=""><span>Tutorials</span></a></li>
            <li><a href="[COLOR= #0000BB]<?php[/COLOR] [URL="http://www.php.net/echo"]echo[/URL] _ROOT_[COLOR= #007700];[/COLOR] ?>profielbewerken"><span>Gebruikerspaneel</span></a></li>
            <li><a href=""><span>Jouw Profiel</span></a></li>
        </ul>
    </div>
</div>

<div class="content">
    <div class="houder">
        <div class="forum">
            <div class="menubar">
                <a href="" class="first">Het Forum</a>
                <a href="">Nieuws</a>
                <a href="">Contests</a>
                <a href="">Layouts</a>
            </div>
            <div class="menuunderbar"></div>
        </div>
    </div>
</div>

De bovenste ook wat margin geven?

Kyron schreef:

De bovenste ook wat margin geven?

Eeeeh... Nee....
Dat is niet echt wat er moet gebeuren he

Dan zonder margin-top werken css toevoegen:

.space {height: 10px;}

html:

<div class="menu">
    <div class="houder">
        <ul>
            <li><a href="[COLOR= #0000BB]<?php[/COLOR] [URL="http://www.php.net/echo"]echo[/URL] _ROOT_[COLOR= #007700];[/COLOR] ?>"><span>Home</span></a></li>
            <li><a href=""><span>Over </span></a></li>
            <li><a href="[COLOR= #0000BB]<?php[/COLOR] [URL="http://www.php.net/echo"]echo[/URL] _ROOT_[COLOR= #007700];[/COLOR] ?>forum"><span>Het Forum</span></a></li>
            <li><a href=""><span>De Marktplaats</span></a></li>
            <li><a href=""><span>Geld Verdienen</span></a></li>
            <li><a href=""><span>Tutorials</span></a></li>
            <li><a href="[COLOR= #0000BB]<?php[/COLOR] [URL="http://www.php.net/echo"]echo[/URL] _ROOT_[COLOR= #007700];[/COLOR] ?>profielbewerken"><span>Gebruikerspaneel</span></a></li>
            <li><a href=""><span>Jouw Profiel</span></a></li>
        </ul>
    </div>
</div>

<div class="space"></div>

<div class="content">
    <div class="houder">
        <div class="forum">
            <div class="menubar">
                <a href="" class="first">Het Forum</a>
                <a href="">Nieuws</a>
                <a href="">Contests</a>
                <a href="">Layouts</a>
            </div>
            <div class="menuunderbar"></div>
        </div>
    </div>
</div>

Marjolein schreef:

Dan zonder margin-top werken css toevoegen:

.space {height: 10px;}

html:

<div class="menu">
    <div class="houder">
        <ul>
            <li><a href="[COLOR= #0000BB]<?php[/COLOR] [URL="http://www.php.net/echo"]echo[/URL] _ROOT_[COLOR= #007700];[/COLOR] ?>"><span>Home</span></a></li>
            <li><a href=""><span>Over </span></a></li>
            <li><a href="[COLOR= #0000BB]<?php[/COLOR] [URL="http://www.php.net/echo"]echo[/URL] _ROOT_[COLOR= #007700];[/COLOR] ?>forum"><span>Het Forum</span></a></li>
            <li><a href=""><span>De Marktplaats</span></a></li>
            <li><a href=""><span>Geld Verdienen</span></a></li>
            <li><a href=""><span>Tutorials</span></a></li>
            <li><a href="[COLOR= #0000BB]<?php[/COLOR] [URL="http://www.php.net/echo"]echo[/URL] _ROOT_[COLOR= #007700];[/COLOR] ?>profielbewerken"><span>Gebruikerspaneel</span></a></li>
            <li><a href=""><span>Jouw Profiel</span></a></li>
        </ul>
    </div>
</div>

<div class="space"></div>

<div class="content">
    <div class="houder">
        <div class="forum">
            <div class="menubar">
                <a href="" class="first">Het Forum</a>
                <a href="">Nieuws</a>
                <a href="">Contests</a>
                <a href="">Layouts</a>
            </div>
            <div class="menuunderbar"></div>
        </div>
    </div>
</div>

Al geprobeert, geeft hetzelfde effect

is je achtergrond kleur dan wel lichtgrijs, anders werkt het idd niet

Marjolein schreef:

is je achtergrond kleur dan wel lichtgrijs, anders werkt het idd niet

Spacer had inderdaad niet die achtergrond kleur, nu staat het goed.
Maar weet iemand hoe het kan dat hij die kleur meeneemt?

dan zou ik je gehele css + html eens moeten bekijken hoe je het opgebouwd heb

Marjolein schreef:

dan zou ik je gehele css + html eens moeten bekijken hoe je het opgebouwd heb

Maar licht niet persee aan deze, heb het wel vaker.
Normaal kan je dit zo oplossen door padding-top te gebruiken, want dan neemt hij het niet mee, maar hier had dat gedeelte een bgcolor, dus kon dat ook niet

Lege div is sowieso niet geweldig.

Eleky schreef:

Eerdere citaten tonen

Marjolein schreef:

dan zou ik je gehele css + html eens moeten bekijken hoe je het opgebouwd heb

Maar licht niet persee aan deze, heb het wel vaker.
Normaal kan je dit zo oplossen door padding-top te gebruiken, want dan neemt hij het niet mee, maar hier had dat gedeelte een bgcolor, dus kon dat ook niet

ja maar ik heb het nooit, dus ligt het toch aan de manier waarop jij je css en html opbouwt dan