[CSS] content breedte
Ik heb een menu en daarnaast de content. Het menu is 192px lang maar daarnaast wil ik de content hebben die de rest van de pagina in de breedte opvult. De content moet dan dus 100% - 192px breed zijn.
Hoe realiseer ik dit ?
Alvast bedankt,
Martijn
Ik wil dus links strak tegen de zijkant van het venster mijn menu hebben en daarnaast strak mijn content die in de breedte de rest van mijn pagina vult. Vandaar dus dat de content 100% - 192px moet zijn :)
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
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Kyokushin v3 </TITLE>
<style type="text/css">
body, html {
color: white
margin: 0px;
margin: 0px;
width: 100%;
background: url("graph/bg.gif");
background-repeat: repeat;
}
#container {
width: 100%;
}
#header {
margin: 0px;
padding: 0px;
display: block;
min-height: 100px;
_height: 100px;
width: 100%;
background: url("graph/header.gif");
background-repeat: no-repeat;
background-color: #025892;
}
#menubox {
width: 192px;
float: left;
background-color: #cdd6d8;
}
#subheader {
margin: 0px;
padding: 0px;
display: block;
width: 192px;
min-height: 30px;
_height: 30px;
background: url("graph/links-boven.gif");
}
.menu-licht {
margin: 0px;
padding: 0px;
display: block;
width: 192px;
min-height: 30px;
_height: 30px;
background-color: #658288;
color: white;
font-size: 13;
text-align: center;
vertical-align: middle;
font-family: Comic Sans MS;
}
.menu-donker {
margin: 0px;
padding: 0px;
display: block;
width: 192px;
min-height: 30px;
_height: 30px;
background-color: #025892;
color: white;
font-size: 13;
text-align: center;
vertical-align: middle;
font-family: Comic Sans MS;
}
#contentbox {
float: left;
background: url("graph/content.gif");
background-repeat: no-repeat;
color: white;
font-size: 13px;
font-weight: bold;
border-left: 1px dashed black;
}
</style>
</HEAD>
<BODY>
<div id="container">
<div id="header"></div>
<div id="menubox">
<div id="subheader"></div>
<div class="menu-licht">ALGEMENE INFORMATIE</div>
<div class="menu-donker">AANMELDEN</div>
<div class="menu-licht">LERAAR & ASSISTENTEN</div>
<div class="menu-donker">TRAININGEN</div>
<div class="menu-licht">DOJO ETIQUETTE</div>
<div class="menu-donker">ACTIVITEITENKALENDER</div>
<div class="menu-licht">CONTRIBUTIE</div>
<div class="menu-donker">EXAMENS</div>
<div class="menu-licht">LINKS</div>
<div class="menu-donker">FOTOALBUM</div>
<div class="menu-licht">MEDEDELINGEN</div>
<div class="menu-donker">DANGRADEN</div>
</div>
<div id="contentbox"></div>
</div>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> Kyokushin v3 </TITLE>
<style type="text/css">
body, html {
color: white
margin: 0px;
margin: 0px;
width: 100%;
background: url("graph/bg.gif");
background-repeat: repeat;
}
#container {
width: 100%;
}
#header {
margin: 0px;
padding: 0px;
display: block;
min-height: 100px;
_height: 100px;
width: 100%;
background: url("graph/header.gif");
background-repeat: no-repeat;
background-color: #025892;
}
#menubox {
width: 192px;
float: left;
background-color: #cdd6d8;
}
#subheader {
margin: 0px;
padding: 0px;
display: block;
width: 192px;
min-height: 30px;
_height: 30px;
background: url("graph/links-boven.gif");
}
.menu-licht {
margin: 0px;
padding: 0px;
display: block;
width: 192px;
min-height: 30px;
_height: 30px;
background-color: #658288;
color: white;
font-size: 13;
text-align: center;
vertical-align: middle;
font-family: Comic Sans MS;
}
.menu-donker {
margin: 0px;
padding: 0px;
display: block;
width: 192px;
min-height: 30px;
_height: 30px;
background-color: #025892;
color: white;
font-size: 13;
text-align: center;
vertical-align: middle;
font-family: Comic Sans MS;
}
#contentbox {
float: left;
background: url("graph/content.gif");
background-repeat: no-repeat;
color: white;
font-size: 13px;
font-weight: bold;
border-left: 1px dashed black;
}
</style>
</HEAD>
<BODY>
<div id="container">
<div id="header"></div>
<div id="menubox">
<div id="subheader"></div>
<div class="menu-licht">ALGEMENE INFORMATIE</div>
<div class="menu-donker">AANMELDEN</div>
<div class="menu-licht">LERAAR & ASSISTENTEN</div>
<div class="menu-donker">TRAININGEN</div>
<div class="menu-licht">DOJO ETIQUETTE</div>
<div class="menu-donker">ACTIVITEITENKALENDER</div>
<div class="menu-licht">CONTRIBUTIE</div>
<div class="menu-donker">EXAMENS</div>
<div class="menu-licht">LINKS</div>
<div class="menu-donker">FOTOALBUM</div>
<div class="menu-licht">MEDEDELINGEN</div>
<div class="menu-donker">DANGRADEN</div>
</div>
<div id="contentbox"></div>
</div>
</BODY>
</HTML>
Ik wil dus dat #contentbox naast #menubox komt. Met deze code zie ik niets van de #contentbox.
Dat komt denk ik omdat ik in de #contentbox geen breedte en hoogte opgeef, maar die kan ik niet opgeven omdat ik deze waarden van tevoren niet weet. Hoe moet ik dit oplossen?
Alvast bedankt,
Martijn
width: 192px;
float: left;
}
:)
Alleen volgend probleem. Ik gebruik dus een achtergrond plaatje in mijn content staan en wat tekst. Probleem is nu dat de tekst wel tegen het menu aan kom, maar de achtergrond gaat achter het menu langs :S. Hoe kan dat? Ik heb de volgende code:
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
#menubox {
width: 192px;
float: left;
background-color: #cdd6d8;
}
#contentbox {
background: url("graph/content.gif");
background-repeat: no-repeat;
color: white;
font-size: 13px;
font-weight: bold;
border-left: 1px dashed black;
height: 100%;
}
width: 192px;
float: left;
background-color: #cdd6d8;
}
#contentbox {
background: url("graph/content.gif");
background-repeat: no-repeat;
color: white;
font-size: 13px;
font-weight: bold;
border-left: 1px dashed black;
height: 100%;
}
Dit zijn de twee boxen die naast elkaar moeten komen. In de menubox zitten nog meer divs, namelijk menu items die onder elkaar staan. Ik neem aan dat dit niet voor problemen kan zorgen.
Maar hoe krijg ik nu mijn achtergrondplaatje netjes tegen mijn menu aan? Dit probleem doet zich trouwens voor in FireFox. In IE gaat het wat beter
(Waarom IE er een tussenruimte tussen zet is mij een raadsel maar okay)
Maar goed al zou ik dus die 192px aan mn content.gif toevoegen, dan schijft hij in IE ook 192 px op, en das niet de bedoeling.
Dan zijn de problemen dus omgedraaid. Gaat het in FF goed, maar niet in IE
Voorbeeld met wat ik bedoel is te zien op
http://www.kyokushin.nl.tt
En dan eens openen in IE en FF
Gewijzigd op 15/02/2006 15:03:00 door Martijn