Probleem % en vaste breedte
ik ben bezig met een lay-out waarbij ik een div (waarin tekst komt) naast een div waarin een afbeelding komt moet plaatsen.
Gezien de lay-out meerekt (liquid) met de grootte van je scherm, en het feit dat de afbeeldingsdiv een vaste breedte heeft, moet dus de div waarin de text staat altijd de ruimte opvullen tot aan de afbeelding.
Hoe doe ik dat? Het wil me nu echt niet lukken.
Code (php)
1
2
3
4
2
3
4
____________________________
| | |
| Breedte in % | pix |
|__________________|________|
| | |
| Breedte in % | pix |
|__________________|________|
Hopelijk dat het zo wat duidelijker is.
Gewijzigd op 01/01/1970 01:00:00 door Robert Deiman
edit:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<div style="width:100%; height:700px;">
<div style="background:#CCC; height:700px;">
<div style="float:right;">
<img src="plaatje.jpg" width="200" height="200" alt="" />
</div>
Test
</div>
</div>
<div style="background:#CCC; height:700px;">
<div style="float:right;">
<img src="plaatje.jpg" width="200" height="200" alt="" />
</div>
Test
</div>
</div>
ik ben te lui om de css apart erbij te zetten...
Gewijzigd op 01/01/1970 01:00:00 door Tamara
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
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
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
padding:0px;
margin: 0px;}
#main {
width:100%;
height: 700px;}
#vullend{ background:#CCC;
height:700px;}
#vast {
width:100px;
height:100px;
background-color:#FF0000;
float:right;}
</style>
<title>Untitled Document</title>
</head>
<body>
<div id="main">
<div id="vullend">
<div id="vast"></div>
In deze tutorial gaan we in op een...
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
padding:0px;
margin: 0px;}
#main {
width:100%;
height: 700px;}
#vullend{ background:#CCC;
height:700px;}
#vast {
width:100px;
height:100px;
background-color:#FF0000;
float:right;}
</style>
<title>Untitled Document</title>
</head>
<body>
<div id="main">
<div id="vullend">
<div id="vast"></div>
In deze tutorial gaan we in op een...
</div>
</div>
</body>
</html>
Moet ik daar nog wat mee doen?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="content_tekst">
<h2>U bekwame vakman voor een beter zicht</h2>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. il molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. il molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<div id="photo"><a href="#">
<img src="bril.png" alt="bril" />
<p>Bekijk nu de mogelijkheden</p>
</a>
</div>
</div>
<h2>U bekwame vakman voor een beter zicht</h2>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. il molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. il molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<div id="photo"><a href="#">
<img src="bril.png" alt="bril" />
<p>Bekijk nu de mogelijkheden</p>
</a>
</div>
</div>
CSS
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
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
div.content_tekst{
position:relative;
margin-right:122px;
left:0px;
overflow:hidden;
background-color:transparent;
}
div.content_tekst p{
position:relative;
padding-left:15px;
margin-right:360px;
left:0px;
font-size:12px;
margin-bottom:15px;
line-height:22px;
}
div#photo{
position:absolute;
top:35px;
right:0px;
}
div#photo p{
margin-right:0px;
text-align:right;
color:#ff0024;
font-weight:bold;
font-size:16px;
}
position:relative;
margin-right:122px;
left:0px;
overflow:hidden;
background-color:transparent;
}
div.content_tekst p{
position:relative;
padding-left:15px;
margin-right:360px;
left:0px;
font-size:12px;
margin-bottom:15px;
line-height:22px;
}
div#photo{
position:absolute;
top:35px;
right:0px;
}
div#photo p{
margin-right:0px;
text-align:right;
color:#ff0024;
font-weight:bold;
font-size:16px;
}
edit:
Voor IE6 moest ik wel een kleine hack toepassen (de right moet daar op 122px staan) verder helemaal niets aan hoeven doen.
Toch erg bedankt voor het meedenken!
Toch erg bedankt voor het meedenken!
Gewijzigd op 01/01/1970 01:00:00 door Robert Deiman