De paginaindeling wil niet lukken.
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#header{
position: relative;
margin: 0px auto;
width: 600px;
top: 0;
border-style:solid;
border-color:red;
border-width:2px;
background-color: #001331;
color:white;
}
#menu{
border-style:solid;
border-color:green;
border-width:2px;
aglin:left;
}
Zopa{
border-style:solid;
border-color:green;
border-width:2px;
aglin:right;
}
body{
font: 10px verdana, tahoma, arial, sans-serif;
color: white;
background-color: #001331;
text-align:center;
}
</style>
<body>
<div id="header">Header</div>
<div id="menu">
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
</div><div id="Zopa">main</div>
</body>
</html>
<html>
<head>
<style type="text/css">
#header{
position: relative;
margin: 0px auto;
width: 600px;
top: 0;
border-style:solid;
border-color:red;
border-width:2px;
background-color: #001331;
color:white;
}
#menu{
border-style:solid;
border-color:green;
border-width:2px;
aglin:left;
}
Zopa{
border-style:solid;
border-color:green;
border-width:2px;
aglin:right;
}
body{
font: 10px verdana, tahoma, arial, sans-serif;
color: white;
background-color: #001331;
text-align:center;
}
</style>
<body>
<div id="header">Header</div>
<div id="menu">
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
</div><div id="Zopa">main</div>
</body>
</html>
Met deze code wil ik deze indeling maken:
Maar als ik de body naast het menu wil zetten loop ik al vast. De header verdwijnt als het ware en het menu komt ipv de header. nu vraag ik jullie dus mij te helpen met het creeeren van de juiste css code voor mijn pagina. Alvast bedankt!
Gewijzigd op 30/06/2010 09:39:56 door Dalando De Zuil
Chris Horeweg op 30/06/2010 10:16:08:
Je CSS (zopa) is niet goed ;-)
Toch? Maar gebruik in plaats van align het float attribuut: http://www.w3schools.com/css/pr_class_float.asp
En gebruik overflow: hidden; op de parent holder van de floated element.
Ik raad je aan om voor het linker menu en advertentieruimte een aparte div omheen te zetten die je een float: left; mee geeft. De body geef je dan een float: right mee. Hierdoor hoef je het linker menu en de advertentie holder geen float meer mee te geven.
Gewijzigd op 30/06/2010 10:19:15 door Arjan -
Code (php)
1
2
3
4
5
6
2
3
4
5
6
Zopa{
border-style:solid;
border-color:green;
border-width:2px;
aglin:right;
}
border-style:solid;
border-color:green;
border-width:2px;
aglin:right;
}
Zopa is niet gedefinieerd; geen . of # te vinden
Border style/color/width kan in één tag:
border: 2px solid green;
Aglin moet zijn align
border: 2px solid orange;
align:left;
}
#zopa{
border: 2px solid green;
align:right;
}
Met deze CSS code, blijft het nogsteeds hetzelfde.
Arjen - op 30/06/2010 10:17:15:
Toch? Maar gebruik in plaats van align het float attribuut: http://www.w3schools.com/css/pr_class_float.asp
En gebruik overflow: hidden; op de parent holder van de floated element.
Ik raad je aan om voor het linker menu en advertentieruimte een aparte div omheen te zetten die je een float: left; mee geeft. De body geef je dan een float: right mee. Hierdoor hoef je het linker menu en de advertentie holder geen float meer mee te geven.
Toch? Maar gebruik in plaats van align het float attribuut: http://www.w3schools.com/css/pr_class_float.asp
En gebruik overflow: hidden; op de parent holder van de floated element.
Ik raad je aan om voor het linker menu en advertentieruimte een aparte div omheen te zetten die je een float: left; mee geeft. De body geef je dan een float: right mee. Hierdoor hoef je het linker menu en de advertentie holder geen float meer mee te geven.
Hier al naar gekeken?
Ik heb nu een nieuwe 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
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
#header{
position: relative;
margin: 0px auto;
width: 500px;
top: 0;
}
#page{
width: 900px;
border: 1px solid black;
#bmain{
float:right;
}
#left{
float: left;
width:200px;
}
#menu{
width:198px;
}
#ad{
width:198px;
}
body{
font-family: Arial,Helvetica,sans-serif;
color: black;
text-align:center;
background-color: white;
}
position: relative;
margin: 0px auto;
width: 500px;
top: 0;
}
#page{
width: 900px;
border: 1px solid black;
#bmain{
float:right;
}
#left{
float: left;
width:200px;
}
#menu{
width:198px;
}
#ad{
width:198px;
}
body{
font-family: Arial,Helvetica,sans-serif;
color: black;
text-align:center;
background-color: white;
}
en
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<body>
<div id="page">
<div id="header">header</div>
<div id="left">
<div id="menu">menu</div>
<div id="ad">ad</div>
</div>
<div id="bmain">main</div>
</div>
<div id="page">
<div id="header">header</div>
<div id="left">
<div id="menu">menu</div>
<div id="ad">ad</div>
</div>
<div id="bmain">main</div>
</div>
Maar nu komt de css maar half door. De tekst CSS werkt niet (ik krijg nogsteeds times new roman terwijl ik toch echt om arial vraag) en de float right werkt niet.
Gewijzigd op 30/06/2010 11:32:24 door Dalando De Zuil
Code (php)
1
2
3
2
3
#page{
width: 900px;
border: 1px solid black;
width: 900px;
border: 1px solid black;
Je sluit je #page niet af.
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
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
#header{
position: relative;
margin: 0px auto;
width: 500px;
top: 0;
}
#page{
width: 900px;
border: 1px solid black;
}
#bmain{
float:right;
}
#left{
float: left;
width:200px;
}
#menu{
width:198px;
}
#ad{
width:198px;
}
body{
font-family: Arial,Helvetica,sans-serif;
color: black;
text-align:center;
background-color: white;
}
position: relative;
margin: 0px auto;
width: 500px;
top: 0;
}
#page{
width: 900px;
border: 1px solid black;
}
#bmain{
float:right;
}
#left{
float: left;
width:200px;
}
#menu{
width:198px;
}
#ad{
width:198px;
}
body{
font-family: Arial,Helvetica,sans-serif;
color: black;
text-align:center;
background-color: white;
}
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<div id="page">
<div id="header">header</div>
<div id="left">
<div id="menu">mmenu</div>
<div id="ad">adspace</div>
</div>
<div id="bmain">hoofdpagina
</div>
</div>
<div id="header">header</div>
<div id="left">
<div id="menu">mmenu</div>
<div id="ad">adspace</div>
</div>
<div id="bmain">hoofdpagina
</div>
</div>
Nu zou het moeten werken: niet dus. De border (van page) stopt waar de header stopt. wat is hier aan de hand en wat kan ik er aan doen?
Code (php)
1
2
3
4
5
2
3
4
5
#page{
width: 900px;
border: 1px solid black;
overflow: hidden;
}
width: 900px;
border: 1px solid black;
overflow: hidden;
}
De page rekt niet met de content mee ivm de floating delen. Zet dus een overflow: hidden; in je css bij #pagina.
EDIT: Voortaan beetje beter de reacties lezen, antwoord was allang gegeven...
Arjen - op 30/06/2010 10:17:15:
En gebruik overflow: hidden; op de parent holder van de floated element.
Gewijzigd op 30/06/2010 13:46:15 door Joakim Broden
Oetzie en mijn achternaam op 30/06/2010 13:43:06:
EDIT: Voortaan beetje beter de reacties lezen, antwoord was allang gegeven...
Arjen - op 30/06/2010 10:17:15:
En gebruik overflow: hidden; op de parent holder van de floated element.
Sorry, had ik over het hoofd gelezen!
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
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
#header{
position: relative;
margin: 0px auto;
width: 900px;
top: 0;
background-color:white;
}
#page{
width: 900px;
border:1px solid black;
overflow: hidden;
background-color:white;
}
#bmain{
float:right;
width:700px;
background-color:white;
}
#left{
float: left;
width:200px;
background-color:white;
}
#menu{
width:198px;
background-color:white;
}
#ad{
width:198px;
background-color:white;
}
body{
font-family: Arial,Helvetica,sans-serif;
color: black;
text-align:center;
background-color:#99D9EA;
}
position: relative;
margin: 0px auto;
width: 900px;
top: 0;
background-color:white;
}
#page{
width: 900px;
border:1px solid black;
overflow: hidden;
background-color:white;
}
#bmain{
float:right;
width:700px;
background-color:white;
}
#left{
float: left;
width:200px;
background-color:white;
}
#menu{
width:198px;
background-color:white;
}
#ad{
width:198px;
background-color:white;
}
body{
font-family: Arial,Helvetica,sans-serif;
color: black;
text-align:center;
background-color:#99D9EA;
}
html-codes
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="page">
<div id="header"><!--header + logo--></div>
<div id="left">
<div id="menu"><!-- hier zit het menu--></div>
<div id="ad">
<!-- hier zit een advertentie -->
</div>
</div>
<div id="bmain">
<!-- main pagina-->
</div>
</div>
</body>
</html>
<div id="header"><!--header + logo--></div>
<div id="left">
<div id="menu"><!-- hier zit het menu--></div>
<div id="ad">
<!-- hier zit een advertentie -->
</div>
</div>
<div id="bmain">
<!-- main pagina-->
</div>
</div>
</body>
</html>
Nu heb ik weer een probleem: nou wil ik er nog een Footer bij, die in 'page' moet zitten. maar nu heb ik 'bottom: 0px;' wel geprobeert, maar die komt nu onder bmain. kijk maar naar het plaatje:
Hoe krijg ik dit in CSS voor elkaar?
edit:(note: bmain verandert van grootte, hangt er vanaf hoe groot de inhoud van de pagina is.)
Gewijzigd op 02/07/2010 14:48:12 door Dalando De Zuil
ik edit wel met resultaten!