Tekst wordt onder de div getoond:S
Ben bezig met het maken van me weblayout in divjes.
Nu heb ik 1 div die mee moet rekken als die groter is dan een bepaalde lengte.
Nu heb ik dus het menu en de content in 2 aparte div gezet en deze weer in 1 andere div omdat die moet uitrekken als het menu of als de content te groot is.
maar nu is het probleem dat ik dacht dat ik het menu en de content naast elkaar had geplaats, maar hij zet ze onder elkaar.
Vraagje, hoe kan ik dit oplossen?
Voorbeeld http://goblinwar.nl/test/
html:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="container">
<div id="header">
</div>
<div id="menucontentwrap">
<div id="menu">
</div>
<div id="content">
</div>
</div>
</div><!-- einde van de container -->
<div id="footer"> <img src='img/footer.jpg' width='800' height='60' alt=""/>
</div>
<div id="header">
</div>
<div id="menucontentwrap">
<div id="menu">
</div>
<div id="content">
</div>
</div>
</div><!-- einde van de container -->
<div id="footer"> <img src='img/footer.jpg' width='800' height='60' alt=""/>
</div>
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
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
#header
{
padding:0px;
top: 5px;
text-align:center;
height: 200px;
width:800px;
background-color:#c9ddc2;
background-image:url(../img/header.jpg);
background-repeat:no-repeat;
}
#menucontentwrap
{
top:200px;
min-height:400px;
}
#menu
{
background-color:#054109;
width:200px;
min-height:400px;
}
#content
{
margin-left:200px;
width:565px;/* 600 - 35 padding*/
padding-left:35px;
}
#container
{
position:relative;
width:800px;
}
#footer
{
position:relative;
width:800px;
height:60px;
background-image:url(../img/footer.jpg);
background-repeat:no-repeat;
}
{
padding:0px;
top: 5px;
text-align:center;
height: 200px;
width:800px;
background-color:#c9ddc2;
background-image:url(../img/header.jpg);
background-repeat:no-repeat;
}
#menucontentwrap
{
top:200px;
min-height:400px;
}
#menu
{
background-color:#054109;
width:200px;
min-height:400px;
}
#content
{
margin-left:200px;
width:565px;/* 600 - 35 padding*/
padding-left:35px;
}
#container
{
position:relative;
width:800px;
}
#footer
{
position:relative;
width:800px;
height:60px;
background-image:url(../img/footer.jpg);
background-repeat:no-repeat;
}
Gewijzigd op 01/01/1970 01:00:00 door Dennis
Edit: Het gaat erom dat menu en content niet goed in de menucontentwrap worden gezet.
Gewijzigd op 01/01/1970 01:00:00 door Dennis
Zorg er alleen wel voor dat wanneer je positions gebruikt, je er op let dat het goed uitvalt. De tekst is momenteel geen position. content in ieder geval niet.
Wat je het beste kunt doen is per horizontale rij een container div er om heen zetten.
in jou geval een header rij, pijltjes rij, content rij, footer rij.
Die content rij kun je dan wel absoluut positioneren, maar kun je ook floaten. Ligt eraan wat je zelf wil.
Met floating werkt het waarschijnlijk makkelijker om je footer eronder te te krijgen. zorg er wel voor dat de breedtes kloppen. Anders gaat je gefloate element er alsnog onder. Let ook op dat IE de dubbele margin bug heeft, dus dat IE6 en 7 de breedtes (links en rechts) dubbel pakt.
Verder zou ik ook de hele site centreren in het midden. Oogt wat beter, en leest ook een stuk makkelijker.