Help met CSS (fouten oplossen)

killer4all2 · 6 okt 2009

Hallo,

Ik heb voor school een website'je moeten maken, mijn eerst totaal zelf geprogrammeerde en ben erachter gekomen dat andere browser's dan I:Explorer fouten rekenen in de css en daardoor een heel warrig bestand creëren.

Ik heb wat screenshots genomen van de site (hij is nog lang niet af, heb alleen de indeling nog) En geef hierbij het css script, zodat jullie misschien ook eens een kijkje kunnen nemen en mij misschien kunnen helpen dit probleem (problemen) op te lossen.

Ik zet even het hele script erbij zodat jullie dat ook kunnen bekijken.

Ik heb zelf al vernomen dat het probleem ligt bij float en margin.

Als jullie nog enige tips hebben voor mij of iets dat ik beter zou kunnen doen zou ik dit ook zeer op prijs stellen!

Groetjes,
Rowan

AfbeeldingI:Explorer

Afbeelding firefox

CSS Script

Code:

/*
Main style
*/

html			{
				margin:0px;
				padding: 0px;
			}

body 		{
				background:#fdb70f url(images/background.gif) no-repeat;
				text-align:center;
				font-family:Calibri, arial, Verdana;
				font-size:10px;
			}
	
#header		{
				background:url(images/header.png) center no-repeat;
				height:200px;
				width:750px;
				margin-top:10px;
			}
			
div.header-text	{
				text-align:right;
				margin-top:180px;
				margin-right:20px;
				font-size:11px;
			}

div.left		{
				margin:0px;
				padding:0px;
				float:left;
			}

div.right	{
				margin:0px;
				padding:0px;
				float:right;
			}
/*
Main frame
*/
		
#frame		{
				margin:0px;
				width:750px;
				font-family:eurostile, arial, Verdana;
			}

/*
Navigatie
*/

div.nav-top {
				width:215px;
				height:16px;
				background:url(images/nav-top.png) no-repeat;
				margin-left:0px;
				margin-top:5px;
				margin-right:2px;

			}

div.nav-main	{
				text-align:left;
				width:215px;
				background:url(images/nav-main.png) repeat-y;
				margin-left:0px;
				margin-right:2px;
				font-family:Verdana;
				font-size:10px;
				margin-bottom:0px;
			}
			
div.nav-bot	{
				width:215px;
				height:16px;
				background:url(images/nav-bot.png) no-repeat;
				margin-left:0px;
				margin-right:2px;
				margin-top:-1px;
			}
			
/*
Content
*/

div.content-top	{
					width:520px;
					height:16px;
					background:url(images/content-top.png) no-repeat;
					margin-top:5px;
				}
				
div.content-main	{
					text-align:left;
					width:520px;
					background:url(images/content.png) repeat-y;
				}
				
div.content-bot	{
					width:520px;
					height:16px;
					background:url(images/content-bottom.png) no-repeat;
					font-size:9px;
					font-family:Arial, Verdana;
					text-align:right;
				}

/*
Footer	
*/

div.footer		{
					width:750px;
					height:55px;
					background:url(images/footer.png) no-repeat;
					margin-top:5px;
				}

div.footer-text	{
					margin-top:19px;
					margin-bottom:5px;
					font-size:12px;
					font-family:Calibri, Arial, Verdana;
				}
	
/*
Text opmaak
*/

p				{
					font-family:Calibri, Arial, Verdana;
					font-size:12px;
					margin-left:5px;
				}

Code:

<html>
	<head>
		<title>Jumbo: Index</title>
		<link href="style.css" rel="stylesheet" type="text/css" />
	</head>
<body>
	 <div id="header">
			<div class="header-text"><a href="index.php">Home</a> <a href="index.php?content=contact">Contact</a></div>
		</div>
		<div id="frame">
			
			<!-- Begin navigatie -->
			<div class="left">
					<div class="nav-top"></div>
						<div class="nav-main">
							<ul>
								<?php
									include("/include/navigatie.php")
								?>
							<ul>
						</div>
					<div class="nav-bot"></div>
			</div>
			<!-- Einde navigatie -->

			<!-- Begin content -->
			<div class="right">
					<div class="content-top"></div>
						<div class="content-main">
						<p>
							<?php
								include("/include/content.php")
							?>
						</p>
						</div>
					<div class="content-bot"></div>
			</div>
			<!-- Einde Content -->
			
			<!-- Begin Footer -->
			<div class="footer">
				<div class="footer-text">
				&copy;2009 - Jumbo.eu
				</div>
			</div>
			<!-- Einde Footer -->
		</div>

</body>
</head>

roodrug · 10 okt 2009

