Google chrome laat de website goed zien... Nu de rest nog

Status
Niet open voor verdere reacties.

Mitsie007

Gebruiker
Lid geworden
21 okt 2006
Berichten
276
Hallo,

Ik heb een paar dagen terug ook een post gedaan. Deze is reeds opgelost en nu zoek ik naar de oplossing van mijn volgende fout. Ik moet erbij zeggen denk ik, dat ik verder nog nooit met CSS heb gewerkt. Ik heb mij de laatste tijd er erg in verdiept, maar echt onder controle heb ik het blijkbaar nog niet.

Dit is mijn site: http://www.myrtheroos.nl/Marianne/

In Google Chrome laat hij hem perfect zien zoals ik hem hebben wil, maar dan kom ik bij firefox en explorer en wanneer je kijkt bij portfolio, wordt mijn site iets uit zijn verband getrokken. Kan iemand kijken wat ik fout doe?

mijn HTML-code en daarna mij CSS:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<?
	include ("functions.php");
?>
	<head>
		<title>	</title>
		
		<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
		
		<link rel="stylesheet" type="text/css" href="CSS/cssSheet.css" media="screen" />
		<link rel="stylesheet" href="CSS/lightbox.css" type="text/css" media="screen" />
		
		<script type="text/javascript" src="Javascript/prototype.js"></script>
		<script type="text/javascript" src="Javascript/scriptaculous.js?load=effects,builder"></script>
		<script type="text/javascript" src="Javascript/lightbox.js"></script>
		
		<style type = "text/css">
			body {
				font-family: Veranda, Arial, Georgia;
				font-size: 12px;
				background-image:url('Image/Background/Achtergrond2.png');
				background-repeat:no-repeat;
				background-attachment:scroll;				
				background-color:#000000;
				position:fixed;
				top:0px;
				left:0;
				width:100%;
				height:100%;
			}
		</style>

	</head>

	<body>		
			<div id = "wrapper">

			<div id="menu">
				<?
				menuBalk();	
				?>
			</div>
			
			<div id="tekstveld">
				<?
					$pagina = paginaBepaling();
					laadtPagina($pagina);
				?>
			</div>
			
			<div id="footer">
				<?
				footer();
				?>
			</div>	
		</div>
	</body>
</html>

Code:
/*Standaard waarde van margin en padding*/
* {
margin: 0;
padding: 0;
}
/*Standaard waarde van de html en body*/
html, body {
	height: 90%;
	width: 90%;
	margin: 0;
	padding: 0;
}


#wrapper {
	margin: 0 auto;
	width: 1280px;
	height: 90%;
	position: relative;
}


/*Tekstveld*/
	/* Positie, kleur en gedrag van het tekstveld  - #tekstveld */
#tekstveld {
	position: absolute; 
	width: 800px; 
	height: 90%; 
	position: absolute;
	top:100px;
	left:300px;
	overflow:auto;
	color:#FFFFFF;
}
#tekstveld table{
	border: 1px solid white;
	position:absolute;
	min-width:550px;
	max-width:550px;
	top:20px;
	left:55px;
}
#tekstveld  td{
	padding-top:20px;
	padding-left:40px;
	padding-right:40px;
	padding-bottom:20px;
}
#tekstveld  img{
	max-height:150px;
	max-width:200px;
}


/* menu */
	/* De plek van het menuVeld  - #menu */
#menu ul{
	width: 500px;
	padding: 7px;
	margin-top: 50px;
	margin-left:420px;
}
	/* Hoe de menuItems worden neergezet   - #menu */
#menu li{
	display: inline;
	white-space: nowrap;
	color: #FFFFFF;
	font-size: 20px;
/* 	font-weight: bold;
 */}
	/* Uiterlijk van de menuItems   - #menu */
#menu a{
	padding-left: 1em;
	padding-right: 1em;
	font-family: Georgia, Helvetica, sans-serif;
	text-decoration: none;
	color: #BA59E3; /*scr1 =>#7C108B  scr2 =>#B94AB6 scr3 =>#B417CA scr4 =>#8815CC scr5 =>#9120C1 scr6 =>#BA59E3 scr7 =>#CA17C6 */
}
	/* Actie wanneer er met de muis over de link wordt gegaan   - #menu */
#menu a:hover{
	color: #FFFFFF;
	font-weight:bold;
}


