Container DIV hoogte met absolute DIVs erin - Softwareontwikkeling

dinsdag 9 juni 2009 15:10

Acties:

0 Henk 'm!

Topicstarter

Stel ik heb een container DIV met daarin 2 absoluut gepositioneerde DIVs erin, kan ik dan de hoogte van de container DIV afhankelijk maken van de hoogte van de absoluut gepositioneerde DIVs?

Ik wil namelijk een centrale kolom van 900px breed met daarin links een DIV met navigatie en rechts daarvan een DIV met content, maar ik moet -om bepaalde redenen- die 2 DIVs absoluut positioneren, absoluut vanaf het 0,0 punt van de container DIV.
Die centrale kolom moet een witte achtergrond kleur hebben, de body zelf heeft een lichtgrijze achtergrond kleur.

Vooralsnog krijg ik het bij deze 2 absoluut gepositioneerde DIVs alleen voor elkaar dat de hoogte van die container DIV niet mee gaat met de hoogte van de 2 absoluut gepositioneerde DIVs....

dinsdag 9 juni 2009 15:13

Acties:

0 Henk 'm!

Noork

Heb je een voorbeeld?

dinsdag 9 juni 2009 15:14

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

Waarom zou je die divs absoluut absolute moeten positioneren?

Daarnaast mis ik ook een mooie opzet qua code, die ook aangeeft wat je zelf al hebt geprobeerd, waarop je gezocht hebt en waarom de resultaten niet gaf wat je wilde

We gaan hier natuurlijk niet alles voor je voorkauwen

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 9 juni 2009 15:26

Acties:

0 Henk 'm!

deBennie

Topicstarter

Het gaat om een bestaande site waarbij de navigatie rechts van de content zit. Ik moet nu met de bestaande DIV code waar ik niks aan mag veranderen de navigatie links van de content plaatsen. Ik mag enkel de stylesheet aanpassen.

Origineel worden de navigatie DIV en content DIV left gefloat tov elkaar. Nu moet ik ze dus andersom zetten. Ik denk dus, via het absoluut positioneren van beide DIVs.

Nadeel daarvan is -voor zover ik weet en ik in Google heb kunnen vinden- dat de container DIV die eromheen zit niet in hoogte met de 2 absolute DIVs meegaan.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<title>TEST</title>
<style type="text/css">
    html, body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, address {
        margin: 0;
        padding: 0;
    }
    a, a:hover{
        color: #000000;
    }
    a:hover{
        text-decoration: none;
    }
    body, textarea, input{
        color: #000000;
        font: 11px/18px Arial;
    }
    img{
        border: 0;
    }
    p{
        margin: 0;
        padding: 0;
    }
    
    .container{
        margin:20px auto;
        position:relative;
        width:980px;
    }
    .navigatie{
        position:absolute;
        top:0px;
        left:0px;
        width:200px;
    }
    .content{
        position:absolute;
        top:0px;
        left:200px;
        width:780px;        
    }
</style>

</head>
<body>
<div class="container">
    <div class="content">
        content
    </div>
    <div class="navigatie">
        <ul>
            <li><a href="">menu item 1</a></li>
            <li><a href="">menu item 2</a></li>
            <li><a href="">menu item 3</a></li>
            <li><a href="">menu item 4</a></li>
            <li><a href="">menu item 5</a></li>
        </ul>
    </div>
</div>
</body>
</html>