Opvullen van ruimte
Ik zit met een probleem, het menu tussen de 'footer' en het 'logo' op te vullen. Overigens wilt dit niet helemaal meewerken;
De CSS is als volgt;
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
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
#page-container {
width: 100%;
height: 100%;
background: red;
position: absolute;
margin-left: -8px;
margin-top: -8px;
overflow: hidden;
}
#logo-container {
position: absolute;
width: 180px;
height: 100px;
background-color: #0000FF;
}
#header {
position: relative;
background: yellow;
height: 100px;
width:auto;
margin-left:180px;
}
#menu-container {
position: relative;
width:180px;
height:auto;
background: orange;
}
#footer {
position: absolute;
width: 180px;
height:30px;
background: black;
margin:auto;
}
width: 100%;
height: 100%;
background: red;
position: absolute;
margin-left: -8px;
margin-top: -8px;
overflow: hidden;
}
#logo-container {
position: absolute;
width: 180px;
height: 100px;
background-color: #0000FF;
}
#header {
position: relative;
background: yellow;
height: 100px;
width:auto;
margin-left:180px;
}
#menu-container {
position: relative;
width:180px;
height:auto;
background: orange;
}
#footer {
position: absolute;
width: 180px;
height:30px;
background: black;
margin:auto;
}
Nu wil ik dus dat het menu de verticale ruimte tussen de footer en het logo vult, maar ik kom er niet uit hoe ik dit doe. Wat kan ik doen om dit op te lossen?
Toevoeging op 14/02/2012 10:41:53:
Het is opgelost ik heb het nu zo gedaan;
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
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
#page-container {
width: 100%;
height: 100%;
background: red;
position: absolute;
margin-left: -8px;
margin-top: -8px;
overflow: hidden;
}
#logo-container {
position: absolute;
width: 180px;
height: 100px;
background-color: #0000FF;
}
#header {
position: relative;
background: yellow;
height: 100px;
width:auto;
margin-left:180px;
}
#menu-container {
position: absolute;
width:180px;
height:100%;
background: orange;
}
#footer {
position: absolute;
width: 180px;
height:50px;
background: green;
bottom:0;
left:0;
}
width: 100%;
height: 100%;
background: red;
position: absolute;
margin-left: -8px;
margin-top: -8px;
overflow: hidden;
}
#logo-container {
position: absolute;
width: 180px;
height: 100px;
background-color: #0000FF;
}
#header {
position: relative;
background: yellow;
height: 100px;
width:auto;
margin-left:180px;
}
#menu-container {
position: absolute;
width:180px;
height:100%;
background: orange;
}
#footer {
position: absolute;
width: 180px;
height:50px;
background: green;
bottom:0;
left:0;
}
Toevoeging op 14/02/2012 20:14:59:
Hallo, daar ben ik weer, ik heb nog even een vraag.
Naar aanleiding van een link die ik hier gevonden heb heb ik deze code gevonden;
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
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
CSS:
div#box1{
background-color: black;
width: 100%;
height: 75px;
}
div#box2{
background-color: red;
float: left;
width: 15%;
height: 200px;
}
div#box3{
background-color: green;
float: left;
width: 70%;
height: 200px;
}
div#box4{
background-color: silver;
float: left;
width: 15%;
height: 200px;
}
Bron: http://www.sceneone.nl/positionering/float.php
div#box1{
background-color: black;
width: 100%;
height: 75px;
}
div#box2{
background-color: red;
float: left;
width: 15%;
height: 200px;
}
div#box3{
background-color: green;
float: left;
width: 70%;
height: 200px;
}
div#box4{
background-color: silver;
float: left;
width: 15%;
height: 200px;
}
Bron: http://www.sceneone.nl/positionering/float.php
Met de volgende HTML;
Code (php)
1
2
3
4
5
2
3
4
5
HTML:
<div id="box1">box 1</div>
<div id="box2">box 2</div>
<div id="box3">box 3</div>
<div id="box4">box 4</div>
<div id="box1">box 1</div>
<div id="box2">box 2</div>
<div id="box3">box 3</div>
<div id="box4">box 4</div>
Hier is het resultaat: http://www.sceneone.nl/elements/voorbeeld_floating_layout.htm
Nu is dit op zich wel logisch, maar in mijn situatie heeft box 1 een vaste hoogte. Onder deze box wil ik graag box 3 hebben, en daaronder wil ik graag box 4 hebben. Box 4 heeft zeg maar ook een vaste hoogte, en wil ik graag de overige ruimte automatisch opvullen door box3 de rest van de hoogte op te vullen. Hoe kan ik dit precies doen in CSS?
Dus even in het kort
Box 1 (Vaste hoogte en breedte)
Box 3 (Komt onder box 1 met een hoogte die automatisch de pagina vult tot aan box 2 de breedte is wel vast)
Box 2 (Deze staat onder box 3 met een vaste hoogte en breedte)
Het komt er dus op neer dat box 3 de 'lege' hoogte tussen box 2 en 1 opvult, hoe kan ik dat realiseren?
Toevoeging op 14/02/2012 20:20:23:
Ik heb nog even een voorbeeld gemaakt;
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
div#box1{
background-color: black;
width: 100px;
height: 100px;
}
div#box2{
background-color: red;
width: 100px;
height: auto;
}
div#box3{
background-color: green;
float: left;
width: 100px;
height: 100px;
}
background-color: black;
width: 100px;
height: 100px;
}
div#box2{
background-color: red;
width: 100px;
height: auto;
}
div#box3{
background-color: green;
float: left;
width: 100px;
height: 100px;
}
Nu moet dus box2 de lege ruimte opvullen tussen box 3 en 1.
Er zijn nog geen reacties op dit bericht.