Een goede doctype boven je html code zetten helpt vaak al heel goed.

dus plaats dit boven je <html> tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

killer4all2 · 13 okt 2009

roodrug zei:
Een goede doctype boven je html code zetten helpt vaak al heel goed.

dus plaats dit boven je <html> tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Bedankt voor je antwoord. Ik heb ondernomen dat het probleem ligt bij de css code, Zie het volgende:

Voorbeeld

Code:

#header	{
			width:900px;
			height:185px;
			background:url(images/header.png) no-repeat;
		}

Ik vroeg mij af waarom hij de div (<div id="header"></div>) niet in het midden plaatst, doe ik hier iets fout? Het is duidelijk dat als ik official documenttype erboven zet dat hij hem dan niet meer in het midden plaatst. Enig idee wat ik fout doe?

Goeroeboeroe · 13 okt 2009

Dat is op deze manier eigenlijk vrijwel niet te zeggen. De code staat hier wel, maar afbeeldingen, php, enz. missen. Als 't ergens online zou staan, kan er veel simpeler naar worden gekeken.
Ik kan die bestanden wel even kopiëren, maar dan is er nog steeds heel veel kans dat ik 't niet goed zie vanwege alles wat mist.

Toch 'n poging je vraag te beantwoorden. Jij bent vermoedelijk begonnen zonder doctype in Internet Explorer. Die schiet dan in 'quirks mode', waardoor de hele lay-out op 'n volkomen foutieve manier wordt weergegeven. Alle andere browsers geven dan ook vermoedelijk problemen.
Nou ga je er 'n doctype boven zetten, en dan wordt het opeens correct weergegeven. Maar omdat je hebt zitten werken zonder doctype, ziet het er alleen 'goed' uit als het 'fout' wordt weergegeven.
Je zult dus vermoedelijk behoorlijk wat moeten aanpassen. De eerste regel die je schrijft hoort altijd 'n doctype te zijn. Dat doctype zorgt ervoor dat het volgens de standaard wordt weergegeven. Dan zie je het goed in álle browsers.

Bij de css voor body staat bij jou text-align: center;
text-align is bedoeld voor inline-elementen, zoals tekst. Niet voor blok-elementen, zoals bij jou div#header. IE 6 centreert foutief ook blok-elementen hiermee. Vandaar dat je header wel wordt gecentreerd. IE 7 en 8 doen dit ook, maar alleen als er geen doctype staat. Andere browsers doen het nooit.

Ik maak 't verhaal zo lang omdat je waarschijnlijk met 'n doctype nog veel meer moet gaan corrigeren.

Voor de header:
Zet het doctype erin.

Die text-align: center; kan in principe weg bij de css voor de body, want die gaat (als je 'n doctype gebruikt) in principe alleen inline-elementen zoals tekst centreren.

Je #header heeft een breedte van 750px. Als 'n blok-element zoals 'n div 'n vaste breedte heeft, is de simpelste manier van centreren:

Code:

margin: 0 auto;

Er staan maar twee waarden voor boven en rechts. Links en onder krijgen dan automatisch dezelfde waarde, dus eigenlijk staat hier 0 auto 0 auto.
Boven en onder geen marge, links en rechts auto. auto wil zeggen: evenveel. Oftewel: altijd in het midden, ongeacht de grootte van het scherm.

Alleen heb jij nog veel meer divs, dus mogelijk zul je dit op nog veel meer plaatsen moeten doen.
'n Alternatief zou kunnen zijn om om de hele handel, dus tussen <body> en </body>, 'n 'superdiv' te zetten, 'n zogenaamde 'wrapper'. Die zou je dan 'n breedte van 750 px kunnen geven en dan op bovenstaande manier centreren.

't Scheelt trouwens 'n enorm stuk dat je cadeau zo uiterst overzichtelijk is!

peter vazed · 13 okt 2009

Een lap code:

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Jumbo: Index</title>
		<style type="text/css" >
/*
Main style
*/

#wrapper
{
width: 900px;
border: solid 2px #0000ff;
margin-left:auto;
margin-right:auto;
text-align: center;
}
html			{
				margin:0px;
				padding: 0px;
			}

body 		{
				background:#fdb70f url(images/background.gif) no-repeat;
				text-align:center;
				font-family:Calibri, arial, Verdana;
				font-size:10px;
border: 2px solid #ff0000;

			}
	
#header		{
				background:url(images/header.png) center no-repeat;
				height:200px;
				width:750px;
				margin-top:10px;
margin-left:auto;
margin-right:auto;
border: 2px solid #ff0000;
			}
			
.header-text	{
				text-align:right;
				margin-top:180px;
				margin-right:20px;
				font-size:11px;
border: 2px solid #ff0000;
			}

