[CSS] Menu

Hey,

Ik ben bezig met een basing van een layout, alleen nu loop ik tegen een probleem aan.
Ik heb een koptekst (h1) en een menu (divje).
De menudiv ligt boven de koptekst, alleen de koptekst ligt té ver naar beneden.
Als ik margin-top: -1 doe; dan verspringt alles.

Voorbeeld:
CSS:

div#content { width: 400px; margin-top: 25px; margin-left: 10px; float: left; }
    div#content h1 { width: 750px; height: 44px; background: url(img/content_kop.png) no-repeat; font: 11px Verdana; color: #fff; padding-left: 10px; line-height: 44px; margin: 0; overflow: hidden; }
    
    div#content div#menu { width: 760px; margin: 0; }
        div#content div#menu ul { list-style: none; margin: 0; padding: 0; }
        div#content div#menu li { width: 121px; height: 38px; background: url(img/menu_achtergrond.png) no-repeat; float: left; margin-right: 8px; }
        div#content div#menu li.eerste { width: 121px; height: 41px; background: url(img/menu_achtergrond_eerste.png) no-repeat; float: left; margin-right: 8px; }
            div#content div#menu li a { width: 121px; height: 38px; display: block; font: 11px Verdana; color: #fff; text-decoration: none; line-height: 38px; text-align: center; }

Groet,

Erik.

Voorbeeld werkt niet!
EDIT: Geef koptekst postition:absolute;

Nu wel.

Zie edit

Moet je geen padding-top: gebruiken?

Dat werkt niet, want dan staat de koptekst bóven het menu; dus dan zie je die niet meer. HTML:

<div id="content">
            <div id="menu">
                <ul>
                    <li class="eerste"><a href="#" title="Home" alt="Home">Home</a></li>
                      <li><a href="#" title="Crew" alt="Crew">Crew</a></li>
                </ul>
            </div>
            <h1>Koptekst</h1>
            testt
        </div>

Groet,

Erik.

Mikek schreef:

Moet je geen padding-top: gebruiken?

Nee, das alleen voor binnen de div, niet voor de locatie

div#content { width: 400px; margin-top: 25px; margin-left: 10px; float: left; }
    div#content h1 { width: 750px; height: 44px; background: url(img/content_kop.png) no-repeat; font: 11px Verdana; color: #fff; padding-left: 10px; line-height: 44px; margin: 0; overflow: hidden; position:absolute; margin-top:40px; }
    
    div#content div#menu { width: 760px; margin: 0; }
        div#content div#menu ul { list-style: none; margin: 0; padding: 0; }
        div#content div#menu li { width: 121px; height: 38px; background: url(img/menu_achtergrond.png) no-repeat; float: left; margin-right: 8px; }
        div#content div#menu li.eerste { width: 121px; height: 41px; background: url(img/menu_achtergrond_eerste.png) no-repeat; float: left; margin-right: 8px; }
            div#content div#menu li a { width: 121px; height: 38px; display: block; font: 11px Verdana; color: #fff; text-decoration: none; line-height: 38px; text-align: center; }

EDIT: Sorry voor dubbelpost...

Met position: absolute werkt het bijna, alleen moet ik dan de koptekst naar beneden duwen.
Als ik margin-top: 10px doe, dan blijft ie gewoon het zelfde.
Hoe kan ik dat verhelpen?

Owh ik dacht dat het om de tekst ging.
Ik denk dat het komt omdat je plaatje niet plat is

Ik heb het al gefixt. Code:

div#content { width: 400px; margin-top: 25px; margin-left: 10px; float: left; }
    div#content h1 { width: 750px; height: 44px; background: url(img/content_kop.png) no-repeat; font: 11px Verdana; color: #fff; padding-left: 10px; line-height: 44px; position: absolute; margin-top: 38px; }
    
    div#content div#menu { width: 760px; margin: 0; }
        div#content div#menu ul { list-style: none; margin: 0; padding: 0; }
        div#content div#menu li { width: 121px; height: 38px; background: url(img/menu_achtergrond.png) no-repeat; float: left; margin-right: 8px; }
        div#content div#menu li.eerste { width: 121px; height: 41px; background: url(img/menu_achtergrond_eerste.png) no-repeat; float: left; margin-right: 8px; }
            div#content div#menu li a { width: 121px; height: 38px; display: block; font: 11px Verdana; color: #fff; text-decoration: none; line-height: 38px; text-align: center; }