Problemen met centreren website

Status
Niet open voor verdere reacties.
H

HighVolume

Nieuwe gebruiker
Lid geworden
25 apr 2012
Berichten
1
Hey

Voor m'n eindwerk dien ik een website te maken. Nu is webdesign niet bepaald m'n sterkste kant. Toch is het me gelukt om m'n site vrij degelijk uitziend te maken, alleen: ik krijg hem niet gecentreerd. Ik heb dit probleem al vaker gehad en telkens tevergeeft naar een oplossing gezocht. Nu hoop ik dus dat jullie me kunnen helpen.

Zie hier de code:


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tournée Musical Aalst</title>
<style type="text/css">
#Geheel {
position:absolute;
width:370px;
height:461px;
z-index:1;
left: 180px;
top: -4px;
}
body {
background-color: #000;
}
#apDiv2 {
position:absolute;
width:671px;
height:52px;
z-index:1;
left: 173px;
top: 76px;
}
#Menu {
position:absolute;
width:530px;
height:45px;
z-index:1;
left: 217px;
top: 76px;
}
#Logo {
position:absolute;
width:280px;
height:177px;
z-index:2;
left: 360px;
top: 122px;
}
#iFrame {
position:absolute;
width:610px;
height:490px;
z-index:1;
left: 0px;
top: 187px;
}
#apDiv6 {
position:absolute;
width:200px;
height:115px;
z-index:3;
left: 63px;
top: 53px;
}
#container{
position:relative;
margin:0 auto;
}

#apDiv1 {
position:absolute;
width:151px;
height:49px;
z-index:3;
left: 778px;
top: 20px;
}
#apDiv3 {
position:absolute;
width:327px;
height:175px;
z-index:4;
left: 644px;
top: 122px;
}
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<div id="container">

<body onload="MM_preloadImages('../Buttons JPG/Nieuwe map/ButtonHomeOver.jpg','../Buttons JPG/Nieuwe map/ButtonLineUpOver.jpg','../Buttons JPG/Nieuwe map/ButtonTicketsOver.jpg','../Buttons JPG/Nieuwe map/ButtonFAQOver.jpg','../Buttons JPG/Nieuwe map/ButtonPartnersOver.jpg','../Buttons JPG/Nieuwe map/ButtonContactOver.jpg','../Afbeeldingen/Taalkeuze/netherlands klein over.png','../Afbeeldingen/Taalkeuze/britain klein over.png','../Afbeeldingen/Taalkeuze/france klein over.png','../Afbeeldingen/Taalkeuze/germany klein over.png')">
<div id="apDiv1"><a href="Tournée Musical.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Nederlands','','../Afbeeldingen/Taalkeuze/netherlands klein over.png',1)"><img src="../Afbeeldingen/Taalkeuze/netherlands klein.png" name="Nederlands" width="36" height="36" border="0" id="Nederlands" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Frans','','../Afbeeldingen/Taalkeuze/france klein over.png',1)"><img src="../Afbeeldingen/Taalkeuze/france klein.png" name="Frans" width="36" height="36" border="0" id="Frans" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Engels','','../Afbeeldingen/Taalkeuze/britain klein over.png',1)"><img src="../Afbeeldingen/Taalkeuze/britain klein.png" name="Engels" width="36" height="36" border="0" id="Engels" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Duits','','../Afbeeldingen/Taalkeuze/germany klein over.png',1)"><img src="../Afbeeldingen/Taalkeuze/germany klein.png" name="Duits" width="36" height="36" border="0" id="Duits" /></a></div>
<div id="apDiv3"><img src="../Afbeeldingen/Artiesten/Laurent Wery 2ok.jpg" width="327" height="173" /></div>
<div id="Logo"><img src="../Afbeeldingen/Logos Header/GIP logo 6.png" width="100%" height="100%" />
<div id="iFrame"><iframe name="Inhoud" src="Tournée Musical - Home.html" frameborder="0" height="100%" width="100%" scrolling="no"><p>Er is een fout opgetreden. Mogelijk ondersteunt uw browser geen iframes!</p></iframe></div>
</div>
<div id="Geheel"><img src="../Backgrounds/JPEG Bestand (Onbewerkbaar)/Tournée Generale - Background 2 OK.jpg" width="262%" height="186%" />
<div id="Menu"><a href="Tournée Musical - Home.html" target="Inhoud" onmouseover="MM_swapImage('Home','','../Buttons JPG/Nieuwe map/ButtonHomeOver.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../Buttons JPG/Nieuwe map/ButtonHome.jpg" name="Home" width="88" height="45" border="0" id="Home" /></a><a href="Tournée Musical - Lineup.html" target="Inhoud" onmouseover="MM_swapImage('LineUp','','../Buttons JPG/Nieuwe map/ButtonLineUpOver.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../Buttons JPG/Nieuwe map/ButtonLineUp.jpg" name="LineUp" width="88" height="45" border="0" id="LineUp" /></a><a href="Tournée Musical - Tickets.html" target="Inhoud" onmouseover="MM_swapImage('Tickets','','../Buttons JPG/Nieuwe map/ButtonTicketsOver.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../Buttons JPG/Nieuwe map/ButtonTickets.jpg" name="Tickets" width="88" height="45" border="0" id="Tickets" /></a><a href="Tournée Musical- FAQ.html" target="Inhoud" onmouseover="MM_swapImage('FAQ','','../Buttons JPG/Nieuwe map/ButtonFAQOver.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../Buttons JPG/Nieuwe map/ButtonFAQ.jpg" name="FAQ" width="88" height="45" border="0" id="FAQ" /></a><a href="Tournée Musical - Partners.html" target="Inhoud" onmouseover="MM_swapImage('Partners','','../Buttons JPG/Nieuwe map/ButtonPartnersOver.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../Buttons JPG/Nieuwe map/ButtonPartners.jpg" name="Partners" width="88" height="45" border="0" id="Partners" /></a><a href="Tournée Musical - Contact.html" target="Inhoud" onmouseover="MM_swapImage('Contact','','../Buttons JPG/Nieuwe map/ButtonContactOver.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../Buttons JPG/Nieuwe map/ButtonContact.jpg" name="Contact" width="88" height="45" border="0" id="Contact" /></a></div>
</div>
</div>
</body>
</html>




