Comunitatea Europa Counter Strike

Scris: **Lun Feb 03, 2014 11:17 am**

Nume Tutorial: Centrare in pagina cu CSS
Descriere: Centrare in pagina cu CSS
Download:
Autor: Anonim
Sursa (Link-ul oficial):

Afiseaza Textul

Propria parere: Folositor.
Tutorialul:

În acest exemplu veţi învăţa cum să creaţi un site centrat în pagină pe direcţie orizontală. Cea mai utilizată metodă, cea pe care o vom prezenta, este auto-width margins. Este o metodă foarte simplă, dar care din păcate nu este acceptată şi de vechiul nostru prieten Internet Explorer.
Ea acţionează prin specificarea lăţimii coloanei centrale a paginii (în pixeli-px sau ca procente-%), precum şi prin stabilirea marginilor de la coloană la o valoare automată stabilită iniţial. În scopul eliminării deficienţelor browserului Internet Explorer sau al contracarării acestora, este necesar să se introducă un text-align: center; un atribut în CSS care aranjează textul în centrul paginii. Astfel poţi uşor jongla cu atributele şi poţi "păcăli" browserele. Cu toate acestea, rezultatele în tot textul paginii, va fi centrat, astfel că un text-align: left îl vom adăuga la CSS pentru coloana centrată. În acest fel, în coloana centrată (site-ul propriu zis), textul va fi aliniat la stânga.

stilultau.css

Cod: Selectaţi tot

 body {
    margin: 50px 0px;
    padding: 0px;
    text-align: center;
 }
 
 #site{
    width: 1024px;
    margin: 0px auto;
    text-align: left;
    padding: 15px;
    border: 1px solid #000000;
    background-color: #eeeeee;
 }

Codul HTML pentru pagină va fi următorul:

Index.html

Cod: Selectaţi tot

<html>
 <head>
    <title>titlu pagina</title>
    <link rel="stylesheet" type="text/css" href="stilultau.css" />
 </head>
 
 <body>
    <div id="site">
       In acest container (div) se va afla intreg continutul site-ului tau. Mult succes.
    </div>
 </body>
 
 </html>

O altă variantă este aşa:

Cod: Selectaţi tot

 body {
    background-color: #e9e9e9;
    margin: 0px 0px 0px;
    padding: 0px ;
 }
 
 #site{
    width: 943px;
    margin: 0px auto;
    text-align: left;
    padding: 0px 0px;
    border: 0px solid #000000;
    background-color: #eeeeee;
 }

Comunitatea Europa Counter Strike

[Tutorial CSS] Centrare in pagina cu CSS

[Tutorial CSS] Centrare in pagina cu CSS