Midden

**Appelmoes** · 14 juli 2012, 12:14

Hallo

Ik ben bezig aan een website, maar alles moet in het midden staan en het staat aan de rechtste kant.
deze.jpg
Zie plaatje!
Hier onder mijn code.

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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
 
 
<head>
 
<link rel="shortcut icon" href="http://www.images.kalehabbo.be/icon_kh.gif" type=".gif" />
 
<link rel="stylesheet" type="text/css" href="http://www.kalehabbo.be/v4/style/style.css" />
 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
 
<title>Kalehabbo ~ Kaal is het nieuwe haar...</title>
 
 
 
<script type="text/javascript">
 
 
 
  var _gaq = _gaq || [];
 
  _gaq.push(['_setAccount', 'UA-21932342-1']);
 
  _gaq.push(['_trackPageview']);
 
 
 
  (function() {
 
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 
  })();
 
 
 
</script>
 
 
 
 
 
</head>
 
<body>
 
 
 
<div id="wrapper">
 
    <div id="content">
 
        <div id="text-container">
 
            <div id="text-top"></div>
 
            <div id="text-content">
 
                <p>
 
                <b>Goedemiddag en welkom op Kalehabbo! Leuk dat je ons bezoekt!</b> 
<BR><BR>
KaleHabbo is een humoristische soaps en series fansite met grappen over Habbo's zonder haar. Deze Habbo's beleven de meest hilarische dingen waar je lachspieren overuren van gaan maken!
<BR><BR>
Sinds 31 augustus 2010 zijn wij een officiele fansite van Habbo! Dit betekent dat Habbo onze website heeft goedgekeurd. Wij zijn dus helemaal volgens de Habboregels.
 
 
                </p>
 
            </div>
 
            <div id="text-bottom"></div>
 
    
 
 
 
<center><a href="http://www.kalehabbo.be"><img src="http://www.kalehabbo.be/v4_4423/mouseover_logo3.gif" onmouseover="this.src='http://www.kalehabbo.be/v4_4423/mouseover_logo2.gif'" onmouseout="this.src='http://www.kalehabbo.be/v4_4423/mouseover_logo3.gif'" style="position: absolute; top: -31px; left: 195px;"></a></center>
<center><a href="http://www.kalehabbo.be/v4/actueel/"><img src="http://www.kalehabbo.be/v4/actueel/nieuwste_aflevering.PNG"" style="position: absolute; top: 313px; left: -7px;"></a></center>
<center><a href="http://www.kalehabbo.be/v4/actueel/"><img src="http://www.kalehabbo.be/v4/actueel/na_1.gif" onmouseover="this.src='http://www.kalehabbo.be/v4/actueel/na_2.gif'" onmouseout="this.src='http://www.kalehabbo.be/v4/actueel/na_1.gif'" style="position: absolute; top: 313px; left: -7px;"></a></center>
<center><a href="http://www.kalehabbo.be/v4/archief/"><img src="http://www.kalehabbo.be/v4/style/layout/menu/archief1.gif" onmouseover="this.src='http://www.kalehabbo.be/v4/style/layout/menu/archief2.gif'" onmouseout="this.src='http://www.kalehabbo.be/v4/style/layout/menu/archief1.gif'" style="position: absolute; top: 19px; left: 333px;"></a></center>
<center><a href="http://www.kalehabbo.be/v4/het_stripboek/"><img src="http://www.kalehabbo.be/v4/style/layout/menu/stripboek1.PNG" onmouseover="this.src='http://www.kalehabbo.be/v4/style/layout/menu/stripboek2.PNG'" onmouseout="this.src='http://www.kalehabbo.be/v4/style/layout/menu/stripboek1.PNG'" style="position: absolute; top: 19px; left: 475px;"></a></center>
<center><a href="http://www.kalehabbo.be/v4/"><img src="http://www.kalehabbo.be/v4/style/layout/menu/home1.PNG" onmouseover="this.src='http://www.kalehabbo.be/v4/style/layout/menu/home2.PNG'" onmouseout="this.src='http://www.kalehabbo.be/v4/style/layout/menu/home1.PNG'" style="position: absolute; top: 140px; left: 333px;"></a></center>
<center><a href="http://www.kalehabbo.be/v4/over_ons/"><img src="http://www.kalehabbo.be/v4/style/layout/menu/over_ons1.PNG" onmouseover="this.src='http://www.kalehabbo.be/v4/style/layout/menu/over_ons2.PNG'" onmouseout="this.src='http://www.kalehabbo.be/v4/style/layout/menu/over_ons1.PNG'" style="position: absolute; top: 250px; left: 333px;"></a></center>
<center><a href="http://www.kalehabbo.be/v4/gestopt/"><img src="http://www.kalehabbo.be/v4/style/layout/menu/gestopt1.PNG" onmouseover="this.src='http://www.kalehabbo.be/v4/style/layout/menu/gestopt2.PNG'" onmouseout="this.src='http://www.kalehabbo.be/v4/style/layout/menu/gestopt1.PNG'" style="position: absolute; top: 250px; left: 503px;"></a></center>
<center><img src="http://www.kalehabbo.be/v4/style/layout/menu/plaatje.PNG" style="position: absolute; top: 313px; left: 120px;"></center>
 
 
</body>
 
</html>

Waar zit de fout?

Brent

**snijworst** · 14 juli 2012, 22:04

<BODY>
<CENTER>

Volgens mij moet dat voldoende zijn...

**Naarling** · 14 juli 2012, 22:45

Nee... niet alleen is dat niet voldoende, het is ook nog eens hartstikke fout. De <center> tag is meer dan tien jaar geleden verouderd verklaard, waarom het ding blijft opduiken is mij eerlijk gezegd een raadsel (bovendien is het fout om een HTML tag te openen en niet af te sluiten.

De daadwerkelijke oplossing is erg simpel, in je CSS bestand moet bij #wrapper margin:0 auto; staan, i.p.v. margin: auto;

PS: Snijworst met appelmoes? Waar blijven de patatten?

**Appelmoes** · 15 juli 2012, 19:20

Bedankt, die zijn nog aan het aan bakken!

**Appelmoes** · 19 juli 2012, 23:01

Hoi!Ik was op vakantie en had het antwoord nog niet kunnen uitvoeren.
Maar in mijn CSS bestand saat bij wapper:

HTML Code:

1
2
3
4
#wrapper {
    width: 705px;
    margin: auto;
}

**csshunter** · 21 juli 2012, 14:18

Hoi Appelmoes,
Als ik nu naar www.kalehabbo.be/v4/ ga, staat ie keurig horizontaal in het midden:

Gewoon met de:

Code:

#wrapper {
	width: 705px;
	margin: auto;
}

@Naarling:
Het verschil met:

Code:

#wrapper {
	width: 705px;
	margin: 0 auto;
}

is ... niets!

Want als alle margins op auto staan, staan de margin-left en margin-right dat ook > dus horizontaal gecentreerd (bij opgegeven breedte).
En de auto's voor boven en beneden vallen terug op de standaard-waarde nul.
Dus de vallende auto's kunnen de patatten niet pletten.

Met vriendelijke groet,
CSShunter

Onderwerp: Midden

Onderwerp opties

Zoek in onderwerp

Vraag is niet opgelost

Midden

Berichtenregels

Helpmij.nl

Helpmij.nl en business

Contact