Beste leden van WF,
Ik ben bezig een design om te zetten in een design zonder tabbellen dus d.m.v divs en css positioneringen. Nu ben ik niet zo'n uitmuntende ster in CSS dus vraag ik jullie om hulp.
Ik heb nu het volgende:
En zo op andere resolutie.
Nu wil ik de eerste situatie bereiken op iedere resolutie, vervolgens heb ik d.m.v. een container de max. width aangegeven.
Nu zijn mijn problemen:
1) Hoe centreer ik de container zodat hij op alle resoluties in het midden staat?
2) Hoe kan ik de sub-div's positioneren IN de container? Zodat als ik bij een subdiv left: 0px; aangeef hij links tegen de container border aangaat zitten i.p.v. links tegen je scherm border.
Live-Example:
De CSS:
en de html:
Ik ben bezig een design om te zetten in een design zonder tabbellen dus d.m.v divs en css positioneringen. Nu ben ik niet zo'n uitmuntende ster in CSS dus vraag ik jullie om hulp.
Ik heb nu het volgende:
En zo op andere resolutie.
Nu wil ik de eerste situatie bereiken op iedere resolutie, vervolgens heb ik d.m.v. een container de max. width aangegeven.
Nu zijn mijn problemen:
1) Hoe centreer ik de container zodat hij op alle resoluties in het midden staat?
2) Hoe kan ik de sub-div's positioneren IN de container? Zodat als ik bij een subdiv left: 0px; aangeef hij links tegen de container border aangaat zitten i.p.v. links tegen je scherm border.
Live-Example:
De CSS:
code:
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
| body {
background-image : url(test/behind.png);
background-repeat : repeat;
}
#container {
top: 0px;
width: 760px;
left: 13%;
}
#header {
position : absolute;
top : 0px;
width : 759px;
left : 13%;
height : 166px;
background-image : url(test/header.png);
background-repeat : no-repeat;
}
#menu {
position : absolute;
top : 136px;
width : 585px;
left : 30%;
height : 31px;
color : #FFFFFF;
}
#leftpanel {
position : absolute;
top : 166px;
left : 13%;
width : 158px;
height : 599px;
background-image : url(test/leftbar.png);
background-repeat : no-repeat;
}
#categorie {
position : absolute;
top : 200px;
left : 13%;
width : 158px;
height : 262px;
}
#statestieken {
position : absolute;
top : 491px;
left : 13%;
width : 158px;
height : 120px;
}
#rightpanel {
position : absolute;
top : 166px;
left : 76.5%;
width : 122px;
height : 599px;
background-image : url(test/rightbar.png);
background-repeat : no-repeat;
}
#content {
position : absolute;
top : 166px;
width : 479px;
height : 668px;
left : 28.7%;
background-image : url(test/content.png);
background-repeat : no-repeat;
} |
en de html:
code:
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>A - Project</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<!-- Header Here -->
<div id="header">
</div>
<!-- Menu Here -->
<div id="menu">
Alle Categorieën | Nieuwe Spullen | Vaak Bekeken | Aankondigingen
</div>
<!-- Content here -->
<div id="content">
</div>
<!-- Right column here -->
<div id="rightpanel">
</div>
<!-- Left navigation etc -->
<div id="leftpanel">
</div>
<!-- Categorieën -->
<div id="categorie">
Categorie
</div>
<!-- Statestieken -->
<div id="statestieken">
Statestieken
</div>
</div>
</body>
</html> |
:strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}
:strip_exif()/u/41306/web_anim.gif?f=community)
Nouja, je kent mijn visie op IE6 inmiddels wel, dus IE5.5 kan me nog minder interesseren /u/7685/ruinmytune-60x60.png?f=community)
Je kan dmv je templates nog zelf je DTD bepalen hoor 
