2 binnenste divs en dan buitenste mee laten rekken

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Dennis meijer

dennis meijer

09/07/2011 18:32:11
Quote Anchor link
Mensen,

Misschien is het heel makkelijk maar ik heb 1 div en daarbinnen is 1 bovenste div met een welkomsttekst.

En daaronder komt een div met gewone tekst. en die onderste is uitrekbaar.

Hoe krijg ik het dan voor elkaar om de bovenliggende div mee te laten rekken?

Zodat die altijd iets groter blijft dan de andere 2 bij elkaar.

Een link naar een oplossing isook goed maar ik kon het niet vinden.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
        <div id="Tekstvlak">
        
            <div id="Tekstvlak-Welkom">
                welkom
            </div>
            
            <div id="Tekstvlak-Tekst">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante magna, adipiscing at feugiat vel, ultricies sed tellus. Etiam pellentes-
            que,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante magna, adipiscing at feugiat vel, ultricies sed tellus. Etiam pellentes-
            que,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante magna, adipiscing at feugiat vel, ultricies sed tellus. Etiam pellentes-
            que,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante magna, adipiscing at feugiat vel, ultricies sed tellus. Etiam pellentes-
            que,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante magna, adipiscing at feugiat vel, ultricies sed tellus. Etiam pellentes-
            que,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante magna, adipiscing at feugiat vel, ultricies sed tellus. Etiam pellentes-
            que,
            </div>
            
        </div>



Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
#Tekstvlak {
    position: absolute;
    border: 1px solid #d7d7d7;
    width: 930px;
    height: auto;
    left: 28px;
    top: 370px;
}

#Tekstvlak-Welkom {
    position: absolute;
    width: 890px;
    height: 52px;
    left: 20px;
    padding-top: 15px;
    border-bottom: 1px solid #d7d7d7;
    font-family: "helvetica";
    font-size: 35px;
    letter-spacing: 2px;
    
}

#Tekstvlak-Tekst {
    position: absolute;
    width: 890px;
    left: 20px;
    top: 80px;
    font-family: "verdana";
    font-size: 12px;
}
 
PHP hulp

PHP hulp

16/05/2021 11:00:46
 
Bas Kreleger
Beheerder

Bas Kreleger

09/07/2011 18:35:29
Quote Anchor link
Je wilt dat de 'tekstvlak' div dus meerekt, zodat de border die je daarop hebt welkom en tekst divs bedekt? Het is in ieder geval niet nodig om positioning te gebruiken. In principe moet je dit ten alle tijden vermijden tenzij je niet anders kunt.
 
Dennis meijer

dennis meijer

09/07/2011 18:36:44
Quote Anchor link
Ja ik wil dat de div 'tekstvlak' met zijn border om de andere 2 komen te liggen.

Ook als de onderste div veel groter word.
 
Tobias Tobias

Tobias Tobias

09/07/2011 19:22:52
Quote Anchor link
clear: both; in #Tekstvlak?
 
Dennis meijer

dennis meijer

09/07/2011 19:35:27
Quote Anchor link
Nee maakt geen verschil
 
The Force

The Force

09/07/2011 19:55:29
Quote Anchor link
Dan moet je de divs erbinnen niet absoluut positioneren ten opzichte van de pagina maar relatief, ten opzichte van zijn parent.
 
Dennis meijer

dennis meijer

13/07/2011 16:18:51
Quote Anchor link
Ik zit met nog zo een probleemplje:

heb deze opzet van html code

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
<div id="Content">
    
    <div id="Content-Prijsvraag">

    </div>
    
    <div id="Content-Tweet">

    </div>

</div>


en deze css
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#Content {
    position: relative;
    background-image: url(../images/Content_Boven.png);
    background-repeat: repeat-x;
    top: 66px;
    width: 100%;
    min-height: 200px;
    clear: both;
}

#Content-Prijsvraag {
    position: relative;
    width: 640px;
    height: 63px;
    top: 10px;
    left: 50%;
    margin-left: -320px;
}

#Content-Tweet {
    position: relative;
    width: 600px;
    min-height: 21px;
    left: 50%;
    top: 80px;
    margin-left: -300px;

}


de div #Content moet uitrekbaar zijn want daaronder zit de footer en die moet automatisch verder naar beneden schuiven als content groter word.


de div #Content-prijsvraag heeft een vaste hoogte maar #Content-Tweet moet uitrekbaar zijn.

En naarmate die uitrekt moet de div #Content meerekken.

Hoe krijg ik dit voor elkaar?
 
Wouter J

Wouter J

13/07/2011 17:10:12
Quote Anchor link
Zoals hierboven staat, niet met positioneren gaan werken. Gebruik gewoon het float model, dit is veel beter.

Verder moet je dan kijken naar faux columns. En geen vaste hoogtes meegeven, maar werken met min-height.
 
Kevin Ellen

Kevin Ellen

13/07/2011 17:16:00
Quote Anchor link
Haal de height in Tekstvlak weg. Is te proberen?
 
Dennis meijer

dennis meijer

13/07/2011 17:58:00
Quote Anchor link
Als ik zonder positioneren ga werken dan gaan alles divs verkeerd staan omdat ik ze dan geen left kan meegeven.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.