Archief - HTML: IE <=> FF (pagina centreren)

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
K

Karre

Legacy Member
Ik zit dus met een groot probleem, ik wou dus mijn pagina centreren en in Firefox lijkt het goed te gaan, dus ik mijn hoofdcode af dus nu alles eens vlug kopieëren en dan maar de inhoud er aan toevoegen. Nu controleer ik het dus en blijkbaar gaat het totaal verkeerd in Internet Explorer, aangezien mijn leerkracht het in IE zal controleren ben ik dus totaal ten dode als ik hem dat laat zien.

Internet Explorer...

En dan hoe ik het zou willen hebben en hoe het er uit ziet in Firefox.

Het is niet echt van mijn gewoonte dat ik begin te smeken maar zou er alstublieft iemand me kunnen zeggen hoe ik in dat moet centreren in Internet Explorer :doh:. Te taal die ik gebruik is CSS/HTML en mijn code ziet er als volgt uit:

HTML:

Code: 
<html>
<head>
<title>wwww.flashmemory.be</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#254360">
<div style="width:800px; background: #FFF; color #00000; margin: 0 auto;">
<a href="index.html"><img src="img/header.jpg"></a>
<div id="menu" style="background: #254360" align="center">
	<ul>
		<li><a href="index.html">Home</a>
		<li><a href="soorten.html">Soorten</a>
		<li><a href="geheugenkaarten.html">Geheugenkaarten</a>
		<li><a href="usb.html">USB Stick</a>
		<li><a href="toepassingen.html">Toepassingen</a>
		<li><a href="contact.html">Contact</a>
	</ul>
</div>
<div id="inhoud">
<h2>Welkom op www.flashmemory.be!</h2>
<HR size="7" color="#254360">
<p>Deze site, www.flashmemory.be, is ontstaan met als doel u zo veel mogelijk informatie te kunnen geven omtrend het onderwerp 'flashgeheugen'. Wij wensen u dan ook een aangenaam verblijf op deze site en hopelijk vindt u al de informatie die u maar wenst te vinden. Indien u nog meer informatie kunt toevoegen kan u ons altijd contacteren. De desbetreffende gegevens die je nodig hebt kan u vinden onder de sectie 'contact'.</p>
<br>
<p>
</div>
</div>
<div id="copy" align="center">
&copy; www.flashmemory.be
</div>
</body>
</html>

CSS:

Code: 
#menu ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	padding: 0px 20px 0px 20px;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 12px;
	color: #FFFFFF;
}

#menu a:hover {
	background: #FFFFFF;
	color: #254360;
}

#copy {
	background: #254360;
	color: #FFFFFF;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 12px;
}

#inhoud {
	text-decoration: times new roman;
	font-size: 14px;
}

Ik weet dat het wellicht een beetje vuil gedaan is qua code maar dit is dan ook maar de eerste keer dat ik een site maak :). Natuurlijk is de inhoud nog niet af maar als al zo'n paar uur aan die site hebt zitten werken en dan ziet dat het mislukt is zakt de moet je tot in de schoenen. Een andere mogelijkheid is ook om maandag te vragen of hij gewoon de sites niet wilt controleren in Firefox :p.

Het is vooral niet bedoelt dat je dus mijn site beoordeelt maar gewoon mij eventueel kan helpen met het probleem naar welke code ik er nog moet bij zetten voor IE. Ik heb er al naar zitten zoeken op google en tevergeefs >.<.
X

Xavez

Legacy Member
Ehm, zowat heel je code is lichtjes fucked... Ik zou al beginnen met een DTD te specifiëren en IE niet nodeloos in quirksmode jagen. Waar je iets als "text-decoration: times new roman;" haalt is me ook een raadsel :s.