div.left		{
				margin:0px;
				padding:0px;
				float:left;
border: 2px solid #ff0000;
			}

div.right	{
				margin:0px;
				padding:0px;
				float:right;
border: 2px solid #ff0000;
			}
/*
Main frame
*/
		
#frame		{
				margin:0px;
				width:750px;
				font-family:eurostile, arial, Verdana;
border: 2px solid #fff000;
text-align:center;
margin-left:auto;
margin-right:auto;
			}

/*
Navigatie
*/

div.nav-top {
				width:215px;
				height:16px;
				background:url(images/nav-top.png) no-repeat;
				margin-left:0px;
				margin-top:5px;
				margin-right:2px;
border: 2px solid #ff0000;
			}

div.nav-main	{
				text-align:left;
				width:215px;
				background:url(images/nav-main.png) repeat-y;
				margin-left:0px;
				margin-right:2px;
				font-family:Verdana;
				font-size:10px;
				margin-bottom:0px;
border: 2px solid #ff0000;
			}
			
div.nav-bot	{
				width:215px;
				height:16px;
				background:url(images/nav-bot.png) no-repeat;
				margin-left:0px;
				margin-right:2px;
				margin-top:-1px;
border: 2px solid #ff0000;			}
			
/*
Content
*/

div.content-top	{
					width:520px;
					height:16px;
					background:url(images/content-top.png) no-repeat;
					margin-top:5px;
border: 2px solid #ff0000;
				}
				
div.content-main	{
					text-align:left;
					width:520px;
					background:url(images/content.png) repeat-y;
border: 2px solid #ff0000;
				}
				
div.content-bot	{
					width:520px;
					height:16px;
					background:url(images/content-bottom.png) no-repeat;
					font-size:9px;
					font-family:Arial, Verdana;
					text-align:right;
border: 2px solid #ff0000;				}

/*
Footer	
*/

div.footer		{
					width:750px;
					height:55px;
					background:url(images/footer.png) no-repeat;
					margin-top:5px;
border: 2px solid #ff0000;
				}

div.footer-text	{
					margin-top:19px;
					margin-bottom:5px;
					font-size:12px;
					font-family:Calibri, Arial, Verdana;
border: 2px solid #ff0000;
				}
	
/*
Text opmaak
*/

p				{
					font-family:Calibri, Arial, Verdana;
					font-size:12px;
					margin-left:5px;
border: 2px solid #ff0000;
				}
</style>
<meta http-equiv=content-type content="text/html; charset=windows-1252">
	</head>
<body>
<div id="wrapper">
	 <div id="header">
			<div class="header-text"><a href="index.php">Home</a> <a href="index.php?content=contact">Contact</a></div>
		</div>

<div style="clear:both;"></div>

		<div id="frame">
			
			<!-- Begin navigatie -->
			<div class="left">
					<div class="nav-top">nav</div>
						<div class="nav-main">
							<ul>
							<?php
									include("/include/navigatie.php")
								?> 
							</ul>
						</div>
					<div class="nav-bot"></div>
			</div>
			<!-- Einde navigatie -->
	<div style="clear:both;"></div>

			<!-- Begin content -->
			<div class="right">
					<div class="content-top">content-top</div>
						<div class="content-main">
						<p>content-maincontent-main
							<?php
								include("/include/content.php")
							?>
						</p>
						</div>
					<div class="content-bot">content-bot</div>
			</div>
			<!-- Einde Content -->
			<div style="clear:both;"></div>

			<!-- Begin Footer -->
			<div class="footer">
				<div class="footer-text">
				&copy;2009 - Jumbo.eu
				</div>
			</div>
			<!-- Einde Footer -->
		</div>
<div><!-- wrapper -->
</body>
</html>

gebruik gemaakt van
margin:auto
wrapper
en clear.

En natuurlijk gekleurde borders.

Zie de code.

killer4all2 · 18 okt 2009

hey nice bedankt

ik heb ff nieuwe website gemaakt, ga ik dan ook ff dit voor gebruike

555Martijn · 28 okt 2009

Sorry voor de late reactie, maar ik raad aan om websites altijd te maken/bekijken in Firefox, ben zelf fan van Chrome, maar Firefox laat alles volgens de standaard zien, meesten gevallen als die het in FF doet, dan in andere browsers ook

.

Succes.

Help met CSS (fouten oplossen)

killer4all2

Gebruiker

roodrug

Gebruiker

killer4all2

Gebruiker

Goeroeboeroe

Terugkerende gebruiker

peter vazed

Meubilair

killer4all2

Gebruiker

555Martijn

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy