Pagina div groet niet mee
Ik ben bezig met een kleine simpele layout... Nu wil ik de container mee laten groeien maar dat werkt niet... Nu valt het menu dus buiten de pagina... Help?
Dalando
Gewijzigd op 27/11/2010 13:36:19 door Dalando De Zuil
Of dat ze niet allemaal even groot hoeven te blijven ?
Toevoeging op 27/11/2010 00:35:48:
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
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
<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
<style type="text/css">
body {
background-color: #DDDDDD;
text-align:center;
}
body, td, div, ul, button, textarea, input {
font: 12px helvetica,arial,sans-serif;
}
#header1 {
background-color: #FD0000;
}
#headertext {
font-size:40px;
}
#header2 {
background-color: #C90000;
}
#container {
width: 800px;
background-color: #FFF;
border 1px solid;
margin: 0 auto;
}
#left {
width: 200px;
min-height: 20px;
float: left;
background-color: #2f2f2f;
}
#center {
width: 400px;
min-height: 20px;
margin: 0 0 0 200px;
background-color: #DD22DD;
}
#right {
width: 200px;
min-height: 20px;
float: right;
background-color: #2f2f2f;
margin: -82px 0 0 598px;
}
#categorie {
text-align: center;
width: 198px;
height: 20px;
background-color: #FFF;
border: 1px solid;
}
#categoriec {
text-align: center;
width: 400px;
height: 20px;
background-color: #FFF;
border: 1px solid;
}
</style>
</head>
<body>
<div id="header1">
<span id="headertext">Header</span>
</div>
<div id="header2">
Subheader
</div>
<div id="container">
<div id="left">
<div id="categorie">Cato Links</div>
lol<br />
lol<br />
lol<br />
lol<br />
</div>
<div id="right">
<div id="categorie">Cato Rechts</div>
lol<br />
lol<br />
lol<br />
lol<br />
lol<br />
lol<br />
lol<br />
lol<br />
</div>
<div id="center">
<div id="categoriec">Cato Midden</div>
Center Text
</div>
</div>
</body>
</html>
<html>
<head>
<title>Layout</title>
<style type="text/css">
body {
background-color: #DDDDDD;
text-align:center;
}
body, td, div, ul, button, textarea, input {
font: 12px helvetica,arial,sans-serif;
}
#header1 {
background-color: #FD0000;
}
#headertext {
font-size:40px;
}
#header2 {
background-color: #C90000;
}
#container {
width: 800px;
background-color: #FFF;
border 1px solid;
margin: 0 auto;
}
#left {
width: 200px;
min-height: 20px;
float: left;
background-color: #2f2f2f;
}
#center {
width: 400px;
min-height: 20px;
margin: 0 0 0 200px;
background-color: #DD22DD;
}
#right {
width: 200px;
min-height: 20px;
float: right;
background-color: #2f2f2f;
margin: -82px 0 0 598px;
}
#categorie {
text-align: center;
width: 198px;
height: 20px;
background-color: #FFF;
border: 1px solid;
}
#categoriec {
text-align: center;
width: 400px;
height: 20px;
background-color: #FFF;
border: 1px solid;
}
</style>
</head>
<body>
<div id="header1">
<span id="headertext">Header</span>
</div>
<div id="header2">
Subheader
</div>
<div id="container">
<div id="left">
<div id="categorie">Cato Links</div>
lol<br />
lol<br />
lol<br />
lol<br />
</div>
<div id="right">
<div id="categorie">Cato Rechts</div>
lol<br />
lol<br />
lol<br />
lol<br />
lol<br />
lol<br />
lol<br />
lol<br />
</div>
<div id="center">
<div id="categoriec">Cato Midden</div>
Center Text
</div>
</div>
</body>
</html>
Hoop dat t nu is zoals je t wil,
Heb alleen wat kleuren toegepast, werk wat makkelijker.
Acie
Hier zie je links dat het menu buiten de pagina valt, dat wil ik dus niet,hoe moet ik dat oplossen?
je float beter gebruiken is de oplossing.
Voeg is text/linkjes toe in een menu,
Dan vallen ze er niet buiten ?
Milo S op 27/11/2010 08:46:52:
- inline style...
je float beter gebruiken is de oplossing.
je float beter gebruiken is de oplossing.
Inline style maakt toch geen verschil?
#page:after {
content: ".";
display: block;
clear: both;
height: 0;
overflow: hidden;
}
(dit werkt het zelfde als overflow: hidden; op de page alleen dit is handiger want als je overflow: hidden gebruikt kun je bv niks buiten de div positioneren via position)
(Google is your friend)
En je blijft zelfde vraag stellen.
Goed floaten, clearen en overflow hidden gebruiken.
Quote:
Nou moet ik het nog gaan onthouden!
Hoe vaak heb ik dit nu al niet gehoord?
En sinds wanneer groet een div? ( Edit even je titel )
EDIT:
Weer zou iemand die code verwijderd.. zucht
Gewijzigd op 27/11/2010 22:04:54 door Niels K