Forum » Client-Side scripting » Layout centreren
Tieske
MLormans.com
Berichten: 174
avatar
Offline Stuur privebericht
Beste CP leden,

Ik heb het toch nog maar eens geprobeerd om het element "DIV" onder de knie te krijgen,
Voor mijn gevoel gaat dit redelijk dankzij een goede tutorial online,

Ik zit nu alleen nog met een probleem,
de layout wordt momenteel links op de site uitgelijnd, maar ik zou deze graag in het midden zien.
Zonder dit met het "CENTER" element te moeten doen. (door dit boven de site en onder de site te plaatsen)

Hoe kan ik dit dus netjes doen d.m.v. CSS?
(CSS staat normaal appart, maar voor het gemak hier even in het script gezet.

Mijn huidige code/layout
Code | Selecteer Alles
minimaliseren
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
<html>
<head>
<title>Layout</title>
<style type="text/css">
<!--
body {
  margin: 0px;
  padding: 0px;
}

#header {
  background: #0f0;
  float: left;
  width: 650px;
  height: 100px;
}
#rightcol {
  background: #f00;
  float: left;
  width: 250px;
  height: 100px;
}
#leftcol {
  background: #f00;
  float: left;
  width: 250px;
}
#content {
  background: #fff;
  float: left;
  width: 650px;
}
#footer {
  background: #0f0;
  width: 900px;
  height: 25px;
}

#wrapper {
  background: black;
  clear: both;
  width: 900px;
  height: 0px;
}
-->
</style>
</head>

<body>

<div id="header">Header Section</div>
<div id="rightcol">Header right Section</div>

<div id="wrapper"></div>

<div id="leftcol">Left Section</div>
<div id="content">Index</div>

<div id="wrapper"></div>

<div id="footer">Footer Section</div>

</body>
</html>


</body>
</html>

Laatst gewijzigd door Tieske op 2011-02-20 20:05:44
20-02-2011 20:05
Dit topic is 223 keer bekeken door 42 verschillende leden
Reacties op: "Layout centreren"
1
habib10
Hmm
Berichten: 931
avatar
Offline Stuur privébericht
<center></center> alles daartussen?
20-02-2011 20:10
Tieske
MLormans.com
Berichten: 174
avatar
Offline Stuur privébericht
Dat zeg ik hierboven juist, dat ik dat niet wil,
omdat dit niet "netjes" is,

Maar het was miss een optie geweest om eerste te google voordat ik het hier ging vragen..
het het antwoord namelijk hier gevonden:
http://www.webmasterstart.nl/css/website-centreren-met-css.html

Of is/weet er hier iemand nog een betere/cleanere manier?
20-02-2011 20:14
habib10
Hmm
Berichten: 931
avatar
Offline Stuur privébericht
probeer dat en zie of het beter is?
20-02-2011 20:16
Tieske
MLormans.com
Berichten: 174
avatar
Offline Stuur privébericht
@Habib10,
Zoals ik al aangaf de manier waarop het op die site staat zo heb ik het toegepast,

maar mijn vraag daarna was dus. of er nog mensen zijn die kunnen bevestigen
of dat, dat de beste manier is en/of dat er nog een betere manier is.
20-02-2011 20:19
thexerox
thexeroxprojects.be
Berichten: 352
avatar
Offline Stuur privébericht
Code | Selecteer Alles
minimaliseren
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
<html>
<head>
<title>Layout</title>
<style type="text/css">
<!--
body {
  margin: 0px;
  padding: 0px;
}
.container {
 margin-left:auto;
 margin-right:auto;
 width:800px; /* Hier de waarde van de breedte van je site */
}
#header {
  background: #0f0;
  float: left;
  width: 650px;
  height: 100px;
}
#rightcol {
  background: #f00;
  float: left;
  width: 250px;
  height: 100px;
}
#leftcol {
  background: #f00;
  float: left;
  width: 250px;
}
#content {
  background: #fff;
  float: left;
  width: 650px;
}
#footer {
  background: #0f0;
  width: 900px;
  height: 25px;
}

#wrapper {
  background: black;
  clear: both;
  width: 900px;
  height: 0px;
}
-->
</style>
</head>

<body>
<div class="container">
<div id="header">Header Section</div>
<div id="rightcol">Header right Section</div>

<div id="wrapper"></div>

<div id="leftcol">Left Section</div>
<div id="content">Index</div>

<div id="wrapper"></div>
</div>
<div id="footer">Footer Section</div>

</body>
</html>
20-02-2011 21:09
MaffiaLords
http://www.pokemon-champi
Berichten: 174
avatar
Offline Stuur privébericht
margin: 0 auto; in container zoals thexerox doet
21-02-2011 10:12
Reageer op: "Layout centreren"
1
Je kan niet reageren omdat je niet bent ingelogd. Inloggen of Aanmelden