/* footer */
	/* De plek waar de footer komt en wat het doet met de tekst  - #footer*/
#footer{
	position: absolute;
	bottom: 0; 
	height: 60px;
	width: 100%;
	text-align: center;
}
	/* Lettertype en kleur van de link naar de webdesigner  - #footer*/
#footer a{
	text-decoration: none;
	font-family:Book Antiqua, Georgia, Verdana;
	font-size:12px;
	color: #FFFFFF;
}
	/* Actie wanneer er met de muis over de link wordt gegaan  - #footer*/
#footer a:hover{
	font-weight:bold;
	font-size:13px;
}
#footer img{
	bottom: 0px;
}
	/* Waar de tekst wordt geplaatst binnen de footer  - #tekstFooter*/
#tekstFooter{
	font-size:11px;
	position: absolute;
	top: 20px;
	left:1000px;
	color: #FFFFFF;
	z-index:1; 
}

P.s. mijn website is gevalideerd
 
Ik ben al bezig geweest met mijn code. De footer heb ik aangepast en die blijft nu beter op zijn plek hangen. Zelfs Internet Explorer toont het nu op een goede manier. Dus ik ben weer blij.

Iedereen die gekeken heeft en geprobeerd heeft te achterhalen wat er was, bedankt ;)
 
Hoi Mitsie007,
Ik wil je feestvreugde liefst niet bederven, maar het zit nog niet helemaal snor...
Als je de site bekijkt op een resolutie van 1024x768px (die nog vrij veel mensen gebruiken), staan de pagina's niet meer mooi gecentreerd. En bij het oproepen van een vergroting kan die aan de onderkant uit beeld raken (bij een staande foto), en is ook het Close-kruisje niet meer te zien. Verder is de footer vrijwel helemaal rechts uit beeld geschoven. En: er zijn geen scrollbars om bij de ontbrekende delen te komen! :confused:
Bij een hogere resolutie doet zich hetzelfde voor, als iemand aan de linkerkant een zijpaneel (favorieten, geschiedenis) open heeft staan:
De hoofd-boosdoeners zijn de css position-eigenschappen. Die zijn altijd erg verraderlijk:
  • De body {position: fixed;} en de vast ingestelde breedte van 100% maken samen de scrollbars onmogelijk.
  • De {position:absolute;} van andere elementen maakt dat het centreren niet zo jofel zit.
Hé, nu vliegt je server er uit, en kan ik niet verder. Zeker bedtijd. ;)

Met vriendelijke groet,
CSShunter
 
:O ik lees het nu pas. Dank je voor de tip!

Ik ga daar ook eens even aan sleutelen, want hij moet wel goed worden weergegeven op elke computer natuurlijk. Ben ook echt nog maar een beginner en gebruik CSS sinds een paar weken. (Tijd voor een boek over CSS :p)

Ik zal eens kijken hoever ik kom met het resolutie probleem. Ik kan vast een paar topics vinden die hierover gaan!

In elk geval bedankt.
 
Hier is iemand, die nooit een boek over css gekocht of gelezen heeft, en ook niet nodig had: ik heb alles van internet geplukt. :)
Ken je deze al:
Kan je vast even voort... ;)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Weet je misschien ook hoe ik mijn website het beste kan testen? Browsers en resoluties?
 
Website testen:
Zowiezo de verschillende browsers op je computer installeren, dus IE 8, Firefox, Opera, Chrome en Safari.

Hoe webpagina's op lagere resoluties (en niet op volledig scherm werken) reageren kun je makkelijk testen door je browser niet in volledig scherm te zetten en de grote van het scherm te veranderen. Een aantal toolbars bieden de mogelijkheid om je scherm naar een exacte resolutie te veranderen, maar dit is niet per se nodig.
O ja, kijk ook even hoe de pagina reageerd op in- en uitzoomen in de verschillende browsers.

Oudere versies van Internet Explorer (en nu ook IE9) kun je testen met bijvoorbeeld: IETester

Voor browsers op ander soort systemen met andere resoluties en oudere versies van browsers kun je terecht op browsershots.org/
Je kunt hier afbeeldingen van de weergave van pagina's van je site opvragen, deze geven alleen weer hoe de pagina gerenderd wordt, je kunt de werking van interactieve dingen niet testen.

Ik ben er even vanuit gegaan dat je Windows gebruikt
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan