Div over andere Div

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Yesyah Deli

Yesyah Deli

08/01/2013 08:29:23
Quote Anchor link
Ik wil graag een div over een andere div zetten maar het lukt niet, omdat ik padding en margin heb gebruikt passen ze niet naast elkaar, weet iemand een oplossing?

dit is mijn code:

.content {
background-color: #FFF;
height: 600px;
width: 930px;
float: right;
}

}.web_content {
float: left;
width: 705px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #000;
background-color: #FFF;
background-image: url(images/contentbg.gif);
background-repeat: no-repeat;
height: 185px;
padding-top: 13px;
padding-left: 13px;
margin-top: 5px;
margin-left: 5px;
}
.content-right-box {
height: 195px;
width: 200px;
background-image: url(/images/contenrightbg.gif);
color: #000;
background-repeat: no-repeat;
z-index: 999;
float: right;
margin-top: 5px;
margin-right: 5px;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
}


<div class="content">
<div class="web_content">TEXT</div>
<div class="content-right-box">TEXT 2</div>
</div>
Gewijzigd op 08/01/2013 08:30:48 door Yesyah Deli
 
PHP hulp

PHP hulp

23/09/2021 11:38:55
 
Moose -

Moose -

08/01/2013 08:42:52
Quote Anchor link
Moet je met position relative en position absolute doen. Anders krijg je ze nooit over mekaar
 
Yesyah Deli

Yesyah Deli

08/01/2013 14:18:07
Quote Anchor link
Kun je me daar een voorbeeld van geven?
 
Kris Peeters

Kris Peeters

08/01/2013 16:11:06
Quote Anchor link
yep,

Je geeft de container position: relative
De container wordt daardoor het nieuwe nulpunt voor de child elements die position: absolute hebben.

Hier een vereenvoudigde css; kwestie dat je gemakkelijker kan zien wat er aangepast is.
Basically kan je dan "margin-left" vervangen door "left" (dito voor de andere richtingen)

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
31
32
33
34
35
36
37
38
39
<style>
  .content {
    height: 600px;
    width: 930px;
    
    position: relative;
  }

  .web_content {
    background-color: #99ffff;
    width: 705px;
    height: 185px;
    padding-top: 13px;
    padding-left: 13px;
    
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 5;
  }

  .content-right-box {
    background-color: #ff99ff;
    height: 195px;
    width: 200px;
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
  }
</style>
<div class="content">
  <div class="web_content">TEXT</div>
  <div class="content-right-box">TEXT 2</div>
</div>



(vreemd ... ik heb dit zelfde verhaal al drie keer verteld, de voorbije 24 uur)
Gewijzigd op 08/01/2013 16:12:23 door Kris Peeters
 
No One

No One

08/01/2013 16:13:07
Quote Anchor link
@Kris...zoeken is moeilijk tegenwoordig ;)
 
Yesyah Deli

Yesyah Deli

08/01/2013 16:25:50
Quote Anchor link
Ik snapt het, bedankt!

Toevoeging op 09/01/2013 06:30:40:

Ik wil graag de height van div.content op auto / 100% zetten maar wanneer ik dit doe wordt de pagina rommelig.. wat kan ik hier voor doen?
 
Kris Peeters

Kris Peeters

09/01/2013 10:00:58
Quote Anchor link
100% van wat? Van het scherm (full screen)?
 
Yesyah Deli

Yesyah Deli

09/01/2013 10:08:12
Quote Anchor link
Ja of dat hij op auto gaat dus als ik een pagina heb met veel content dat div.content automatisch de height aanpast. Het ziet er nu zo uit:
http://ginomusic.nl/voorbeeld.png
 
Kris Peeters

Kris Peeters

09/01/2013 11:21:10
Quote Anchor link
Ja, okay, dan moet .web_content opnieuw vrijgemaakt worden; terug op position: relative. Dan groeit .content mee als .web_content groeit.

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
  .content {
    min-height: 600px;
    width: 930px;
    position: relative;
    padding-top: 5px;   /* oorspronkelijk de margin-top van .content-right-box */
  }
  .web_content {
    background-color: #99ffff;
    width: 705px;
    padding-top: 13px;
    padding-left: 13px;
    margin-left: 5px;
    min-height: 185px;
    position: relative;
  }
 
Yesyah Deli

Yesyah Deli

09/01/2013 14:24:51
Quote Anchor link
Bedankt Kris!
 
Reshad F

Reshad F

09/01/2013 14:26:40
Quote Anchor link
Ik zou er zelf ook een overflow: none; aan je content class toevoegen.
 



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.