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)

"blok" in het midden van de browser

Anoniem
WesselT
8 antwoorden
  • Ik zit met een vraagje..

    Ik heb een website gemaakt van een template. Dat ziet eruit als een blok vormig iets. Alleen horizontaal staat hij gecentreerd op de pagina, maar ik wil dit verticaal ook en dan op elke resolutie vanaf 800x600. Hoe doe ik dit?
  • Zie Voorbeeld 7 uit Exploring Footers (artikel op A List Apart).
  • het kan ook volledig met css:
    http://www.wpdfd.com/editorial/thebox/deadcentre2.html
  • Die oplossing werkt niet als je de breedte of de hoogte van het blok niet van te voren weet.
  • [quote:641d7d0268="WesselT"]
    Ik heb een website gemaakt van een template. Dat ziet eruit als een blok vormig iets. Alleen horizontaal staat hij gecentreerd op de pagina, maar ik wil dit verticaal ook en dan op elke resolutie vanaf 800x600. Hoe doe ik dit?[/quote:641d7d0268]
    Het hangt van je template af, hoe je dit het beste op kunt lossen.

    De volgende oplossing werkt zowel met Internet explorer als Mozilla (FireFox):

    Stylesheet:
    [code:1:641d7d0268]
    html { height: 100% }
    body { height: 100% }
    [/code:1:641d7d0268]
    HTML:
    [code:1:641d7d0268]
    <div style="display:table;height:100%;width:100%;_position:relative;overflow:hidden;">
    <div style="_position:absolute;_top:50%;display:table-cell;vertical-align:middle;width:100%">
    <div style="text-align:center;_position:relative;_top:-50%;width:100%;">
    DEZE TEKST IS GECENTREERRD.
    </div>
    </div>
    </div>
    [/code:1:641d7d0268]
  • Ik heb de HTML versie gebruikt.

    Maar nu zie ik in firefox dat er een scrollbar komt en bij internet explorer niet..

    Raar :-?
  • [quote:385f5d54df="WesselT"]Ik heb de HTML versie gebruikt.[/quote:385f5d54df]
    :-?
    Je moet zowel de stylesheet als de HTML-code implementeren.
  • Ik snap niet waarom je 'm twee regels CSS meegeeft in de head en vervolgens een lading CSS in de body?

    Anywayz, met alleen het toevoegen van die twee regels CSS in de head lost -ie het niet op, TS moet ook html, body {margin:0; padding:0;} in de stylesheet zetten.

Beantwoord deze vraag

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