center page

description

If you want to make page, which has content right in the center, and you dont want to use tables (no one use tables to style anymore) i have solution for you.
I’ve tested it on IE 6, Opera, FF, Safari.

files

  1. css file
  2. html file

code

First of all, your page have to have Transitional Doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Then you have to create two divs with id (like in html file)

  1. container-horizontal
  2. container-horizontal

and place your content into.

In css you have to change some values to get asked size.

Imagine you want to have page width 760px and page height 660px.
So you have to change:


body, html {
margin: 0; padding: 0;
height: 100%; width: 100%;
top: 0; left: 0;
min-height: 660px;
position: absolute;
}
div#container-in {
width: 760px; height: 660px;
position: absolute;
top: -330px; left: -380px;
overflow: hidden;
top:expression(document.body.clientHeight > 660 ? "-330px" : ( - document.body.clientHeight / 2) + "px");
}

There is no css change for div#container-horizontal.

In div#container-in, top is half of height, left is half of weight.

top:expression(document.body.clientHeight > 660 ? "-330px" : ( - document.body.clientHeight / 2) + "px");

is special javascript inside of css which is needed to see top of content when browser window height is smaller than content height. (try to comment this line /* … */ and change broser size)
Again 660 is height ou want, and 330 is half of it.

used on page

I’ve used it on several pages i’ve made, f.e.:

example

center page example

Tagged on:

7 thoughts on “center page

  1. František Preissler

    Ahoj,
    již roky používám daleko snazší řešení, ale jen pro centrování stránky horizontálně :-)

    CSS styl:
    #stranka {
    position:absolute;
    width:800px;
    height:auto;
    padding:0px;
    margin:0px 0px 0px -400px;
    left:50%;
    }

    HTML:

    … další obsah webu

  2. gondo Post author

    heh tak na horizontalne centrovanie staci

    body { width: 100px; margin: auto; }

    ;)

    ide hlavne o vertikalne centrovanie a o to aby to fungovalo pre vsetky (alebo co najviac bw)

  3. František Preissler

    gondo: Ahojda ;-) Ovšem nejsem si jist s centrováním u body elementu.
    Co když někdo (jako já) používá i Ajax, resp. dynamické načítání obsahu do elementů podle jejich id? ;-) V mém případě načítám třebas obsah do
    <div id=”stranka”>…obsah… </div>
    A v mém případě tento div je v body jako takový hlavní obsah webu. Mrknout můžeš do zdrojového kódu mého webu frantisek-preissler.cz, tam uvidíš jak stavím ten ,,hlavni” div, i když na mém webu nepoužívám Ajax, ale pointu to nemění.
    Každopádně zase tím, že tu uvedeme několik příkladů, tak to může někomu pomoc a vyřešit jeho situaci, protože každý řešení je pro každého jinak použitelné ;-) Jinak chválím tématiku tvého webíku a ,,světa” ;-)

  4. gondo Post author

    heh ale stale je to trosku offtopic pretoze uvedeny priklad centruje obsah aj vertikalne.
    to co som uviedol je samozrejme len velmi jednoduchy prikilad horizontalneho centrovania, kontroval som tvoj priklad :p
    samozrejme zalezi od konkretnej potreby, aj ja dost casto vyuzivam dalsi element pod body v ktorom je obsah pretoze niektore veci jednoducho nejdu inak nastylovat.

    inak aj body moze mat id a ajax moze rovnako naplnat element body ako ktory kolvek iny element s id :)

  5. hd-video.sk

    Ja pouzivam nieco taketo ked chcem zarovanat napriklad obrazok, ktory sluzi ako pozadie stranky

    html {
    background: url(../images/bg_web.jpg) no-repeat center center fixed;
    }

  6. gondo Post author

    @František Preissler: tak trochu neskora reakcia, ale predsa :) samozrejme konkretna implementacia sa bude lisit. nema zmysel nasilu montovat nejake riesenie do existujuceho webu. ale pokial budes chcet docielt to, co tento clanok riesi, teda centrovat obsah pomocov CSS (teda nie cez JS), tak budu iste zmeny nevyhnutne. to, ze pouzivas nejaky ajax alebo konkretne ID je uplne irelevantne.

Leave a Reply