Toon posts:

[CSS] Jullie mening over mijn layout (GEEN sitecheck!)

Pagina: 1
Acties:
  • 55 views sinds 30-01-2008

zondag 19 oktober 2003 16:20

Acties:
  • -TheNose-
  • Registratie: Februari 2002
  • Laatst online: 13-07 09:04

-TheNose-

Topicstarter
Beste mensen, ik heb een vraagje over de manier waarop ik mijn layout gemaakt heb. Is dit volgens jullie allemaal de juiste manier? (ik heb namelijk alleen maar floats gebruikt) zo nee hoe kan ik het dan beter/anders doen en welke problemen kan ik nu eventueel verwachten?

Alvast bedankt!

ps: Ik weet dat ik hier ook al een ander topic heb lopen, maar dit is een heel andere vraag en met een andere reden dan in het andere topic.

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

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>www.fysiotherapiekrimpen.nl</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel=stylesheet href="wb.css" type="text/css">
</head>
<body>
<div id="maincontainer">
    <div id="header">[img]"img/header.gif"[/img]</div>
    <div id="spacer">&nbsp;</div>
    <div id="menucontainer">
        <div id="menubar">
    </div>
    </div>
    <div id="midcontainer">
        <div id="leftcontent">Hier komt de tekst etc...</div>
        <div id="rightcontent">Hier komen de plaatjes en aanvullende info...</div>
    </div>
    <div id="copyright">Design and concept by WebHeadZ &copy;</div>
    <div id="spacer">&nbsp;</div>
    <div id="footer"><span class="footer">Adres: Nieuwe Tiendweg 11a, 2922 EN, Krimpen aan den Ijssel<br>Tel: (0180) 51 90 01, Fax: (0180) 51 86 40, E-mail: krimpen@fysionet.nl</span></div>
</div>
</body>
</html>


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
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}

body {  
background-color:#cbcbca;
text-align:center;
}

#maincontainer {
height:100%;
width:750px;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px 0px 0px;
z-index:2;
}

#header {
float:left;
height:100px;
width:100%;
background-color:#ffffff;
background-image:url("img/header.gif");
border-left:2px solid #000000;
border-right:2px solid #000000;
border-bottom:1px solid #000000;
border-top:2px solid #000000;
margin:0px 0px 0px;
padding:0px 0px 0px;
clear:left;
z-index:2;
}

#menucontainer {
margin:0px 0px 0px;
padding:0px 0px 0px;
clear:left;
z-index:2;
}

#menubar {
float:left;
height:25px;
width:100%;
background-color:#797979;
border-left:2px solid #000000;
border-right:2px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
margin:0px 0px 0px;
padding:0px 0px 0px;
z-index:2;
}

#spacer {
float:left;
height:5px;
width:100%;
background-color:#F8981D;
line-height:1px;
border-left:2px solid #000000;
border-right:2px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
margin:0px 0px 0px;
padding:0px 0px 0px;
clear:left;
z-index:2;
}

#midcontainer {
margin:0px 0px 0px;
padding:0px 0px 0px;
clear:left;
z-index:2;
}

#leftcontent {
float:left;
height:300px;
width:66%;
background-color:#fff;
border-left:2px solid #000000;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
margin:0px 0px 0px;
padding:0px 0px 0px;
z-index:2;
}

#rightcontent {
float:right;
height:300px;
width:34%;
background-color:#F8981D;
border-left:1px solid #000000;
border-right:2px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
margin:0px 0px 0px;
padding:0px 0px 0px;
z-index:2;
}

#copyright {
float:left;
height:25px;
width:100%;
background-color:#797979;
border-left:2px solid #000000;
border-right:2px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
margin:0px 0px 0px;
padding:0px 0px 0px;
clear:left;
z-index:2;
}

#footer {
float:left;
height:50px;
width:100%;
background-color:#ffffff;
background-image:url("img/footer.gif");
text-align:left;
border-left:2px solid #000000;
border-right:2px solid #000000;
border-bottom:2px solid #000000;
border-top:1px solid #000000;
margin:0px 0px 0px;
padding:5px 125px 0px;
clear:left;
z-index:2;
}

span.footer {
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
}

zondag 19 oktober 2003 16:30

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 20:27

crisp

Devver

Pixelated

stel je vraag toch maar liever wel in je andere topic.
Als deze layout gewoon goed werkt in de meest gangbare browsers zie ik niet in wat er mis aan kan zijn, behalve dat je misschien wat meer gebruik zou kunnen maken van classes.

Intentionally left blank

Dit topic is gesloten.