Heb rap even je code wat opgekuist. Ga er ook niet te veel tijd in steken maar zo heb je al een idee van hoe het eruit zou kunnen zien (de CSS heb ik voor de handigheid erbij gestoken, die kan je nog beter in een aparte file opslaan :))

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">
<head>
	<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
	<title>Flash memory</title>
	<style type="text/css" media="screen,projection">
	body {
		background: #254360;
	}
	
	#wrap {
		width: 800px;
		background: #fff; 
		color #00000;
		margin: 0 auto;
	}
	
	#menu {
		background: #254360;
	}
	
	#menu ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	#menu li {
		display: inline;
	}

	#menu a {
		padding: 0 20px;
		text-decoration: none;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 12px;
		color: #fff;
	}

	#menu a:hover {
		background: #fff;
		color: #254360;
	}

	#copy {
		background: #254360;
		color: #fff;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 12px;
		text-align: center;
	}

	#inhoud {
		font: 14px 'Times New Roman', serif;
	}
	
	hr {
		background: #254360;
		height: 7px;
	}
	</style>
</head>
<body>
<div id="wrap">
	<a href="index.html"><img src="img/header.jpg" alt="Flash memory" /></a>
	<div id="menu">
		<ul>
			<li><a href="index.html">Home</a></li>
			<li><a href="soorten.html">Soorten</a></li>
			<li><a href="geheugenkaarten.html">Geheugenkaarten</a></li>
			<li><a href="usb.html">USB Stick</a></li>
			<li><a href="toepassingen.html">Toepassingen</a></li>
			<li><a href="contact.html">Contact</a></li>
		</ul>
	</div>
	<div id="inhoud">
		<h2>Welkom op www.flashmemory.be!</h2>
		<hr />
		<p>Deze site, www.flashmemory.be, is ontstaan met als doel u zo veel mogelijk informatie te kunnen geven omtrend het onderwerp 'flashgeheugen'. Wij wensen u dan ook een aangenaam verblijf op deze site en hopelijk vindt u al de informatie die u maar wenst te vinden. Indien u nog meer informatie kunt toevoegen kan u ons altijd contacteren. De desbetreffende gegevens die je nodig hebt kan u vinden onder de sectie 'contact'.</p>
	</div>
	<div id="copy">
		<p>&copy; www.flashmemory.be</p>
	</div>
</div>
</body>
</html>
K

Karre

Legacy Member
Bedankt om me te helpen :). Er blijft wel nog altijd één probleem, hij centreert de pagina nog altijd niet in internet explorer :s.
X

Xavez

Legacy Member
That's weird...

Is je header-afbeelding misschien groter dan 800px? Ik zie niet dadelijk een probleem... Maar ik heb ook geen IE6 meer om het te testen (mac hier) :/.
K

Karre

Legacy Member
Bizar, ik teste het uit in Internet Explorer 7 en ik zag hem niet gecentreerd :s. En ik zou hem online willen zetten maar de login van Telenet werkt momenteel niet dus ik kan niet op mijn server.
B

BloodSeaker

Legacy Member
Volgens mij moet je op je body nog een text-align center hebben om het te centreren in IE6
X

Xavez

Legacy Member
Neen hoor... Die margin zou het normaal gezien moeten doen :/. Heel vreemd... Probeer de <hr /> eens weg te laten? Misschien dat die problemen geeft :/
n

n00bslayer

Legacy Member
Het is inderdaad één van de algemene centreertrucs voor IE6 en ouder (die in beide rendermodes werkt) om op je body een text-align:center te gebruiken en een text-align: left op de container die je wil centreren.

Voor die 4 of 5 jaar dat IE6 nog noemenswaardig in omloop zal zijn, is een text-align meer of minder toch maar een kleine moeite imho (hoewel dit percentage IE6 gebruikers vooral van je doelpubliek afhangt).
X

Xcessive-

Legacy Member
Bij xhtml is het niet nodig om text-align: center te gebruiken, maar ik dacht bij html wel.
U

UnD3RD0G

Legacy Member
de manier om je inhoud gecentreerd te krijgen is makkelijk en in de meeste browsers coorect als volgt :

<body>
<div id="content">
tekst
</div>
</body>

#content {width: 123px ; margin:0 auto ; }

zo simpel :)
de 123 px, is random he, eenderd welke breedte van je div is ok
B

BloodSeaker

Legacy Member
Ik vind da de crew eerst de topic moet lezen alvorens voor de derde keer hetzelfde te zeggen :p

;)
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan