[CSS] content breedte
Gewijzigd op 15/02/2006 15:15:00 door Martijn
1) in IE krijg ik een ruimte van een aantal pixels tussen mijn menu en mijn content
2) Binnen mijn containerbox heb ik border: 1px solid black gezet. Nu zet hij in IE wel een complete rand om de container heen, maar in FF kapt hij ergens voor het einde af. Ik heb dus in FF een border aan de boven, linker en rechter kant.
Dit is mijn code:
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Kyokushin v3 </TITLE>
<style type="text/css">
body, html {
margin: 0px;
padding: 0px;
color: white;
width: 100%;
background: url("graph/bg.gif");
background-repeat: repeat;
text-align: center;
}
#container {
width: 98%;
height: 500px;
margin: 0px auto;
text-align: left;
background-color: #025892;
border: 1px solid black;
}
#header {
height: 100px;
width: 100%;
background: url("graph/header.gif");
background-repeat: no-repeat;
background-color: #025892;
}
#menubox {
width: 192px;
float: left;
background-color: #cdd6d8;
height: 100%;
}
#subheader {
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;
line-height: 30px; /*Om tekst verticaal te kunnen centreren*/
}
.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;
line-height: 30px; /*Om tekst verticaal te kunnen centreren*/
}
#contentbox {
overflow: auto;
height: 100%;
border-left: 1px dashed black;
background: url("graph/content.gif");
background-repeat: no-repeat;
background-color: #e9edee;
color: black;
font-size: 13px;
}
</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">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus mattis ante vel leo.
Aliquam non lacus. Ut mattis orci tempor lorem. Pellentesque egestas tortor eget tellus.
Proin nisi. Pellentesque non nunc. Praesent nibh. Donec tellus. Proin nec ante.
Cras vestibulum, dui vel tristique vestibulum, augue nibh tincidunt ante, a sollicitudin risus
ligula ac lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Proin eget mauris vel tellus dictum viverra. Duis neque.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus mattis ante vel leo.
Aliquam non lacus. Ut mattis orci tempor lorem. Pellentesque egestas tortor eget tellus.
Proin nisi. Pellentesque non nunc. Praesent nibh. Donec tellus. Proin nec ante.
Cras vestibulum, dui vel tristique vestibulum, augue nibh tincidunt ante, a sollicitudin risus
ligula ac lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Proin eget mauris vel tellus dictum viverra. Duis neque.</p>
</div>
</div>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> Kyokushin v3 </TITLE>
<style type="text/css">
body, html {
margin: 0px;
padding: 0px;
color: white;
width: 100%;
background: url("graph/bg.gif");
background-repeat: repeat;
text-align: center;
}
#container {
width: 98%;
height: 500px;
margin: 0px auto;
text-align: left;
background-color: #025892;
border: 1px solid black;
}
#header {
height: 100px;
width: 100%;
background: url("graph/header.gif");
background-repeat: no-repeat;
background-color: #025892;
}
#menubox {
width: 192px;
float: left;
background-color: #cdd6d8;
height: 100%;
}
#subheader {
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;
line-height: 30px; /*Om tekst verticaal te kunnen centreren*/
}
.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;
line-height: 30px; /*Om tekst verticaal te kunnen centreren*/
}
#contentbox {
overflow: auto;
height: 100%;
border-left: 1px dashed black;
background: url("graph/content.gif");
background-repeat: no-repeat;
background-color: #e9edee;
color: black;
font-size: 13px;
}
</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">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus mattis ante vel leo.
Aliquam non lacus. Ut mattis orci tempor lorem. Pellentesque egestas tortor eget tellus.
Proin nisi. Pellentesque non nunc. Praesent nibh. Donec tellus. Proin nec ante.
Cras vestibulum, dui vel tristique vestibulum, augue nibh tincidunt ante, a sollicitudin risus
ligula ac lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Proin eget mauris vel tellus dictum viverra. Duis neque.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus mattis ante vel leo.
Aliquam non lacus. Ut mattis orci tempor lorem. Pellentesque egestas tortor eget tellus.
Proin nisi. Pellentesque non nunc. Praesent nibh. Donec tellus. Proin nec ante.
Cras vestibulum, dui vel tristique vestibulum, augue nibh tincidunt ante, a sollicitudin risus
ligula ac lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Proin eget mauris vel tellus dictum viverra. Duis neque.</p>
</div>
</div>
</BODY>
</HTML>
Hoe los ik mijn problemen op?
Alvast bedankt weer :)
1) in FF krijg ik als ik een behoorlijke content tekst scrollbalken IN mijn content. Dat is niet de bedoeling, ik wil gewoon dat het complete document verlengt wordt
2) Er wordt op de een of andere manier een stuk lozo ruimte onder de tekst in de content geplaatst. Onder de contentbox komt zit namelijk nog een blok. En deze moet dan pal onder de tekst komen.
Hoe los ik alle bovenstaande problemen op?
PS: alles is te zien op http://www.kyokushin.nl.tt/index3.html
Gewijzigd op 15/02/2006 16:47:00 door Martijn
2) check je code.
En als ik die overflow weghaal, wordt het plaatje niet goed weergegevn in de content, dan verdwijnt hij weer achter het menu.
Ik wordt hier echt beetje moe van.. En dan raadt men aan je site in divs e maken. Ik ben nu serieus al drie dagen hiermee bezig. Het wil echt niet lukken. *diepe zucht* :(
Gewijzigd op 15/02/2006 16:56:00 door Martijn
Niemand die een oplossing weet ? Arjan...? help?
hier
Veder zit er nog al een verschil tussen IE en FF
Checken op fouten dus Veder zit er nog al een verschil tussen IE en FF
Ook al zou mn code valid zijn dan nog ziet het er anders uit in IE en FF
IE zal altijd iets anders blijven maar daar heb je hacks voor. Zorg ervoor dat ie eerst valid is en er in FF goed uitziet. Daarna pas gaan hacken voor IE
Hoe krijg ik dan mijn achtergrondafbeelding strak tegen mijn menu aan? Zonder gebruik te maken van overflow?
Okay, overflow heb ik nu dus weggehaad en zie het resultaat in FF:
http://www.kyokushin.nl.tt/index3.html
Gewijzigd op 15/02/2006 18:15:00 door Martijn
Stuur me effe PM, maak ik morgen even layoutje