Centrare pagina web cu css – Tutoriale css

In acest tutorial css voi prezenta cum putem centra pagina web in centrul ferestrei la orice rezolutie. Metoda respectiva trebuie, poate fi folosit daca proiectam pagina ca sa aiba o latime definita, si sa nu-si schimbe latimea indiferent de continut. Aceast tip de pozitionare este recomandat designer-ilor incepatori, dar multe ori este folosit chiar si pe site-urile companiilor mari, pentru ca multa lume inca mai foloseste monitoare mai mici, si majoritatea paginilor web sunt construite ca sa incapa bine intr-o rezolutie de 1024×768. Deci cu ceea ce avem de a face aici este bun pentru un design fix. Haideti sa vedem codul:

Pagina web centrata cu pozitionare absoluta

Codul html si css

<html>
<head>
<title>Centrare pagina web</title>
<style type="text/css">
body {
margin:0px;
padding:0px;
}
#pagina {
position:absolute;
width:1000px;
min-height:950px;
margin-left:-500px;
left:50%;

background-color:#7AB8E9;
}
/>
</style>
</head>

<body>
<div id="pagina">
</div>
</body>

</html>

Codul de mai sus va rezulta intr-o pagina centrata, care arata asa intr-o rezolutie de 1440×900.
Centrare pagina web!

Explicatia codului css de mai sus

Prima data am definit, am suprascris o margine si un padding 0 pentru body, pentru ca majoritatea browserelor au in stilul lor default un padding si o margine mai mare decat 0 pixeli pentru body.
Am creat un id cu numele “pagina” pe care o v om aplica unui div, care va contine toata pagina. Am ales pozitionarea absoluta pentru id-ul respectiv. Puteam sa alegem si pozitionare fixa, insa atunci nu am putea face scroll la pagina, ceea ce nu dorim. Am ales ca pagina sa aiba o latime de 1000 de pixeli, ca sa incapa si intr- o rezolutie de 1024. Am pus numai 1000 de pixeli, pentru ca si scrollbarul o sa ocupe spatiu din fereastra, deci am lasat 24 de pixeli pentru scrollbar.
Am adaugat o margine negativa – jumate din latimea paginii – Aceasta directiva va face ca pagina, divul respectiv sa mearga la stanga cu jumate din latimea lui, adica momentan numai jumate se vede din latimea totala. Cu directiva left 50% am setat ca pagina sa inceapa tocmai de la jumatatea paginii. Aceasta directiva va face impreuna cu marginea negativa, intocmai ca pagina sa fie intotdeauna centrata in orice rezolutie am vizualiza-o. Citeste mai departe pentru intelegerea marginilor negative in css!

Margini negative in css

Intr-un alt tutorial am prezentat deja marginile, insa acolo am lasat afara marginile negative, tocmai ca sa nu facem confuzie intre marginile css, avand in vedere ca aceste tutoriale sunt in primul rand pentru incepatori. Deci sa recapitulam, si explicatia marginilor negative in css.
Deci, marginile css desemneaza un anumit spatiu liber intre elemente – adica un element cat de aproape poate fi apropiat de altul. Marginile negative tocmai fac aceasta chestie invers. Este posibil ca un element sa acopere partial, sau chiar si total un alt element. Acest lucru nu este, si nu trebuie folosit foarte des, pentru ca in anumite cazuri marginile negative nu sunt bine interpretate de toate browserele, din pacate – si acum iarasi imi vine in minte Internet Explorer-ul cu ciudateniile lui care multe ori cauzeaza batai de cap designer-ilor. (sunt insa modalitati de a lucru si cu IE, un designer trebuie sa stie)

Cod, stil special pt IE, (Internet Explorer)

Deci, IE multe ori nu interpreteaza bine anumite stiluri, pozitionare, centrare etc. Si Microsoft este constient ca Internet Explorerul nu e softul lor cel mai reusit – tocmai din aceasta cauza chiar de la inceput au inclus o directiva in soft, prin care se poate scrie, cod, stil special pentru IE. Codul trebuie folosit in cadrul paginii, adica in header si este interpretat doar de IE, restul browserelor interpreteaza ca si comentariu la cod. Iata un exemplu (este de fapt un if statement).

<!–[if IE 6]>
<style type="text/css">
body { position:relative;}
</style>
<![endif]–>

Aceasta directiva inseamna – Daca versiunea IE-ului este egal cu 6, atunci se aplica pozitionarea relativa pentru body. Puteti citi, si vedea toate directivele aici.
Nu uitati ca sa aveti o intelegere buna in html si css, trebuie sa cititi toate tutoriale-le css si tutoriale-le html.

Lasă un răspuns

(*)


*