xhtml
Voor naast elkaar zetten moet je op margin-left zoeken. Centreren is (dacht ik) align: center;
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
49
50
51
52
53
54
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
body {
font-family: Verdana;
font-size: 10pt;
color: #333333;
background-image: url(img/bg.PNG);
}
#hele_pagina {
position: absolute;
width: auto;
top: 20px;
z-index: 7;
}
#boven {
position: relative;
width: auto;
z-index: 6;
}
#midden {
position: relative;
width: auto;
top: 8px;
z-index: 3;
}
#menu {
position: relative;
background-color: #FFFFFF;
width: 100px;
float: left;
padding: 5px;
z-index: 5;
}
#content {
position: relative;
background-color: #FFFFFF;
width: 576px;
float: left;
left: 8px;
padding: 5px;
z-index: 4;
}
#onder_boven {
position: relative;
width: auto;
top: 16px;
z-index: 2;
}
#onder_onder {
position: relative;
background-color: #FFFFFF;
width: auto;
top: 24px;
padding: 5px;
z-index: 1;
}
font-family: Verdana;
font-size: 10pt;
color: #333333;
background-image: url(img/bg.PNG);
}
#hele_pagina {
position: absolute;
width: auto;
top: 20px;
z-index: 7;
}
#boven {
position: relative;
width: auto;
z-index: 6;
}
#midden {
position: relative;
width: auto;
top: 8px;
z-index: 3;
}
#menu {
position: relative;
background-color: #FFFFFF;
width: 100px;
float: left;
padding: 5px;
z-index: 5;
}
#content {
position: relative;
background-color: #FFFFFF;
width: 576px;
float: left;
left: 8px;
padding: 5px;
z-index: 4;
}
#onder_boven {
position: relative;
width: auto;
top: 16px;
z-index: 2;
}
#onder_onder {
position: relative;
background-color: #FFFFFF;
width: auto;
top: 24px;
padding: 5px;
z-index: 1;
}
PAGINA:
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="hele_pagina">
<div id="boven"><img src="img/header.PNG" alt="" width="702" height="143" /></div>
<div id="midden">
<div id="menu">Menu</div>
<div id="content">Content</div>
</div>
<div id="onder_boven"><img src="img/onder.jpg" alt="" width="702" height="52" /></div>
<div id="onder_onder">Site</div>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="hele_pagina">
<div id="boven"><img src="img/header.PNG" alt="" width="702" height="143" /></div>
<div id="midden">
<div id="menu">Menu</div>
<div id="content">Content</div>
</div>
<div id="onder_boven"><img src="img/onder.jpg" alt="" width="702" height="52" /></div>
<div id="onder_onder">Site</div>
</div>
</body>
</html>
Alvast bedankt!
Gewijzigd op 25/03/2005 16:24:00 door Willem
#blabla{margin-left:auto;
margin-right-auto;
}
Wil je vlug een basis-script (xhtml, css) voor een site, kan je deze online maken. Klik hier.
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
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
body {
font-family: verdana;
font-size: 10pt;
color: #333333;
background-image: url(img/bg.PNG);
}
#hele_pagina {
position: absolute;
width: 700;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 8px;
}
#boven {
position: relative;
margin-bottom: 8px;
}
#menu {
position: relative;
float: left;
width: 100px;
margin: 0;
margin-right: 8px;
padding: 5px;
background-color: #FFFFFF;
}
#content {
position: relative;
padding: 5px;
margin-left: 118px;
background-color: #FFFFFF;
}
#onder_boven {
position: relative;
margin-top: 8px;
}
#onder_onder {
position: relative;
clear: both;
padding: 5px;
margin-top: 8px;
background-color: #FFFFFF;
}
font-family: verdana;
font-size: 10pt;
color: #333333;
background-image: url(img/bg.PNG);
}
#hele_pagina {
position: absolute;
width: 700;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 8px;
}
#boven {
position: relative;
margin-bottom: 8px;
}
#menu {
position: relative;
float: left;
width: 100px;
margin: 0;
margin-right: 8px;
padding: 5px;
background-color: #FFFFFF;
}
#content {
position: relative;
padding: 5px;
margin-left: 118px;
background-color: #FFFFFF;
}
#onder_boven {
position: relative;
margin-top: 8px;
}
#onder_onder {
position: relative;
clear: both;
padding: 5px;
margin-top: 8px;
background-color: #FFFFFF;
}
pagina
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="hele_pagina">
<div id="boven"><img src="img/header.PNG" alt="" width="702" height="143" /></div>
<div id="menu">Menu</div>
<div id="content">Content</div>
<div id="onder_boven"><img src="img/lol.jpg" alt="" width="702" height="52" /></div>
<div id="onder_onder">test</div>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="hele_pagina">
<div id="boven"><img src="img/header.PNG" alt="" width="702" height="143" /></div>
<div id="menu">Menu</div>
<div id="content">Content</div>
<div id="onder_boven"><img src="img/lol.jpg" alt="" width="702" height="52" /></div>
<div id="onder_onder">test</div>
</div>
</body>
</html>
Volgende de validator is de (x)html goed. Alleen denk ik dat er nog wat overbodige dingen in de css zitten, bv: clear: both;. Staat dat er voor de sier?
Joep:
Alleen denk ik dat er nog wat overbodige dingen in de css zitten, bv: clear: both;. Staat dat er voor de sier?
lol
clear: both; gebruikt men meestal bij de <div> die voor de voettekst (footer) moet zorgen.
clear: both; werkt niet bij een absolute positionering en zorgt ervoor dat de <div> steeds onder het langste atribute blijft staan en er niet even langs glipt en zo naar boven springt.
En, het staat er ook wel mooi. ;o)
Bij die lay-out maker krijg je dit in je code:
width: 760px;
\width: 780px;
w\idth: 760px;
Waar slaat dat op?
edit:
Sorry voor al mijn vragen... Hoe komt het dat als je tekst in een div zet je hele pagina breed wordt en de lay-out verpest is?
Gewijzigd op 25/03/2005 21:37:00 door Willem
Joep:
Dus dat clear is wel nodig? Het centreren werkt nog steeds niet, ik heb al lang gezocht, ik vind het wel maar het werkt niet.
Ik zie het probleem niet onmiddelijk, zal er straks nog even naar zoeken.
Quote:
Bij die lay-out maker krijg je dit in je code:
width: 760px;
\\width: 780px;
w\\idth: 760px;
Waar slaat dat op?
width: 760px;
\\width: 780px;
w\\idth: 760px;
Waar slaat dat op?
Pfoe, hoe moet ik dit gaan uitleggen?
Zal het eens proberen doen.
Eigenlijk moet je een stukje css theorie achter de kiezen hebben. De basis van alle css opmaak en positionering is het \"box model\"
Elk element/atribuut wordt in een soort box geplaatst. Deze box bestaat uit een top, right, bottom, left, margin edge, margin, padding, border een width en een height.
Wil je bv. de totale breedte van een element (box) berekenen dan moet je de waarden padding, border en margin optellen bij de eigenschap width.
Nog mee? ;o)
Oké, wat is het probleem? Dat optelsommetje, hoe vreemd het ook mag klinken, is in verschillende browsers niet gelijk!
Dit komt omdat de ontwikkelaars van de verschillende browsers dit boxmodel op hun eigen manier hebben geïnterpreteerd.
Ik schreef dat het eigenlijk de bedoeling is om al de waarden bij mekaar op te tellen om zo aan een totale waarde te komen, in IE5 is dit niet zo. IE5 kijkt eerst naar de width van het buitenste element en alles wat daar binnen valt drukt ie naar binne. Eigenlijk is dit gemakkelijker.
Bv. Je hebt twee div\'s. Eéntje van 30% widht en ééntje van 70% width, samen is dit 100% toch?
Niet altijd., zeker als er nog wat margin en padding wordt bijgevoegd. IE6 zal de twee elementen onder elkaar door schuiven. Opera ook geloof ik.
De drie waarden (width) met/zonder backslash noemen ze IE hacks. Hoe ze precies werken weet ik niet, moet het eens opzoeken. Het komt er op neer dat er een waarde wordt gegeven voor alle browsers, IE6 en IE5
[/quote]
Quote:
edit:
Sorry voor al mijn vragen... Hoe komt het dat als je tekst in een div zet je hele pagina breed wordt en de lay-out verpest is?
Sorry voor al mijn vragen... Hoe komt het dat als je tekst in een div zet je hele pagina breed wordt en de lay-out verpest is?
Je moet de weergave van je tekst instellen in je css.
Ook niet zomaar in je (X)HTML plaatsen. Steeds tussen <p> </p>
Dus dit: width: 760px; \width: 780px; w\idth: 760px; zorgt dat de browsers alles goed laten zien?
http://www.leerlingenweb.net/temp.htm
CSS: http://www.leerlingenweb.net/templates/llweb-xhtml/css/template_css.css
Voor box-model hack heb ik een poging gedaan met voice-family
Het probleem is dat in ie het menu achter de zijbalken verdwijnt en de content naar beneden wordt geduwd.
Ik denk dat de oplossing daarvoor ligt in je padding's en margin's. Misschien dat die de middelste div er een beetje tussenuit 'persen'.
Probeer ze er eens uit te halen, en kijk of hij nog steeds de inhoud ertussen uit perst. Dan weet je in ieder geval dat het daar (niet) aan ligt. En dan kun je een toepasselijke oplossing vinden.
Omn een probleem op te lossen, moet je het eerst weten wat nou precies het probleem is.
Maar heb je ook een voorbeeld van wat er precies gebeurd als je de margins weg haalt? (screeny ?)
IE:
http://www.leerlingenweb.net/images/screeny/ie-nomargin.png
