mijn div groeit niet mee
Ik zit er al twee avonden op te stoeien, dus schakel ik nu jullie hulp in.
even voor de beeldvorming hieronder twee afbeeldingen, van zoals het moet zijn, en zoals het wordt als ik er veel tekst in pomp:
Uitleg: ik heb een menu links (left_menu), een content (middle) en een menu rechts (menu_right). Dit staat weer in een container 'main'.
Het probleem is dat ik om de content een soort gradient wil, zodat de div als het ware opgloeit. Deze gradient wordt gecreerd met een 2px hoge afbeelding, telkens herhaald als background van de div left_gradient en right_gradient.
De menu's moeten gewoon over de gradient heenlopen.
De gradient lukt wel, en ik kan er ook wel een hoogte aangeven etc, maar zodra de content groeit, moet dus de gradient meegroeien. Dus zoals de eerste afbeelding is het goed, maar als ik m dan vol tekst pomp, dan groeit de gradient div niet meer mee.
CSS:
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
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
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
body, html {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #E9E9E9;
height: 100%;
}
#page {
width: 1000px;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
margin-bottom: 0px;
text-align: left;
background-color: transparent;
}
#logo {
position: absolute;
width: auto;
height: auto;
top: 75px;
margin-left: 50px;
}
#b-1 {
position: relative;
border-bottom-width: 10px;
border-bottom-style: solid;
border-bottom-color: #E9E9E9;
width: auto;
height: 350px;
background: url('../img/100_0319.JPG') no-repeat center center;
}
#b-2 {
position: absolute;
width: 1000px;
height: 200px;
top: 75px;
bottom: auto;
opacity:0.5;
filter:alpha(opacity=50);
background-color: #E9E9E9;
}
#main {
width: auto;
overflow: hidden;
}
#middle {
float: left;
right: auto;
left: auto;
width: 660px;
min-height: 400px;
padding: 0 10px 0 10px;
background-color: #E9E9E9;
}
#left_menu {
width: 150px;
height: 100px;
padding: 0 5px 0 5px;
color: #E9E9E9;
background-color: #0b6a0b;
border-top: solid 1px #d60000;
margin-top: 10px;
}
#right_menu {
width: 150px;
height: 225px;
padding: 0 5px 0 5px;
color: #E9E9E9;
background-color: #0b6a0b;
border-top: solid 1px #d60000;
margin-top: 10px;
}
#left_menu ul, #right_menu ul {
list-style: none;
margin: 5pxs 0 0 0;
padding: 0;
}
#left_menu li, #right_menu li {
}
#left_menu a:link, #right_menu a:link {
width: auto;
height: 20px;
line-height: 20px;
display: block;
color: #e9e9e9;
text-decoration: none;
}
#left_menu a:visited, #right_menu a:visited {
text-decoration: none;
}
#left_menu a:hover, #right_menu a:hover {
text-decoration: none;
font-weight: bold;
}
#left_menu a:active, #right_menu a:active {
text-decoration: none;
}
#right_gradient {
float: right;
width: 160px;
min-height: 400px;
background: url('../img/gradient-r.png') repeat-y #9e9e9e;
}
#left_gradient {
float: left;
width: 160px;
min-height: 400px;
background: url('../img/gradient-l.png') repeat-y right #9e9e9e;
}
#footer {
margin-left: auto;
margin-right: auto;
line-height: 50px;
width: 1000px;
height: 50px;
color: #E9E9E9;
background-color: #1e1e1e;
}
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #E9E9E9;
height: 100%;
}
#page {
width: 1000px;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
margin-bottom: 0px;
text-align: left;
background-color: transparent;
}
#logo {
position: absolute;
width: auto;
height: auto;
top: 75px;
margin-left: 50px;
}
#b-1 {
position: relative;
border-bottom-width: 10px;
border-bottom-style: solid;
border-bottom-color: #E9E9E9;
width: auto;
height: 350px;
background: url('../img/100_0319.JPG') no-repeat center center;
}
#b-2 {
position: absolute;
width: 1000px;
height: 200px;
top: 75px;
bottom: auto;
opacity:0.5;
filter:alpha(opacity=50);
background-color: #E9E9E9;
}
#main {
width: auto;
overflow: hidden;
}
#middle {
float: left;
right: auto;
left: auto;
width: 660px;
min-height: 400px;
padding: 0 10px 0 10px;
background-color: #E9E9E9;
}
#left_menu {
width: 150px;
height: 100px;
padding: 0 5px 0 5px;
color: #E9E9E9;
background-color: #0b6a0b;
border-top: solid 1px #d60000;
margin-top: 10px;
}
#right_menu {
width: 150px;
height: 225px;
padding: 0 5px 0 5px;
color: #E9E9E9;
background-color: #0b6a0b;
border-top: solid 1px #d60000;
margin-top: 10px;
}
#left_menu ul, #right_menu ul {
list-style: none;
margin: 5pxs 0 0 0;
padding: 0;
}
#left_menu li, #right_menu li {
}
#left_menu a:link, #right_menu a:link {
width: auto;
height: 20px;
line-height: 20px;
display: block;
color: #e9e9e9;
text-decoration: none;
}
#left_menu a:visited, #right_menu a:visited {
text-decoration: none;
}
#left_menu a:hover, #right_menu a:hover {
text-decoration: none;
font-weight: bold;
}
#left_menu a:active, #right_menu a:active {
text-decoration: none;
}
#right_gradient {
float: right;
width: 160px;
min-height: 400px;
background: url('../img/gradient-r.png') repeat-y #9e9e9e;
}
#left_gradient {
float: left;
width: 160px;
min-height: 400px;
background: url('../img/gradient-l.png') repeat-y right #9e9e9e;
}
#footer {
margin-left: auto;
margin-right: auto;
line-height: 50px;
width: 1000px;
height: 50px;
color: #E9E9E9;
background-color: #1e1e1e;
}
html:
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Mark Moes Hoveniers en Dienstverlening</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<!-- container with all containers -->
<div id="page">
<div id="b-1"><!-- background is header --></div>
<div id="b-2"><!-- opacity --></div>
<div id="logo">
<!-- logo -->
<img src="img/logo.png" name="Mark Moes.nl" title="Welkom bij Mark Moes.nl!" height="200px" width="330px" />
</div>
<!-- #0b6a0b -->
<div id="main">
<div id="left_gradient">
<div id="left_menu">
<ul>
<li><a href="#" >Menu</a></li>
<li>Nog wat</li>
</ul>
</div>
</div>
<div id="middle">
<div id="1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, lorem at iaculis tempus, orci nibh ultrices nisi, ac sodales dolor justo eget ante. Integer nec ante id turpis molestie fermentum. Nulla dictum lacus ac neque malesuada adipiscing. Sed luctus arcu eget felis imperdiet laoreet et eu dolor. Mauris lorem sem, euismod vel scelerisque non, congue non tortor. Curabitur ut enim urna. Pellentesque vehicula, quam non dictum blandit, nunc diam tristique tellus, varius scelerisque turpis nibh at turpis. Nam fermentum, augue quis aliquam aliquet, diam ligula congue nunc, ac rutrum urna nisi eget elit. Vestibulum condimentum convallis molestie. Nam eleifend arcu laoreet massa suscipit vel posuere diam condimentum. Praesent aliquam faucibus dolor a fermentum.
Nam lacus nulla, tincidunt quis tincidunt et, pellentesque nec elit. Donec vulputate vehicula aliquet. Cras consequat erat sit amet elit feugiat laoreet. Donec semper, lorem vel lobortis consectetur, nunc est convallis orci, non fermentum ligula justo vestibulum urna. Vestibulum semper condimentum urna, quis porta dolor adipiscing vitae. Ut ornare, metus non euismod dapibus, orci arcu ultrices erat, vel condimentum nisl nulla consectetur metus. Praesent porta laoreet tortor, eget ultricies metus ullamcorper faucibus. Quisque dapibus, ante volutpat ultrices congue, nulla ante vulputate nibh, sed tincidunt risus lectus nec nulla. Proin a lorem sit amet quam mattis faucibus. Curabitur tempor condimentum sapien et hendrerit. Suspendisse ut pulvinar nibh.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vehicula ultrices convallis. Nam id pretium mi. Vivamus placerat tempus augue, vel consequat magna volutpat consectetur. Aenean aliquet vestibulum vestibulum. Aenean hendrerit, ipsum nec tincidunt imperdiet, risus ipsum tempus velit, in blandit nisi libero sed est. Curabitur id turpis orci. Duis luctus mattis consectetur. Duis tellus augue, condimentum id convallis nec, pellentesque eu massa. Integer bibendum placerat commodo.
Sed semper nibh lectus, et tristique elit. Sed libero ligula, vulputate quis facilisis a, egestas eu leo. Duis sagittis egestas massa non adipiscing. Fusce fermentum blandit elit vel lacinia. Nulla consequat varius tortor nec faucibus. Proin elementum metus ultricies lectus auctor consequat pharetra massa tempor. Cras luctus, tortor in gravida tincidunt, quam nunc consectetur enim, vel hendrerit ligula dolor non ante. Aenean mollis venenatis tortor, ut congue dolor bibendum eget. Curabitur vehicula orci sed metus elementum pellentesque.
Quisque venenatis elit nec libero tincidunt in sodales neque aliquet. Aenean blandit, urna vel faucibus rutrum, nunc nisi ultrices ipsum, vitae aliquam ligula ligula eu sapien. Pellentesque diam velit, hendrerit a tincidunt dignissim, porta sed nisi. Curabitur luctus cursus tortor, eu tincidunt mi condimentum at. In facilisis mattis sem, nec faucibus dui porttitor sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat. Vestibulum eros ante, cursus id facilisis non, cursus sed sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ultrices, risus et ornare adipiscing, leo metus accumsan diam, ac commodo magna elit et nunc. Donec faucibus tempor consectetur. Maecenas accumsan orci vitae elit molestie ullamcorper malesuada urna aliquam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, lorem at iaculis tempus, orci nibh ultrices nisi, ac sodales dolor justo eget ante. Integer nec ante id turpis molestie fermentum. Nulla dictum lacus ac neque malesuada adipiscing. Sed luctus arcu eget felis imperdiet laoreet et eu dolor. Mauris lorem sem, euismod vel scelerisque non, congue non tortor. Curabitur ut enim urna. Pellentesque vehicula, quam non dictum blandit, nunc diam tristique tellus, varius scelerisque turpis nibh at turpis. Nam fermentum, augue quis aliquam aliquet, diam ligula congue nunc, ac rutrum urna nisi eget elit. Vestibulum condimentum convallis molestie. Nam eleifend arcu laoreet massa suscipit vel posuere diam condimentum. Praesent aliquam faucibus dolor a fermentum.
Nam lacus nulla, tincidunt quis tincidunt et, pellentesque nec elit. Donec vulputate vehicula aliquet. Cras consequat erat sit amet elit feugiat laoreet. Donec semper, lorem vel lobortis consectetur, nunc est convallis orci, non fermentum ligula justo vestibulum urna. Vestibulum semper condimentum urna, quis porta dolor adipiscing vitae. Ut ornare, metus non euismod dapibus, orci arcu ultrices erat, vel condimentum nisl nulla consectetur metus. Praesent porta laoreet tortor, eget ultricies metus ullamcorper faucibus. Quisque dapibus, ante volutpat ultrices congue, nulla ante vulputate nibh, sed tincidunt risus lectus nec nulla. Proin a lorem sit amet quam mattis faucibus. Curabitur tempor condimentum sapien et hendrerit. Suspendisse ut pulvinar nibh.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vehicula ultrices convallis. Nam id pretium mi. Vivamus placerat tempus augue, vel consequat magna volutpat consectetur. Aenean aliquet vestibulum vestibulum. Aenean hendrerit, ipsum nec tincidunt imperdiet, risus ipsum tempus velit, in blandit nisi libero sed est. Curabitur id turpis orci. Duis luctus mattis consectetur. Duis tellus augue, condimentum id convallis nec, pellentesque eu massa. Integer bibendum placerat commodo.
Sed semper nibh lectus, et tristique elit. Sed libero ligula, vulputate quis facilisis a, egestas eu leo. Duis sagittis egestas massa non adipiscing. Fusce fermentum blandit elit vel lacinia. Nulla consequat varius tortor nec faucibus. Proin elementum metus ultricies lectus auctor consequat pharetra massa tempor. Cras luctus, tortor in gravida tincidunt, quam nunc consectetur enim, vel hendrerit ligula dolor non ante. Aenean mollis venenatis tortor, ut congue dolor bibendum eget. Curabitur vehicula orci sed metus elementum pellentesque.
Quisque venenatis elit nec libero tincidunt in sodales neque aliquet. Aenean blandit, urna vel faucibus rutrum, nunc nisi ultrices ipsum, vitae aliquam ligula ligula eu sapien. Pellentesque diam velit, hendrerit a tincidunt dignissim, porta sed nisi. Curabitur luctus cursus tortor, eu tincidunt mi condimentum at. In facilisis mattis sem, nec faucibus dui porttitor sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat. Vestibulum eros ante, cursus id facilisis non, cursus sed sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ultrices, risus et ornare adipiscing, leo metus accumsan diam, ac commodo magna elit et nunc. Donec faucibus tempor consectetur. Maecenas accumsan orci vitae elit molestie ullamcorper malesuada urna aliquam.</p>
</div>
</div>
<div id="right_gradient">
<div id="right_menu">
<p></p>
</div>
</div>
</div>
<!-- end of all containers -->
</div>
<div id="footer">
<p></p>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Mark Moes Hoveniers en Dienstverlening</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<!-- container with all containers -->
<div id="page">
<div id="b-1"><!-- background is header --></div>
<div id="b-2"><!-- opacity --></div>
<div id="logo">
<!-- logo -->
<img src="img/logo.png" name="Mark Moes.nl" title="Welkom bij Mark Moes.nl!" height="200px" width="330px" />
</div>
<!-- #0b6a0b -->
<div id="main">
<div id="left_gradient">
<div id="left_menu">
<ul>
<li><a href="#" >Menu</a></li>
<li>Nog wat</li>
</ul>
</div>
</div>
<div id="middle">
<div id="1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, lorem at iaculis tempus, orci nibh ultrices nisi, ac sodales dolor justo eget ante. Integer nec ante id turpis molestie fermentum. Nulla dictum lacus ac neque malesuada adipiscing. Sed luctus arcu eget felis imperdiet laoreet et eu dolor. Mauris lorem sem, euismod vel scelerisque non, congue non tortor. Curabitur ut enim urna. Pellentesque vehicula, quam non dictum blandit, nunc diam tristique tellus, varius scelerisque turpis nibh at turpis. Nam fermentum, augue quis aliquam aliquet, diam ligula congue nunc, ac rutrum urna nisi eget elit. Vestibulum condimentum convallis molestie. Nam eleifend arcu laoreet massa suscipit vel posuere diam condimentum. Praesent aliquam faucibus dolor a fermentum.
Nam lacus nulla, tincidunt quis tincidunt et, pellentesque nec elit. Donec vulputate vehicula aliquet. Cras consequat erat sit amet elit feugiat laoreet. Donec semper, lorem vel lobortis consectetur, nunc est convallis orci, non fermentum ligula justo vestibulum urna. Vestibulum semper condimentum urna, quis porta dolor adipiscing vitae. Ut ornare, metus non euismod dapibus, orci arcu ultrices erat, vel condimentum nisl nulla consectetur metus. Praesent porta laoreet tortor, eget ultricies metus ullamcorper faucibus. Quisque dapibus, ante volutpat ultrices congue, nulla ante vulputate nibh, sed tincidunt risus lectus nec nulla. Proin a lorem sit amet quam mattis faucibus. Curabitur tempor condimentum sapien et hendrerit. Suspendisse ut pulvinar nibh.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vehicula ultrices convallis. Nam id pretium mi. Vivamus placerat tempus augue, vel consequat magna volutpat consectetur. Aenean aliquet vestibulum vestibulum. Aenean hendrerit, ipsum nec tincidunt imperdiet, risus ipsum tempus velit, in blandit nisi libero sed est. Curabitur id turpis orci. Duis luctus mattis consectetur. Duis tellus augue, condimentum id convallis nec, pellentesque eu massa. Integer bibendum placerat commodo.
Sed semper nibh lectus, et tristique elit. Sed libero ligula, vulputate quis facilisis a, egestas eu leo. Duis sagittis egestas massa non adipiscing. Fusce fermentum blandit elit vel lacinia. Nulla consequat varius tortor nec faucibus. Proin elementum metus ultricies lectus auctor consequat pharetra massa tempor. Cras luctus, tortor in gravida tincidunt, quam nunc consectetur enim, vel hendrerit ligula dolor non ante. Aenean mollis venenatis tortor, ut congue dolor bibendum eget. Curabitur vehicula orci sed metus elementum pellentesque.
Quisque venenatis elit nec libero tincidunt in sodales neque aliquet. Aenean blandit, urna vel faucibus rutrum, nunc nisi ultrices ipsum, vitae aliquam ligula ligula eu sapien. Pellentesque diam velit, hendrerit a tincidunt dignissim, porta sed nisi. Curabitur luctus cursus tortor, eu tincidunt mi condimentum at. In facilisis mattis sem, nec faucibus dui porttitor sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat. Vestibulum eros ante, cursus id facilisis non, cursus sed sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ultrices, risus et ornare adipiscing, leo metus accumsan diam, ac commodo magna elit et nunc. Donec faucibus tempor consectetur. Maecenas accumsan orci vitae elit molestie ullamcorper malesuada urna aliquam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, lorem at iaculis tempus, orci nibh ultrices nisi, ac sodales dolor justo eget ante. Integer nec ante id turpis molestie fermentum. Nulla dictum lacus ac neque malesuada adipiscing. Sed luctus arcu eget felis imperdiet laoreet et eu dolor. Mauris lorem sem, euismod vel scelerisque non, congue non tortor. Curabitur ut enim urna. Pellentesque vehicula, quam non dictum blandit, nunc diam tristique tellus, varius scelerisque turpis nibh at turpis. Nam fermentum, augue quis aliquam aliquet, diam ligula congue nunc, ac rutrum urna nisi eget elit. Vestibulum condimentum convallis molestie. Nam eleifend arcu laoreet massa suscipit vel posuere diam condimentum. Praesent aliquam faucibus dolor a fermentum.
Nam lacus nulla, tincidunt quis tincidunt et, pellentesque nec elit. Donec vulputate vehicula aliquet. Cras consequat erat sit amet elit feugiat laoreet. Donec semper, lorem vel lobortis consectetur, nunc est convallis orci, non fermentum ligula justo vestibulum urna. Vestibulum semper condimentum urna, quis porta dolor adipiscing vitae. Ut ornare, metus non euismod dapibus, orci arcu ultrices erat, vel condimentum nisl nulla consectetur metus. Praesent porta laoreet tortor, eget ultricies metus ullamcorper faucibus. Quisque dapibus, ante volutpat ultrices congue, nulla ante vulputate nibh, sed tincidunt risus lectus nec nulla. Proin a lorem sit amet quam mattis faucibus. Curabitur tempor condimentum sapien et hendrerit. Suspendisse ut pulvinar nibh.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vehicula ultrices convallis. Nam id pretium mi. Vivamus placerat tempus augue, vel consequat magna volutpat consectetur. Aenean aliquet vestibulum vestibulum. Aenean hendrerit, ipsum nec tincidunt imperdiet, risus ipsum tempus velit, in blandit nisi libero sed est. Curabitur id turpis orci. Duis luctus mattis consectetur. Duis tellus augue, condimentum id convallis nec, pellentesque eu massa. Integer bibendum placerat commodo.
Sed semper nibh lectus, et tristique elit. Sed libero ligula, vulputate quis facilisis a, egestas eu leo. Duis sagittis egestas massa non adipiscing. Fusce fermentum blandit elit vel lacinia. Nulla consequat varius tortor nec faucibus. Proin elementum metus ultricies lectus auctor consequat pharetra massa tempor. Cras luctus, tortor in gravida tincidunt, quam nunc consectetur enim, vel hendrerit ligula dolor non ante. Aenean mollis venenatis tortor, ut congue dolor bibendum eget. Curabitur vehicula orci sed metus elementum pellentesque.
Quisque venenatis elit nec libero tincidunt in sodales neque aliquet. Aenean blandit, urna vel faucibus rutrum, nunc nisi ultrices ipsum, vitae aliquam ligula ligula eu sapien. Pellentesque diam velit, hendrerit a tincidunt dignissim, porta sed nisi. Curabitur luctus cursus tortor, eu tincidunt mi condimentum at. In facilisis mattis sem, nec faucibus dui porttitor sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat. Vestibulum eros ante, cursus id facilisis non, cursus sed sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ultrices, risus et ornare adipiscing, leo metus accumsan diam, ac commodo magna elit et nunc. Donec faucibus tempor consectetur. Maecenas accumsan orci vitae elit molestie ullamcorper malesuada urna aliquam.</p>
</div>
</div>
<div id="right_gradient">
<div id="right_menu">
<p></p>
</div>
</div>
</div>
<!-- end of all containers -->
</div>
<div id="footer">
<p></p>
</div>
</body>
</html>
Gewijzigd op 15/09/2011 18:02:53 door Mark moes
Ger van Steenderen op 15/09/2011 18:25:31:
erg hé stylen.
Als je weet wat je doet, dan valt het wel mee ;)
wil je het voor IE7 geschikt maken moet je eens googlen op faux columns.
Bij #left_graniet & #right_graniet (vanaf regel 136) heb je alleen min-height,
kun je hier niet een 100% height plaatsen?
Groeten, Antony
Code (php)
1
2
2
background-image: url("../img/gradient.png");
background-repeat:repeat-y;
background-repeat:repeat-y;
Ga naar dit plaatje: http://i54.tinypic.com/zt7yao.png. Klik met je rechtermuisklik op het plaatje en kies "save picture as" of "afbeelding opslaan als". (Mocht deze optie niet zichtbaar zijn, dan moet je even goed met je muisaanwijzer op het plaatje klikken. Het plaatje is maar 1 pixel hoog dus de kans is groot dat je er naast klikt :-)). Sla het plaatje vervolgens op als "gradient.png" en upload het naar de img map op je server.
Succes...
@ Ozzie, jij hebt van de gradient links en rechts een afbeelding gemaakt, maar als ik dat doe, weet ik zeker dat mijn opmaak vern*t wordt, als ik het scherm kleiner maak. Dus dat is geen oplossing.
@bart, daar ben ik ook al mee bezig geweest, maar dat lukte ook niet zo best. zal daar nu nog eens mee aan het prutsen gaan.
Mark moes op 17/09/2011 16:55:20:
@ Ozzie, jij hebt van de gradient links en rechts een afbeelding gemaakt, maar als ik dat doe, weet ik zeker dat mijn opmaak vern*t wordt, als ik het scherm kleiner maak. Dus dat is geen oplossing.
Heb je het al geprobeerd?
je geeft je middelste div ook een vaste breedte dus dan is Ozzie's suggestie best wel een goeie. Maar zoek maar met google op "div same height", dan krijg je genoeg leesvoer.
Overigens blijft voor mij altijd de simpelste oplossing dat in een tabel te regelen.
Gewijzigd op 17/09/2011 17:18:21 door Ger van Steenderen
Ger van Steenderen op 17/09/2011 17:17:19:
Overigens blijft voor mij altijd de simpelste oplossing dat in een tabel te regelen.
Echter, daar zijn tabellen absoluut niet voor bedoeld :)
Ozzie PHP op 17/09/2011 17:36:07:
Echter, daar zijn tabellen absoluut niet voor bedoeld :)
Het doel heiligt de middelen :-P
Gewijzigd op 17/09/2011 18:01:30 door Ger van Steenderen
@ozzie, ik heb jou afbeelding een beetje veranderd, etc, en m nu online gezet, kijk maar eens... :D Als ik m weer vol gooi met lorem ipsum dan gaat ie inderdaad gewoon mee, da's logisch. heb m nog niet getest voor op mobiele paginas, zal daar nog een testbrowser voor zoeken. ( heb je een idee voor een mobile testbrowser?)
iig bedankt!
Gewijzigd op 17/09/2011 18:32:24 door Ger van Steenderen
Mark moes op 17/09/2011 18:29:31:
nou ja, dat is hier gelukkig niet nodig want dat is wel heel vies...
@ozzie, ik heb jou afbeelding een beetje veranderd, etc, en m nu online gezet, kijk maar eens... :D Als ik m weer vol gooi met lorem ipsum dan gaat ie inderdaad gewoon mee, da's logisch. heb m nog niet getest voor op mobiele paginas, zal daar nog een testbrowser voor zoeken. ( heb je een idee voor een mobile testbrowser?)
iig bedankt!
@ozzie, ik heb jou afbeelding een beetje veranderd, etc, en m nu online gezet, kijk maar eens... :D Als ik m weer vol gooi met lorem ipsum dan gaat ie inderdaad gewoon mee, da's logisch. heb m nog niet getest voor op mobiele paginas, zal daar nog een testbrowser voor zoeken. ( heb je een idee voor een mobile testbrowser?)
iig bedankt!
Graag gedaan... ziet er goed uit. Voor mobiel zal je een aparte versie moeten maken. Ik weet niet of er testbrowsers zijn... als je er een tegenkomt dan hoor ik het ook graag :)
Toevoeging op 17/09/2011 18:48:49:
Ger van Steenderen op 17/09/2011 18:30:40:
2 minuten of 2 avonden, lijkt mij een heel erg GOED MIDDEL :-P
Dat zegt je vriendin zeker ook altijd :-P
Quote:
Dat zegt je vriendin zeker ook altijd :-P
Heef de jouwe geluld hahahha
Gewijzigd op 17/09/2011 19:06:21 door Ger van Steenderen