CSS footer en content
Nu heb ik een header, met menu er onder. Daar onder heb ik een linker sidebar en daarnaast een content.
Dit heb ik gemaakt met behulp van CSS tut 3.
Nu wil ik echter nog een footer hier onderplaatsen en zorgen dat alleen de informatie die in content staat kan scrollen.
Verder moet het document liquid blijven. Dat alles er goed op komt te staan.
Kan er iemand mij helpen?
.div1 { width: 800px; height: 100px; }
.div2 { width: 200px; height: 400px; float: left; }
.div3 { width: 600px; height: 400px; overflow auto}
.div4 { width: 800px; height: 100px; }
<div class="wrapper">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">wefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwef</div>
<div class="div4">div4</div>
</div>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<style type="text/css">
div { border: solid 1px; }
.wrapper { width: 810px; height: 610px; margin: auto; }
.div1 { width: 800px; height: 100px; }
.div2 { width: 200px; height: 400px; float: left; }
.div3 { width: 600px; height: 400px; overflow auto}
.div4 { width: 800px; height: 100px; }
</style>
<body>
<div class="wrapper">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">wefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwef</div>
<div class="div4">div4</div>
</div>
</body>
</html>
<head>
<style type="text/css">
div { border: solid 1px; }
.wrapper { width: 810px; height: 610px; margin: auto; }
.div1 { width: 800px; height: 100px; }
.div2 { width: 200px; height: 400px; float: left; }
.div3 { width: 600px; height: 400px; overflow auto}
.div4 { width: 800px; height: 100px; }
</style>
<body>
<div class="wrapper">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">wefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwef</div>
<div class="div4">div4</div>
</div>
</body>
</html>
Zo goed majesteit ?:P
chill ik wist niert dat dat kon, bedankt voor de tip hoop dat je er wat aan hebt
( EDIT: de border is zodat je kunt zuien welk efect het heegft )
Gewijzigd op 01/01/1970 01:00:00 door Toine vd P
Nu wordt de pagina uitgerekt!
Verder is het ontwerp nu wel goed. Alleen hoe kan ik zorgen dat div3 een scrolblak krijgt naar beneden en de rest van de pagina geen scrolbars krijgt en vast blijft staan?
Aangepaste 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
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
<html>
<head>
<style type="text/css">
div { border: solid 1px; }
.wrapper { height: 610px; margin: auto; min-width: 700px; }
.div1 { min-width: 700px; height: 100px; }
.div2 { width: 200px; height: 400px; float: left; }
.div3 { height: 400px; overflow auto}
.div4 { min-width: 700px; height: 100px; }
</style>
<body topmargin="0" leftmargin="0">
<div class="wrapper">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nunc molestie lacinia quam. Nulla dignissim ultricies lectus. Aliquam
vulputate. Ut quis sapien molestie lacus suscipit condimentum. Nullam varius
tempus lectus. Nulla dui lectus, semper quis, hendrerit nec, sagittis vitae,
enim. Ut tincidunt luctus risus. Pellentesque eget magna in purus adipiscing
tincidunt. Maecenas pulvinar, urna id pulvinar aliquet, nulla urna feugiat
pede, vitae sollicitudin massa purus ut massa. Cras sit amet mi. <br>
<br>
Mauris augue tortor, vehicula at, tincidunt in, semper in, ante.
Pellentesque faucibus aliquam enim. Proin velit erat, blandit quis, mollis
nec, egestas vel, ante. Nulla velit lacus, venenatis id, ullamcorper at,
euismod in, orci. In hac habitasse platea dictumst. Aenean ut metus. Nunc
ligula. Phasellus vitae mauris. Morbi nec urna. Nulla lobortis, velit a
pulvinar nonummy, turpis dui gravida ante, sit amet volutpat ligula urna ac
dolor. Donec felis tortor, rhoncus quis, congue sed, sollicitudin et, nibh.
Sed tempus diam vitae dui. Suspendisse non risus. In ultrices, velit a
semper adipiscing, ante felis feugiat libero, aliquam ornare dui risus eu
leo. Pellentesque est. <br>
<br>
Duis consequat blandit arcu. Etiam lacus. Donec lacus. Pellentesque libero
ipsum, dictum dictum, varius vel, ullamcorper eget, dolor. Aliquam erat
volutpat. Phasellus id enim. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Vestibulum mollis imperdiet nunc. Nullam sit amet odio ac
augue iaculis fringilla. Pellentesque dictum erat eu urna. Sed convallis
ante eu dolor. Aliquam erat volutpat. Proin bibendum. Vestibulum malesuada,
eros non volutpat dapibus, nulla orci auctor felis, eu porta sapien urna ut
tortor. Ut nulla erat, luctus sit amet, fermentum semper, molestie vel, orci.
Donec vitae tellus eget magna interdum facilisis. Maecenas ut nisi sit amet
eros venenatis molestie. In dignissim tincidunt neque. Nullam et velit et
purus varius viverra. Ut a enim. <br>
</p></div>
<div class="div4">div4</div>
</div>
</body>
</html>
<head>
<style type="text/css">
div { border: solid 1px; }
.wrapper { height: 610px; margin: auto; min-width: 700px; }
.div1 { min-width: 700px; height: 100px; }
.div2 { width: 200px; height: 400px; float: left; }
.div3 { height: 400px; overflow auto}
.div4 { min-width: 700px; height: 100px; }
</style>
<body topmargin="0" leftmargin="0">
<div class="wrapper">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nunc molestie lacinia quam. Nulla dignissim ultricies lectus. Aliquam
vulputate. Ut quis sapien molestie lacus suscipit condimentum. Nullam varius
tempus lectus. Nulla dui lectus, semper quis, hendrerit nec, sagittis vitae,
enim. Ut tincidunt luctus risus. Pellentesque eget magna in purus adipiscing
tincidunt. Maecenas pulvinar, urna id pulvinar aliquet, nulla urna feugiat
pede, vitae sollicitudin massa purus ut massa. Cras sit amet mi. <br>
<br>
Mauris augue tortor, vehicula at, tincidunt in, semper in, ante.
Pellentesque faucibus aliquam enim. Proin velit erat, blandit quis, mollis
nec, egestas vel, ante. Nulla velit lacus, venenatis id, ullamcorper at,
euismod in, orci. In hac habitasse platea dictumst. Aenean ut metus. Nunc
ligula. Phasellus vitae mauris. Morbi nec urna. Nulla lobortis, velit a
pulvinar nonummy, turpis dui gravida ante, sit amet volutpat ligula urna ac
dolor. Donec felis tortor, rhoncus quis, congue sed, sollicitudin et, nibh.
Sed tempus diam vitae dui. Suspendisse non risus. In ultrices, velit a
semper adipiscing, ante felis feugiat libero, aliquam ornare dui risus eu
leo. Pellentesque est. <br>
<br>
Duis consequat blandit arcu. Etiam lacus. Donec lacus. Pellentesque libero
ipsum, dictum dictum, varius vel, ullamcorper eget, dolor. Aliquam erat
volutpat. Phasellus id enim. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Vestibulum mollis imperdiet nunc. Nullam sit amet odio ac
augue iaculis fringilla. Pellentesque dictum erat eu urna. Sed convallis
ante eu dolor. Aliquam erat volutpat. Proin bibendum. Vestibulum malesuada,
eros non volutpat dapibus, nulla orci auctor felis, eu porta sapien urna ut
tortor. Ut nulla erat, luctus sit amet, fermentum semper, molestie vel, orci.
Donec vitae tellus eget magna interdum facilisis. Maecenas ut nisi sit amet
eros venenatis molestie. In dignissim tincidunt neque. Nullam et velit et
purus varius viverra. Ut a enim. <br>
</p></div>
<div class="div4">div4</div>
</div>
</body>
</html>
als je div's en includes gebruikt kun je niet gaan werken met scrollbars (geloof ik?)
Groet,
Barry
Verdander:
Code (php)
1
overflow auto
In
Code (php)
1
overflow: scroll
Hierdoor krijg je bij een te klein venste scrol balken te zien.
De rest van de file moet je zo in stellen dat alles te zien is onder die formaten.
Dankt allemaal!
Met het ontwerp heb ik nu vast gesteld dat die kan draaien onder 800x600.
Maar nu mijn scherm een stap hoger staat blijft de lengte het zelfde.
Hoe kan ik zorgen dat div3 en div4 allebij grenzen aan div5 de footer die altijd onder aan de pagina staat.
De 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
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
<html>
<head>
<style type="text/css">
div { border: solid 1px; }
.div1 { min-width: 700px; height: 130px; }
.div2 { min-width: 700px; height: 33px; }
.div3 { width: 220px; height: 267px; float: left; }
.div4 { height: 267px; overflow: scroll }
.div5 { position: absolute; bottom: 0; width: 100%; height: 20px; }
</style>
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent consequat mi at ante. Vestibulum auctor diam vel urna. Sed posuere
eros in turpis. Nulla hendrerit dapibus turpis. Donec fermentum facilisis
mi. Sed nulla. Sed vel pede vitae nibh blandit dictum. Maecenas vehicula.
Phasellus malesuada ante a augue. Donec mattis pede. Suspendisse hendrerit,
odio a lacinia accumsan, quam velit egestas justo, at facilisis turpis nulla
vitae risus. Pellentesque in ante. Nunc ultricies, augue eget ultrices
auctor, tortor arcu congue sem, vel porta nisi ligula dictum mi. Nam
vulputate. Sed ornare sem nonummy neque. <br>
<br>
Sed ultricies hendrerit nibh. Etiam id quam ac urna mattis varius. Sed
massa. Proin malesuada feugiat nisi. Aliquam elit nisl, pellentesque et,
facilisis sed, dignissim in, pede. Praesent facilisis purus eu velit. Nunc
rutrum, lectus vel molestie condimentum, ligula sem dignissim erat, a
lacinia diam dui non nunc. Nunc velit. Morbi porta tortor in magna. Donec
enim dolor, facilisis vitae, volutpat in, sollicitudin condimentum, felis.
Donec a tortor eget nibh aliquet fringilla. <br>
<br>
Donec libero massa, suscipit a, semper et, sagittis et, nisi. Duis
ullamcorper. Integer velit. In urna mi, porttitor a, imperdiet vitae,
posuere ut, dolor. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Nulla eleifend convallis nunc. Aenean
sagittis nulla ut metus. Pellentesque felis mi, laoreet in, posuere et,
lacinia eu, urna. Proin vel nulla. Mauris blandit pede a elit. <br>
<br><br>
Pellentesque viverra nunc eget mauris. Integer at quam. Etiam nonummy
malesuada pede. Nunc eget nisi. Cras purus pede, rutrum vel, elementum eu,
porttitor ac, augue. Mauris malesuada venenatis nisi. Suspendisse eu augue.
Aliquam erat volutpat. Donec ac mi. Nullam varius quam quis nulla. Proin at
est vel nunc pharetra volutpat. Pellentesque tellus purus, sagittis eu,
porta eu, nonummy commodo, pede. Nullam eget leo. Donec nec augue a est
interdum gravida. Ut vestibulum. Donec venenatis ante eget tellus. Nulla vel
eros tempor leo placerat eleifend. Sed pharetra. Aliquam ullamcorper.
Pellentesque bibendum magna at ante. clear: both</p></div>
<div class="div5">div5</div>
</div>
</body>
</html>
<head>
<style type="text/css">
div { border: solid 1px; }
.div1 { min-width: 700px; height: 130px; }
.div2 { min-width: 700px; height: 33px; }
.div3 { width: 220px; height: 267px; float: left; }
.div4 { height: 267px; overflow: scroll }
.div5 { position: absolute; bottom: 0; width: 100%; height: 20px; }
</style>
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent consequat mi at ante. Vestibulum auctor diam vel urna. Sed posuere
eros in turpis. Nulla hendrerit dapibus turpis. Donec fermentum facilisis
mi. Sed nulla. Sed vel pede vitae nibh blandit dictum. Maecenas vehicula.
Phasellus malesuada ante a augue. Donec mattis pede. Suspendisse hendrerit,
odio a lacinia accumsan, quam velit egestas justo, at facilisis turpis nulla
vitae risus. Pellentesque in ante. Nunc ultricies, augue eget ultrices
auctor, tortor arcu congue sem, vel porta nisi ligula dictum mi. Nam
vulputate. Sed ornare sem nonummy neque. <br>
<br>
Sed ultricies hendrerit nibh. Etiam id quam ac urna mattis varius. Sed
massa. Proin malesuada feugiat nisi. Aliquam elit nisl, pellentesque et,
facilisis sed, dignissim in, pede. Praesent facilisis purus eu velit. Nunc
rutrum, lectus vel molestie condimentum, ligula sem dignissim erat, a
lacinia diam dui non nunc. Nunc velit. Morbi porta tortor in magna. Donec
enim dolor, facilisis vitae, volutpat in, sollicitudin condimentum, felis.
Donec a tortor eget nibh aliquet fringilla. <br>
<br>
Donec libero massa, suscipit a, semper et, sagittis et, nisi. Duis
ullamcorper. Integer velit. In urna mi, porttitor a, imperdiet vitae,
posuere ut, dolor. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Nulla eleifend convallis nunc. Aenean
sagittis nulla ut metus. Pellentesque felis mi, laoreet in, posuere et,
lacinia eu, urna. Proin vel nulla. Mauris blandit pede a elit. <br>
<br><br>
Pellentesque viverra nunc eget mauris. Integer at quam. Etiam nonummy
malesuada pede. Nunc eget nisi. Cras purus pede, rutrum vel, elementum eu,
porttitor ac, augue. Mauris malesuada venenatis nisi. Suspendisse eu augue.
Aliquam erat volutpat. Donec ac mi. Nullam varius quam quis nulla. Proin at
est vel nunc pharetra volutpat. Pellentesque tellus purus, sagittis eu,
porta eu, nonummy commodo, pede. Nullam eget leo. Donec nec augue a est
interdum gravida. Ut vestibulum. Donec venenatis ante eget tellus. Nulla vel
eros tempor leo placerat eleifend. Sed pharetra. Aliquam ullamcorper.
Pellentesque bibendum magna at ante. clear: both</p></div>
<div class="div5">div5</div>
</div>
</body>
</html>
