Hallo,
Ik ben bezig met een stylesheet die de opmaak van m'n website moet regelen. Ik wil liever geen tables gebruiken zodat ik altijd met 1 css de opmaak kan veranderen.
Nu heb ik wat problemen kunnen oplossen ten bate van padding en margin in verschillende browsers als IE en Mozilla Firefox. door de volgende regel toe te voegen in mijn html pagina.
Ik geef eerst even de codes die ik gebruik en leg dan uit wat het probleem is.:
HTML
CSS
Als de left gevuld wordt met tekst veranderd hij alleen in hoogte en niet de content box ook nog eens en de right class. Ze vallen dan over de content box.
Is dit op te lossen, of moet ik het op een andere manier aanpakken.?
A
Ik ben bezig met een stylesheet die de opmaak van m'n website moet regelen. Ik wil liever geen tables gebruiken zodat ik altijd met 1 css de opmaak kan veranderen.
Nu heb ik wat problemen kunnen oplossen ten bate van padding en margin in verschillende browsers als IE en Mozilla Firefox. door de volgende regel toe te voegen in mijn html pagina.
code:
1
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
Ik geef eerst even de codes die ik gebruik en leg dan uit wat het probleem is.:
HTML
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="boxclass.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="topimage"></div>
<div id="content">
<div id="left">Content layer<br><br><br><br>einde</div>
<div id="right">Menu</div>
</div>
</div>
</body>
</html> |
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
| body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #99CCFF;
background-image: url(images/background.jpg);
background-repeat: repeat-x;
text-align: center;
}
#container {
background-image: url(images/bg_stripe.gif);
position: relative;
margin-left: auto;
margin-right: auto;
width: 770px;
border-right-color: #FFFFFF;
border-right-style: solid;
border-right-width: 5px;
border-bottom-style: solid;
border-bottom-width: 5px;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
border-left-style: solid;
border-left-width: 5px;
}
#topimage{
background-image: url(images/img_top3.jpg);
height: 86px;
border-bottom: 5px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
}
#content{
position: relative;
width: 760px;
margin: 5px;
margin-left: 5px;
margin-right: 5px;
}
#right{
position: relative;
width: 160px;
background-color: #FFFFFF;
margin: 0px;
margin-left: 600px;
}
#left{
position: absolute;
width: 595px;
background-color: #FFFFFF;
margin-right: 5px;
left: 0px;
} |
Als de left gevuld wordt met tekst veranderd hij alleen in hoogte en niet de content box ook nog eens en de right class. Ze vallen dan over de content box.
Is dit op te lossen, of moet ik het op een andere manier aanpakken.?
A
