Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Reeds gemaakte site centreren (layers)

KaMiKaZeeee
6 antwoorden
  • Hallo,

    Ik heb al een tijdje een een eigen website.
    De site is voornamelijk opgebouwd uit plaatjes die ik in verschillende layers heb geplaatst.
    1 grote hoofdlayer voor de achtergrond en een heel aantal kleintjes die genest zijn op deze eerste.
    Nu is het zo dat mijn website altijd goed gecentreerd is geweest.
    Ik deed dit doormiddel van margin:0auto;[/color:6de42c31a3] en position:relative;[/color:6de42c31a3] te gebruiken, waardoor de hoofdlayer in het midden kwam te staan en de rest van de layers netje meegingen.
    Nu heb ik sinds kort IE7, en krijg ik mijn website opeens niet meer gecentreerd.
    De site is of naar links uitgelijnd, of (als ik hem probeer te centreren doormiddel van de eerder genoemde codes) dan gaat hij helemaal naar rechts in in mijn beeld.
    Voorbeeld1: http://img92.imageshack.us/img92/9963/untitled1copyxi8.jpg

    Ik heb op meerdere websites gekeken en er worden verschillende dingen aangeraden.
    Bijvoorbeeld door <center></center>[/color:6de42c31a3] te gebruiken, of door width:100%"; align="center";[/color:6de42c31a3] te gebruiken om de hoofdlayer te centreren.
    Nu gebeuren er 2 dingen…. De website wordt in plaats van gecentreerd helemaal naar rechts geschoven (zoals u in het voorbeeld hierboven ook kan zien), of alleen de hoofdlayer centreerd zich maar de genestte layers blijven op hun plek.
    Voorbeeld2: http://img92.imageshack.us/img92/3475/untitled2copygh0.jpg
    1 ding doet hij in ieder geval niet en dat is goed centreren.

    Het vreemde is dat als ik de code width:100%"; align="center";[/color:6de42c31a3] gebruik op een nieuw html document met slechts 1 layer en een plaatje erin, dan werkt het dus perfekt.
    Maar om 1 of andere reden wil het op mijn website niet werken, vermoedelijk omdat er meerde genestte layers aan de hoofdlayer vastzitten.

    Ik weet niet meer zo goed wat ik moet doen en kan echt hulp gebruiken.
    Ik zal de broncode hieronder kopieren.
    Alvast bedankt

    KaMi :D :D


    [code:1:6de42c31a3]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="imagetoolbar" content="no" >
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="description" content="BUDDY music to enjoy. Voor al uw muzikale omlijstingen!!">
    <meta name="keywords" content="buddy, van, zutphen, music, to, enjoy, muziek">
    <title>BUDDY music to enjoy</title>
    <style type="text/css">
    <!–
    body {
    background-color: #1b1b1b;
    }
    –>
    </style>
    <script language="JavaScript" type="text/JavaScript">
    <!–
    function MM_reloadPage(init) { /
    eloads the window if Nav4 resized
    if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
    else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);

    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[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }

    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[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }

    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }

    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[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //–>
    </script>
    </head>

    <body onLoad="MM_preloadImages('home2.gif','01b.gif','07b.gif','04b.gif','06b.gif','05b.gif','02b.gif','03b.gif')">
    <div id="Layer2" style="position:absolute; width:200px; height:115px; z-index:1; margin: 0 auto;">
    <div id="Layer5" style="position:absolute; width:69px; height:16px; z-index:5; left: 247px; top: 141px;">
    <div align="center"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','home2.gif',1)"><img src="home.gif" alt="" name="Image11" width="150" height="21" border="0"></a></div>
    </div>
    <div id="Layer4" style="position:absolute; width:200px; height:177px; z-index:4; left: 333px; top: 599px;">
    <div align="center"><img src="welkom2.jpg" alt="" width="371" height="288"></div>
    </div>
    <div id="Layer3" style="position:absolute; width:200px; height:115px; z-index:3; left: 225px; top: 230px;">
    <div align="center"><img src="welkom.jpg" alt="" width="564" height="263"></div>
    </div>
    <div align="center"><img src="background.jpg" alt="" width="975" height="940"> </div>
    <div id="Layer1" style="position:absolute; width:27px; height:33px; z-index:2; left: 72px; top: 222px;">
    <div align="center">
    <p><a href="prijzen.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','01b.gif',1)"><img src="01a.gif" alt="" name="Image5" width="70" height="51" border="0"></a></p>
    </div>
    </div>
    <div id="Layer11" style="position:absolute; width:36px; height:33px; z-index:2; left: 72px; top: 840px;"><a href="filmpjes.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','07b.gif',1)"><img src="07a.gif" alt="" name="Image12" width="70" height="51" border="0"></a></div>
    <div id="Layer8" style="position:absolute; width:49px; height:42px; z-index:2; left: 72px; top: 531px;"><a href="verhaal.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','04b.gif',1)"><img src="04a.gif" alt="" name="Image8" width="70" height="51" border="0"></a></div>
    <div id="Layer9" style="position:absolute; width:34px; height:26px; z-index:2; left: 72px; top: 737px;"><a href="muziek.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','06b.gif',1)"><img src="06a.gif" alt="" name="Image9" width="70" height="51" border="0"></a></div>
    <div id="Layer10" style="position:absolute; width:46px; height:37px; z-index:2; left: 72px; top: 634px;"><a href="fotos.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','05b.gif',1)"><img src="05a.gif" alt="" name="Image10" width="70" height="51" border="0"></a></div>
    <div id="Layer6" style="position:absolute; width:35px; height:22px; z-index:2; left: 72px; top: 325px;"><a href="contact.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','02b.gif',1)"><img src="02a.gif" alt="" name="Image6" width="70" height="51" border="0"></a></div>
    <div id="Layer7" style="position:absolute; width:54px; height:30px; z-index:2; left: 72px; top: 428px;"><a href="repertoire.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','03b.gif',1)"><img src="03a.gif" alt="" name="Image7" width="70" height="51" border="0"></a></div>
    </div>
    </body>
    </html>
    [/code:1:6de42c31a3]


    ps: Ik ben niet goed met codes (knoppenklikker lol), dus zouden jullie het niet al te moeilijk willen maken… Dankjewel :oops:
  • De links naar je plaatjes lijken me niet compleet. Krijg iig niks te zien.
  • Edit: ow je bedoeld die imageshack files…

    Vreemd ik heb ze gister nog nagekeken, ik zal ze even opnieuw uploaden.



    Edit2: ze doen het nu.. thanks
  • Wat als je voor je hoofd layer start tikt: <div align=center> en ook de grote hoofdlayer afsluit met een </div>?
  • Dit werkt helaas niet…

    Als ik met die code alleen de regel insluit waar de hoofdlayer instaat, dan centreerd alleen die layer en de rest de layers blijft staan zoals in voorbeeld 2.

    En als ik het hele gedeelte met alle layers insluit doormiddel van die code, dan gaat de hele website naar rechts zoals in voorbeeld 1.
    En ook als ik alleen <div align=center> gebruik zonder </div> aan het einde gaat ook dan de hele website naar rechts.
  • [quote:ba4867727c="gerben"]De links naar je plaatjes lijken me niet compleet. Krijg iig niks te zien.[/quote:ba4867727c]

    Dat komt omdat de plaatjes vanuit de werkende folder worden aangeroepen.. en aangezien je ze nietop je eigen pc zult hebben.. en je de url niet weet naar de pagina op het web, weet ie niet waar ie de plaatjes zoeken moet….

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.