Ik zit met een probleem met m'n layout voor een site.
Ik probeer deze layout op te bouwen via div's, maar het gaat niet helemaal lekker.
Zo moet de layout eruit komen te zien:
Het probleem zit em in het middelste gedeelte.
Het linker gedeelte heb ik redelijk (voor m'n gevoel), maar het lukt me niet om de content, headlines en sideimage div allemaal tot de footer div door te laten lopen. Nu is het zo dat als ik in content veel tekst zet, dat de sideimage niet tot beneden aan door gaat.
Dit is wat ik heb:
en hier de css:
Zo is hoe het er nu uitziet (in Internet Explorer, in Mozilla laat ie helemaal niks zien als in de sideimage div), als ik content met tekst heb gevuld (die div heeft zich dus aangepast aan de tekst):
Ik probeer deze layout op te bouwen via div's, maar het gaat niet helemaal lekker.
Zo moet de layout eruit komen te zien:
Het probleem zit em in het middelste gedeelte.
Het linker gedeelte heb ik redelijk (voor m'n gevoel), maar het lukt me niet om de content, headlines en sideimage div allemaal tot de footer div door te laten lopen. Nu is het zo dat als ik in content veel tekst zet, dat de sideimage niet tot beneden aan door gaat.
Dit is wat ik heb:
code:
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style/style.css" type="text/css" />
<title>Test</title>
</head>
<body>
<div id="banner"></div>
<div id="menu"></div>
<div id="main">
<div id="images"></div>
<div id="text">
Magnus es, domine, et laudabilis valde: magna virtus tua,
et sapientiae tuae non est numerus. et laudare te vult homo,
aliqua portio creaturae tuae, et homo circumferens mortalitem suam,
circumferens testimonium peccati sui et testimonium, quia superbis resistis:
et tamen laudare te vult homo, aliqua portio creaturae tuae.tu excitas,
ut laudare te delectet, quia fecisti nos ad te et inquietum est cor nostrum,
donec requiescat in te.
</div>
<div id="headlines">Headlines</div>
</div>
<div id="image"></div>
<div id="cleardiv"></div>
<div id="footer">Footer</div>
</body>
</html> |
en hier de css:
code:
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
| /* CSS Document */
body {
margin: 0px;
padding: 0px;
}
#banner {
width: 780px;
height: 77px;
background-image: url(../images/banner.jpg);
}
#menu {
width: 780px;
height: 32px;
background-image: url(../images/menu.jpg);
}
#main {
width: 622px;
float: left;
background-color: #CCCCCC;
}
#images {
width: 622px;
height: 168px;
background-image: url(../images/images.jpg);
}
#text {
width: 410px;
float: left;
padding: 10px;
border-right: 1px solid #000000;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
text-align: justify;
}
#headlines {
width: 171px;
float: left;
padding: 10px;
}
#image {
width: 149px;
height: 100%;
float: left;
background-image: url(../images/image.jpg);
background-repeat: repeat-y;
}
#cleardiv {
clear: both;
}
#footer {
width: 780px;
height: 18px;
background-color: #FFFFFF;
color: #000000;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
padding-top: 2px;
text-align: center;
}
#footer a{
color: #202020;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
} |
Zo is hoe het er nu uitziet (in Internet Explorer, in Mozilla laat ie helemaal niks zien als in de sideimage div), als ik content met tekst heb gevuld (die div heeft zich dus aangepast aan de tekst):
/u/7685/ruinmytune-60x60.png?f=community)
