PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

Firefox en DIV's

Door Joakim Broden op 20-01-2009 11:28
587 views
ik heb de volgende code:

<html>
<head>
<title>Je title</title>
<style type="text/css">

html, body {
	margin: auto;
	background: #000000;

	font-family: Verdana;
	font-size: 11px;
	color: #000000;
	text-decoration: none;
}

div.website {
	height: 100%;
	width: 100%;
	text-align: center;
}

div.container {
	height: 828px;
	width: 887px;
}

div.header {
	height: 189px;
	width: 887px;
}

div.header-left {
	float: left;
	width: 225px;
	height: 189px;
	background: url(images/Solyda_01.png) no-repeat 0 0;
}

div.header-midden {
	float: left;
	width: 614px;
	height: 189px;
}

div.header-logo {
	float: left;
	width: 206px;
	height: 125px;
}

div.header-afbeelding {
	float: left;
	width: 408px;
	height: 125px;
	background: url(images/Solyda_03.jpg) no-repeat 0 0;
}

div.header-menu {
	width: 614px;
	height: 32px;
	background: url(images/Solyda_05.jpg) no-repeat 0 0;
}

div.header-bottom {
	width: 614px;
	height: 32px;
	background: url(images/Solyda_06.jpg) no-repeat 0 0;
}

div.header-right {
	float: left;
	width: 48px;
	height: 189px;
	background: url(images/Solyda_04.png) no-repeat 0 0;
}

div.content {
	height: 534px;
	width: 887px;
}

div.content-left {
	float: left;
	width: 225px;
	height: 534px;
	background: url(images/Solyda_07.png) no-repeat 0 0;
}

div.content-midden {
	float: left;
	width: 614px;
	height: 534px;
	background-color: #FFFFFF;
}

div.content-right {
	float: left;
	width: 48px;
	height: 534px;
	background: url(images/Solyda_09.png) no-repeat 0 0;
}

div.footer {
	height: 105px;
	width: 887px;
}

div.footer-top {
	width: 887px;
	height: 77px;
	background: url(images/Solyda_10.png) no-repeat 0 0;
}

div.footer-left {
	width: 225px;
	height: 28px;
	background: url(images/Solyda_11.png) no-repeat 0 0;
}

div.footer-midden {
	float: left;
	width: 614px;
	height: 28px;
	background: url(images/Solyda_12.png) no-repeat 0 0;
}

div.footer-right {
	float: left;
	width: 48px;
	height: 28px;
	background: url(images/Solyda_13.png) no-repeat 0 0;
}

</style>
</head>
<body>
<div class="website">
	<div class="container">
		<div class="header">
			<div class="header-left"></div>
			<div class="header-midden">
				<div class="header-logo"><a href="index.php"><img src="images/Solyda_02.jpg" border="0"></a></div>
				<div class="header-afbeelding"></div>
				<div class="header-menu"></div>
				<div class="header-bottom"></div>
			</div>
			<div class="header-right"></div>
		</div>
		<div class="content">
			<div class="content-left"></div>
			<div class="content-midden"></div>
			<div class="content-right"></div>
		</div>
		<div class="footer">
			<div class="footer-top"></div>
			<div class="footer-left"></div>
			<div class="footer-midden"></div>
			<div class="footer-right"></div>
		</div>
	</div>
</div>
</body>
</html>


In Internet Explorer is alles goed, in FireFox heb ik een paar fouten.
Fout 1: het menu word niet weergegeven, (Solyda_05.jpg en Solyda_05.jpg).
Fout 2: hoe centreer ik de DIV container naar het midden? In Internet Explorer staat de container mooi gecentreert in het midden en bij Firefox niet.

Kan iemand mij hier mee helpen?
M
Mitchell
20-01-2009 12:19
Fout 1: Maak hem eerst goed in Firefox, daarna in IE.

Fout 2: Maak dit van je .container voor centreren.
div.container {
    height: 828px;
    width: 887px;
    margin: 0 auto;
}

Verder kan ik weinig zonder online voorbeeld.
Joakim Broden
20-01-2009 12:39
Bedankt Mitchell, dat van centreren werkt. bedankt :)

Alleen die tip van fout 1 heb ik niet zoveel aan, hoe moet ik hem eerst goed maken in firefox als ik niet weet wat er fout gaat? terwijl hij met toeval wel goed is in IE :)

En hier is een online voorbeeld: http://solyda.oetzie.nl/ zoals je ziet worden de plaatjes in het menu en onder het menu niet weergegeven.
s
superwauwie
21-01-2009 16:35
Je zou Het voor internet explore en firefox appart kunnen maken?
Dat kan met iets van if in internet explorer.(weet niet hoe dat ookal weer precies ging. :P)

Superwauwie ;-)
M
M Ypma
21-01-2009 17:06
Dat is dus een erg slecht advies superwauwie
Edit: vermoedt ineens dat je alleen op het css bestand doelt. Ook deze uitzondering moet je eigenlijk zoveel mogelijk zien te voorkomen.
P
Pieter Jansen
21-01-2009 17:12
Probeer zoveel mogelijk goed te maken voor beide browsers!! Dus niet luisteren naar superwauwie..

Begin eens te kijken met de webtool Firebug. Hier kun je je bron live controleren op fouten en heel makkelijk dingen aanpassen. Ik vermoed dat je een fout hebt met de opmaak qua hoogte of iets dergelijks?

Ik zoek even en kom er op terug;)

edit: gevonden. Je moet je menu div even positioneren nog. Doe dit door position:relative toe te voegen aan:

div.header-menu {
background:transparent url(../images/Solyda_05.jpg) no-repeat scroll 0 0;
height:32px;
margin-top:110px; /*Kijk hier even goed naar.. dit weet ik niet zeker namelijk.............*/
position:relative;
text-align:left;
width:614px;

edit2: margin-top: moet 125px zijn
Joakim Broden
21-01-2009 17:51
aaah bedankt merijn! het werkt, heeeel erg bedankt!

Reageren

Inloggen om te reageren