Sorry voor de onoverzichtelijkheid ;)

Alvast bedankt!
 
Ik zie dat je in je CSS wel een container div gebruikt om alles in te proppen.
Deze zet je vervolgens op margin: 0 auto;
Dit is een stap in de goede richting, geen margin boven/onder en links/rechts automatisch berekenen.

Echter werkt dit alleen als het element een vaste breedte heeft.
Voeg dus nog een breedte toe

Code: 
#container{
position:relative;
margin:0 auto;
width: 960px;
}

Uiteraard zo breed als je wilt.

Indien je in de css geen breedte mee wilt geven, maar wel de breedte van het element weet kan het ook als volgt:

Code: 
#container{
position:relative;
left: 50%;
margin-left: -490px; /*De helft van de breedte van je element */
}
 
Wat je ook kunt doen, is de hele #container weglaten, en de eigenschappen ervan aan de <body> vastknopen:
Code: 
body {
    width: 960px;
    margin: 0 auto;
    position: relative;
}
Dan is meteen de fout weggewerkt dat de <div id="container"> al vóór de <body> in de html staat. ;)
  • Bij een mens zit er tussen de <head> en de <body> een hals/nek, maar bij html mag er tussen de </head> en de <body> helemaal niets zitten.

Attentie!
Als je op bovenstaande manier de pagina horizontaal hebt gecentreerd, zal je waarschijnlijk alle left-instellingen van de APdiv's moeten bijstellen.
Die APdiv's hebben nu een Absolute Positie t.o.v. de linkerrand van het scherm, maar moeten dan hun positie krijgen t.o.v. de linkerrand van de gecentreerde pagina!

Er is verder ook nog iets mis in de <div id="Geheel">.
Deze heeft als opgegeven maten: {width: 370px; height:461px;}, terwijl er een image in moet komen met width="262%" height="186%".
Bij fatsoenlijke browsers past dat er niet in, en het img wordt maar zo groot als de Geheel-maten.
  • Bij Internet Explorer (IE7 getest) gaat het zoals je bedoelt: die maakt het image van de Geheel-box groter dan de box zelf, maar dat is niet volgens de regels!
Remedie is om de Geheel-box de echte grote maten te geven, en dan het image er met width="100%" height="100%" precies in te laten passen.

Tip:
Als je de verschillende div's een tijdelijke background-color geeft, kan je precies zien waar ze zitten en hoe groot ze zijn.

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan