Div over andere Div
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
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)
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
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>
.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
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?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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;
}
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;
}
