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)

Website in midden van beeldscherm plaatsen

None
28 antwoorden
  • Hallo Allemaal,

    Ik zou graag mijn website in het midden van het beeldscherm willen plaatsen.
    Ik heb op internet gezocht maar kom er nog niet echt helemaal uit.
    Kan iemand van jullie mij misschien helpen??
    Ik las iets over margin:0 auto;
    Maar waar moet ik deze code plaatsen??
    Vriendelijk bedankt,
  • De "margin: 0 auto;" code is css, en deze moet dus in je css komen te staan, als je niet weet wat css is mis je de laatste tien jaar aan internet ontwikkeling en zou ik je willen adviseren dit enigszins in te halen…

    Dus de buitenste element om je site, vaak de wrapper genoemd (en naar ik mag hopen een div) moet de css eigenschap "margin: 0 auto;" krijgen in je style sheet, of in je style element in de head van je html en als je het echt onhandig wilt doen kan je het ook in het style attribuut plaatsen in de tag zelf. Als je nou geen idee hebt wat ik schrijf zie dan mijn bovenstaande opmerking… :wink:
  • Ter aanvulling, deze manier van centreren werkt alleen in browsers die CSS fatsoenlijk ondersteunen. M.a.w. met IE6 gaat het niet lukken (van IE7 weet ik het niet)
    Om het ook daar aan de praat te krijgen dien je
    body {
    text-align: center
    }
    toe te voegen. Een draak van een oplossing, maar helaas de enige manier om het IE6 duidelijk te maken. En mocht je serieus met CSS aan de gang gaan, dan was dit de eerste van tientallen uitzonderingen die je voor IE moet inbouwen.
  • text-align: center werkt niet goed in Firefox.

    Ik zou kiezen voor:

    body {
    margin-left: (helft van je width);
    left: 50%;
    }
  • [quote:f74c000703="due"]text-align: center werkt niet goed in Firefox.

    Ik zou kiezen voor:

    body {
    margin-left: (helft van je width);
    left: 50%;
    }[/quote:f74c000703]
    De oplossing van Drewster is beter omdat 50% niet klopt. Je pagina heeft ook nog een breedte die nooit 2 keer 50% overlaat..
  • Ik heb het vrij simpel opgelost. Stukje uit mijn CSS:

    [code:1:edef8b7bc2]
    #container {
    margin-left: auto;
    margin-right: auto;
    width: 860px;
    text-align: left;
    background-color: #fffff0;
    position: relative;
    top: 2px;
    }[/code:1:edef8b7bc2]
    Marges links en rechts worden automatisch bepaald. Simpel, maar effectief. Hierbij moet je de breedte wel een vaste waarde geven, percentages zullen niet werken dan. Maar in mijn geval moest dat toch vanwege de header.
  • @gooly: het werkt [i:b6d355008e]wel[/i:b6d355008e] in IE6, als je maar een correct doctype gebruikt. Anders zou het ook niet in IE7 en IE8 werken. Overigens werkt het niet in IE5, maar die gebruikt niemand meer.

    @ger: da's dezelfde oplossing als drewster geeft.

    @onsmel: klik eens wat links aan in mijn signature om wat meer te weten te komen. Da's natuurlijk teveel moeite als je slechts een trucje wilt voor het centreren, maar zodra je het doorhebt, zul je merken dat je had gewenst dat je het eerder had gedaan.
  • [quote:63df2ff3b8="boelieboelie"]@gooly: het werkt [i:63df2ff3b8]wel[/i:63df2ff3b8] in IE6, als je maar een correct doctype gebruikt. Anders zou het ook niet in IE7 en IE8 werken. Overigens werkt het niet in IE5, maar die gebruikt niemand meer.[/quote:63df2ff3b8]
    Ik heb de proef op de som genomen en het klopt :-) Ik heb het jarenlang zo gedaan en blijkbaar zit die structuur inmiddels te ver in mijn genen. Ook voor mij een eye opener dus. Saillant detail is dat het prima gaat met dezelfde html doctype die ik al jarenlang gebruik. Het was dus al die tijd niet nodig.
  • [quote:63874ea6ab="due"]text-align: center werkt niet goed in Firefox.

    Ik zou kiezen voor:

    body {
    margin-left: (helft van je width);
    left: 50%;
    }[/quote:63874ea6ab]

    Ik neem aan, dat je bij margin-left -(helft van je width) bedoelt. Dus met een MIN teken ervoor.
  • [quote:046f0bf1ff="due"]text-align: center werkt niet goed in Firefox.[/quote:046f0bf1ff]
    Dan wil ik graag nog even dit misverstand uit de wereld helpen: text-align werkt precies zoals het hoort in Firefox! (Of elke andere alternatieve browser wat dat betreft.) Als je de specificaties erop naleest zal je vinden dat text-align alleen op inline elementen hoort te werken en niet op block level elementen. Dat het wel "werkt" in IE is allang niet meer interessant aangezien IE niet meer de [i:046f0bf1ff]de facto[/i:046f0bf1ff] standaard is.

    - Bas
  • Wat vindt je hiervan?

    [code:1:50be7d7276]
    <style>
    td{
    text-align:left;
    }
    </style>
    <body>
    <center>

    hier al je HTML plaatsen

    </center>
    </body>
    [/code:1:50be7d7276]
  • [quote:26a8069352="Hardworks"]Wat vindt je hiervan?[code:1:26a8069352]<center>
    hier al je HTML plaatsen
    </center>[/code:1:26a8069352][/quote:26a8069352]Ja! dat gaan we doen, deprecated html gebruiken! :evil:
  • [quote:6068fc11c7="Hardworks"]Wat vindt je hiervan?

    [code:1:6068fc11c7]
    <style>
    td{
    text-align:left;
    }
    </style>
    <body>
    <center>

    hier al je HTML plaatsen

    </center>
    </body>
    [/code:1:6068fc11c7][/quote:6068fc11c7]
    Goed bedoeld, maar zoals Drewster ook al aangeeft, dat is HTML van 10 jaar geleden en inmiddels niet meer valide.
    Geen goed idee dus.
  • Mocht er iemand nog behoefte hebben aan een hele makkelijke oplossing,

    http://www.mycelly.com

    Torrentus
  • Hallo Allemaal,..

    Ik kom er als ik eerlijk ben nog steeds niet uit.
    Kan iemand me vertellen welke code ik nu moet plaatsen en waar, binnen mijn website,
    Ik zou het top vinden als mijn pagina gewoon in het midden van beeldscherm word weer gegeven bij welke grote dan ook

    mijn site:
    www.fascinatingcats.com

    Heel hartelijk bedankt
  • Eerlijk gezegd schrik ik van je code, maar je gebruikt iig wel CSS en div's
    Je hebt alles absoluut gepositioneerd, en hoewel ik zelf nooit absoluut positioneer, meen ik dat centreren dan sowieso niet gaat lukken. Centreren is per defenitie relatief.

    Maar je zou een div om het geheel heen moeten zetten (Een div direct na je body, b.v. <div class="container"> en de </div> komt dan vlak voor je </body>

    En in je styles maak je dan een class 'container' aan met de code er in.

    b.v.
    .container {
    width: 800px;
    margin: 0 auto;
    }

    Die moet dus tussen de accolades van je styles (b.v. net voor #Layer1…)

    Dat is hoe het zou moeten. Maar nogmaals, aangezien je alles absoluut positioneerd gaat dat volgens mij niet werken. maar wellicht kan iemand hier op antwoorden die wat dieper in de CSS zit dan ik.
  • Positionering gaat altijd tov het eerste parent element dat ook gepositioneerd is, dus om Gooly z'n methode te laten werken moet je ook "position: relative;" toevoegen aan de CSS voor zijn container klasse. (Overigens zou ik er een id van maken, aangezien een container hoogstwaarschijnlijk uniek is op de pagina, al is dat iets wat van je ontwerp afhangt, maar dat terzijde.)

    - Bas
  • En zo is dit ook voor mij weer een leerzame reactie, want ik ging er altijd van uit dat absolute positioneren het browser window als referentie gebruikte (en dus parent elementen zou overrulen)
    maar na bestudering van de CSS documentatie blijkt dat ik 'absolute' met 'fixed' verwar(de)

    Overigens is het idd beter om het niet als class, maar als ID te doen.
    Daarvoor vervang je de punt in de CSS code voor een hekje (.container wordt #container) en de class in de HTML wordt een id (<div id="container">;)

    Het zou dus toch wel moeten werken.
  • Daarnaast doe je dit:[code:1:b6b17fa0c9]<a href="tijgers.html"><div id="Layer7"></div></a>[/code:1:b6b17fa0c9]Wat niet mag, je mag geen block-level element in een inline element stoppen. Het is ook totaal overbodig aangezien je het achtergrond plaatje ook gewoon achter je link kan zetten. Daarnaast zou je ook text in je link moeten zetten zodat het ook nog voor screen readers te lezen valt. Die tekst kan je dan voor grafische browsers weer verbergen via de css regel "text-indent: -999em;". Als je dat te moeilijk lijkt zet er dan op zijn minst een title attribute in met de naam van de link.

    Kan het niet laten om het te zeggen maar een marquee was al in 1999 niet meer cool (en btw naast het feit dat het gewoon "not done" is ook gewoon deprecated) :P
  • De site zoals die nu is heeft eigenlijk weinig met echt webdesign te maken, tenminste met het bouwen in HTML. Het lijkt mij door een grafisch programma automatisch omgezet in HTML (en daarna op een paar punten handmatig aangepast). Dat werkt ook wel, maar vervolgens is het eigenlijk onmogelijk via wat eenvoudige CSS-code de site te centreren. Dat komt zoals boven gezegd, door de absolute positionering.

    Er is wel een oplossing. Zoals Bas Hamar zegt, als je de hele site in een div zet, die je een positionering meegeeft, dan werken al die position: absolute's ten opzichte van die div. Dat is de eerste stap en die "container"-div moeten we dan centreren. Juist omdat deze noodzakelijkerwijs een positionering heeft meegekregen werkt "margin: 0 auto;" niet. Volgens mij kan het daardoor niet anders dan javascript te gebruiken.

    In praktijk:
    - Zet eerst na <body> het volgende neer
    [code:1:a452e93d59]
    <div id="container">
    [/code:1:a452e93d59]
    en direct vóór de <[b:a452e93d59]/[/b:a452e93d59]body>:
    [code:1:a452e93d59]
    </div>
    [/code:1:a452e93d59]

    Daarna het script. Voeg in, direct voor de <[b:a452e93d59]/[/b:a452e93d59]head>-tag:
    [code:1:a452e93d59]
    <script type="text/javascript">
    window.size = function()
    {
    var w = 0;
    var h = 0;

    //IE
    if(!window.innerWidth)
    {
    //strict mode
    if(!(document.documentElement.clientWidth == 0))
    {
    w = document.documentElement.clientWidth;
    h = document.documentElement.clientHeight;
    }
    //quirks mode
    else
    {
    w = document.body.clientWidth;
    h = document.body.clientHeight;
    }
    }
    //w3c
    else
    {
    w = window.innerWidth;
    h = window.innerHeight;
    }
    return {width:w,height:h};
    }


    function moveToCenter(what) {
    // zelf aan te passen
    var siteBreedte = 800; // in pixels

    var container = document.getElementById("container");
    var links = (window.size().width - siteBreedte) / 2;
    container.style.position = "absolute";
    container.style.left = (links < 0 ? "0px" : links+"px");
    }
    window.onload = window.onresize = moveToCenter;
    </script>
    [/code:1:a452e93d59]

    Waar in de code staat "zelf aan te passen" kun je de breedte van je site opgeven. Zo te zien is die 800 pixels.
    Wees je ervan bewust dat wel het merendeel, maar niet alle websurfers javascript hebben ingeschakeld. Bij wie dat niet zo is wordt de site gewoon links uitgelijnd. Om het bij 100% van de bezoekers te laten werken (via CSS) zou je je site vanuit de basis anders moeten bouwen. Ik denk dat deze oplossing daarom de beste is in de gegeven situatie.
    Veel succes!

Beantwoord deze vraag

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