Svetainės centravimas su CSS

interneto projektų apžvalga, sprendimai, technologijos

Svetainės centravimas su CSS

Autorius: Paulius 2009 08 3, PirmadienisKategorijos: Projektų kūrimas

centered_siteDaugumą klasikinių interneto svetainių galima išskirti į dvi grupes pagal jų atvaizdavimo principą. Svetainė centruojama naršyklės lange arba ji yra prisiglaudusi prie kairiojo krašto. Žinoma, atsiranda ir kūrybingesnių žmonių sugalvojančių įmantrių atvaizdavimo būdų, bet dažniausiai naudojamas centruoto puslapio variantas.

Nusprendžiau trumpai ir aiškiai aprašyti kaip centruojama svetainė interneto naršyklėje. Viso labo tai kelios CSS kodo eilutės, tačiau net ir tokie dalykai kai kuriems žmonėms praverčia.

Norint svetainę centruoti, turime žinoti jos plotį. Vienintelis dalykas, kurio reikia iš HTML pusės, tai apsirašyti šakninį svetainės elementą, pavadinkime jį pvz.: site. Dabar CSS faile aprašome stilių site ir body žymoms.

Po Rimanto komentaro, išsiaiškinom, kad tai gali būti atlikta su dar mažiau kodo. O tam kad IE6 rodytų teisingai tiesiog turi būti nurodytas DOCTYPE. Nemanau, kad dabar yra svetainių, kuriose jis būtų praleistas. Liko tik dvi eilutės CSS.

  1. body {margin: 0;}
  2. #site {width: 998px; margin: 0 auto;}

Su paaiškinimu:

  1. body {
  2.    margin: 0; /* Numušam automatinius marginus body elementui, kitaip bus tarpas */
  3. }
  4.  
  5. #site {
  6.    width: 998px; /* Nurodom koks bus plotis, kitaip margin: 0 auto; bevertis */
  7.    margin: 0 auto; /* Pasakom, kad viršuje ir apačioje tarpo nepalikti, o atstumai tarp šonų būtų vienodi */
  8. }


3 komentarai (-ų) “Svetainės centravimas su CSS”

  1. [...] jei veikia? Svetainės maketo centravimas su „text-align“ yra labai netaisyklingas, bet veikia su IE6. O gal tegu ją trenksmas, tą [...]

  2. Rimantas says:

    text-align galima ramiai išmesti: jis reikalingas tik IE5, kuris jau visai išnykęs, o jei kas dar ir naudoja, tai pats kaltas. IE6 normaliai supranta margin: auto, kai veikia standards-compliant režimu.
    http://msdn.microsoft.com/en-us/library/bb250395(VS.85).aspx#cssenhancements_topic6
    Beje, iki 9pos versijos Opera body paraštei naudojo padding, o ne margin, bet dabar tai irgi nebeaktualu.

  3. Paulius says:

    Matyt per senai karpau puslapius, bet iš tikro pabandžiau, jei nurodomas DOCTYPE, text-align nereikalingas. Dar labiau sutrumpėja kodas.
    Dėl Operos, niekada daug dėmesio ir nekreipdavau, nes pomažė jos auditorija. Bet dabar žinosiu, kad ir taip gali būti.

Komentarai