Hallo,
Ik ben bezig met een site, maar mijn menu achtergrond die altijd height 100% moet zijn werkt niet helemaal naar mijn wens.
- De style height 100% werkt wel, tenzei je moet scrollen. Als je namelijk scrolt dan wordt het toch wit aan de aan de onder kant.
-> Wat heb ik zelf geprobeerd: Ik heb geprobeerd om een class "algemeen" in de body te zetten waar het achtergrond plaatje nog eens in staan maar helaas geen resultaat.
Ook ben ik bezig geweest met een javascriptje wat ik gevonden. Hij reageert hier wel iets op, maar niet hoe het hoort. Als je de pagina zeg maar in een dus danige resolutie zet dat je een scroll bar krijgt en je doet "refresh" en jr scrolt dan blijft het wit onder het menu tot dat de content stopt.
Mijn vraag is uiterarad hoe kan ik dit oplossen? D.m.v. een hack?
Voorbeeld site: http://www.multimedia-4u.nl/wvoi
XHTML Code:
CSS Code:
Ik ben bezig met een site, maar mijn menu achtergrond die altijd height 100% moet zijn werkt niet helemaal naar mijn wens.
- De style height 100% werkt wel, tenzei je moet scrollen. Als je namelijk scrolt dan wordt het toch wit aan de aan de onder kant.
-> Wat heb ik zelf geprobeerd: Ik heb geprobeerd om een class "algemeen" in de body te zetten waar het achtergrond plaatje nog eens in staan maar helaas geen resultaat.
Ook ben ik bezig geweest met een javascriptje wat ik gevonden. Hij reageert hier wel iets op, maar niet hoe het hoort. Als je de pagina zeg maar in een dus danige resolutie zet dat je een scroll bar krijgt en je doet "refresh" en jr scrolt dan blijft het wit onder het menu tot dat de content stopt.
Mijn vraag is uiterarad hoe kan ik dit oplossen? D.m.v. een hack?
Voorbeeld site: http://www.multimedia-4u.nl/wvoi
XHTML Code:
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
69
| <!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=iso-8859-1" />
<title>Werkgeversvereniging onderzoekinstellingen</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function init() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement &&
( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
//window.alert( 'Width = ' + myWidth );
//window.alert( 'Height = ' + myHeight );
document.getElementById('menubg').style.height = (myHeight-178)+'px';
}
</script>
</head>
<body onload=init()>
<div id="container">
<!-- BEGIN HEAD -->
<div id="headlogo">[img]"images/head_logo.jpg"[/img]</div>
<div id="headadres">WVOI<br />postbus 93138<br />2509 AC Den Haag<br /><br /><br />+31 (0)70 344 06 40</div>
<div id="headnav">HOME</div>
<div id="headwvoi"></div>
<!-- EINDE HEAD -->
<!-- BEGIN CONTENT -->
<div id="content">
<div class="h1">Kop paragraaf website wergevers</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#" title="Test link">Test link</a> Suspendisse imperdiet volutpat eros. Curabitur ligula. Sed vulputate posuere felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque fringilla, lacus ut malesuada molestie, felis massa hendrerit justo, sed pharetra ante est ac libero. Aliquam eu est non turpis ornare commodo. Ut fermentum. Ut massa nibh, venenatis nec, lacinia eu, pellentesque id, nunc. Donec sed lorem in tellus euismod iaculis. Vestibulum felis. Cras rutrum nisl eget ante. Suspendisse dui. Phasellus dictum nunc eu orci. Sed eu nisi nec nibh vehicula sodales. Nulla malesuada hendrerit orci. Praesent orci. Fusce.<br /><br />
<div class="h1">Kop paragraaf website wergevers</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse imperdiet volutpat eros. Curabitur ligula. Sed vulputate posuere felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque fringilla, lacus ut malesuada molestie, felis massa hendrerit justo, sed pharetra ante est ac libero. Aliquam eu est non turpis ornare commodo. Ut fermentum. Ut massa nibh, venenatis nec, lacinia eu, pellentesque id, nunc. Donec sed lorem in tellus euismod iaculis. Vestibulum felis. Cras rutrum nisl eget ante. Suspendisse dui. Phasellus dictum nunc eu orci. Sed eu nisi nec nibh vehicula sodales. Nulla malesuada hendrerit orci. Praesent orci. Fusce.<br /><br />
<div class="h1">Kop paragraaf website wergevers</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse imperdiet volutpat eros. Curabitur ligula. Sed vulputate posuere felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque fringilla, lacus ut malesuada molestie, felis massa hendrerit justo, sed pharetra ante est ac libero. Aliquam eu est non turpis ornare commodo. Ut fermentum. Ut massa nibh, venenatis nec, lacinia eu, pellentesque id, nunc. Donec sed lorem in tellus euismod iaculis. Vestibulum felis. Cras rutrum nisl eget ante. Suspendisse dui. Phasellus dictum nunc eu orci. Sed eu nisi nec nibh vehicula sodales. Nulla malesuada hendrerit orci. Praesent orci. Fusce.<br /><br />
<!-- BEGIN FOOTER -->
<div id="footer">
<div class="footericon"><a href="index.html">[img]"images/icon_home.gif"[/img]</a> </div>
<div class="footericon"><a href="#">[img]"images/icon_contact.gif"[/img]</a> </div>Laatst bijgewerkt op 10-11-2005</div>
</div>
<!-- EINDE FOOTER -->
<!-- BEGIN MENU -->
<div id="menubg">
<div id="menu">
<div class="menubuttons">
<a href="#" title="Home" class="linkmenu">Home</a>
<a href="#" title="Organisatie" class="linkmenu">Organisatie</a>
<a href="#" title="Onderzoek" class="linkmenu">Onderzoek</a>
<a href="#" title="Vacatures" class="linkmenu">Vacatures</a>
<a href="#" title="Contact" class="linkmenu">Contact</a>
</div>
</div>
</div>
<!-- EINDE MENU -->
</div>
</body>
</html> |
CSS Code:
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
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
| body, html {
margin: 0px;
background-image: url(../images/bg_head.jpg);
background-repeat: repeat-x;
background-position: 180px top;
height: 100%;
}
a:link, a:visited, a:active {
color: #5e5e5e;
border-bottom: dotted 1px #d85950;
text-decoration: none;
}
a:hover {
color: #d85950;
text-decoration: none;
border-bottom: solid 1px #d85950;
}
.algemeem {
background-image: url(../images/bg_menu.jpg);
background-repeat: repeat-y;
background-position: left top;
height:100%;
width:100%;
}
/* --------------- BEGIN HEAD ---------------------- */
#headlogo {
height: 100%;
width: 189px;
}
#headadres {
top: 32px;
left: 193px;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 13px;
color: #FFFFFF;
letter-spacing: 2px;
text-align: left;
}
#headnav {
top: 128px;
left: 350px;
width: 400px;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
color: #FFFFFF;
letter-spacing: 4px;
text-align: right;
}
html>body #headnav {
top: 128px;
left: 350px;
width: 405px;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
color: #FFFFFF;
letter-spacing: 4px;
text-align: right;
}
#headwvoi {
top: 144px;
left: 189px;
width: 561px;
height: 23px;
position: absolute;
background-image: url(../images/wvoi.jpg);
background-repeat: no-repeat;
background-position: left top;
}
/* --------------- EINDE HEAD ---------------------- */
/* --------------- BEGIN MENU ---------------------- */
#menubg {
background-image: url(../images/bg_menu.jpg);
background-repeat: repeat-y;
background-position: left top;
width: 193px;
height:100%;
top: 178px;
position:absolute;
}
#menu {
background-image: url(../images/bg_menu_items.gif);
background-repeat: repeat-y;
background-position: left top;
width: 193px;
top: 0px;
left: 0px;
position:absolute;
}
.menubuttons {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
line-height: 36px;
letter-spacing: 4px;
text-align: right;
margin-top: -4px;
padding-right: 12px;
}
a.linkmenu:link, a.linkmenu:visited, a.linkmenu:active {
color: #FFFFFF;
text-decoration: none;
border-bottom: solid 0px #d85950;
}
a.linkmenu:hover {
color: #d85950;
text-decoration: none;
border-bottom: solid 0px #d85950;
}
#container{
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
/* --------------- EINDE MENU ---------------------- */
/* --------------- BEGIN CONTENT ---------------------- */
#content {
width: 540px;
top: 181px;
left: 205px;
position: absolute;
font-family: Verdana;
line-height: 19px;
color: #5e5e5e;
font-size: 11px;
word-spacing: 1px;
}
.h1 {
font-family: Georgia;
font-size: 20px;
color: #d85950;
padding-bottom: 5px;
}
/* --------------- BEINDE CONTENT ---------------------- */
/* --------------- BEGIN FOOTER ---------------------- */
#footer {
width: 561px;
height: 15px;
bottom: -20px;
left: -17px;
position:absolute;
padding-top: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #d85950;
text-align: right;
background-image: url(../images/bg_footer.gif);
background-repeat: repeat-x;
background-position: left top;
}
.footericon {
padding-left: 10px;
position: relative;
float: left;
}
/* --------------- EINDE FOOTER ---------------------- */ |
:strip_exif()/u/80759/monstermania_small.gif?f=community)