HTML i CSS

Wyśrodkowanie storny za pomocą DIVa

Więc zacznijmy od podstawy – jak wyśrodkować stronę bazowaną na DIVach. Pierwsza myśl jaka mi przyszła jak pierwszy... 

Tworzenie strony w XHTML, czyli porzucamy HTML

XHTML 1.1 jest obecnie obowiązującą wersją języka HTML, ale – niestety – nie ma się to nijak do rzeczywistości,... 

HTML i CSS

Wyśrodkowanie storny za pomocą DIVa

Więc zacznijmy od podstawy – jak wyśrodkować stronę bazowaną na DIVach. Pierwsza myśl jaka mi przyszła jak pierwszy raz się za to brałem była – ustawmy dla <div> styl text-align: center; – ale jak dobrze wiecie nie ma lekko :)

To zacznijmy od kodu HTML – dla obu metod będzie ten sam, czyli po prostu tworzymy sobie DIVa, niech ma id main:
<div id="main">Lorem ipsum...</div>

METODA 1
Najprostsza… dla znacznika body ustawiamy styl:
body {
text-align: center;
}

A dla naszego DIVa:
#main {
width: 800px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

Teraz wytłumaczenie – na początku środkujemy wszystko w znaczniku body, np. w Firefoxie by to wystarczyło – ale w IE już nie, dlatego mamy też automatyczny margines z lewej i prawej. Nie możemy też zapomnieć o szerokości naszego DIVa. Oczywiście text-align: left; jest tylko dodatkiem – jeśli nie chcemy aby treść w DIVie była wyśrodkowana.

Tworzenie strony w XHTML, czyli porzucamy HTML

XHTML 1.1 jest obecnie obowiązującą wersją języka HTML, ale – niestety – nie ma się to nijak do rzeczywistości, ponieważ międzynarodowe konsorcjum W3C nie ma wpływu na twórców stron internetowych, a jedynie tworzy standardy i przedstawia je w postaci rekomendacji.
Nie będę w tym artykule przedstawiał zalet stosowania standardów i wykorzystania zgodnego z nimi dokumentu w języku XHTML, jeśli czytasz ten artykuł to chyba jesteś o tym już przekonany, jeśli nie to wkrótce się przekonasz.


Na początku przyjmuje, że znasz już język HTML i potrafisz w nim stworzyć stronę.
Jeśli nie, odsyłam Cię najpierw do kursu HTML, których jest bardzo dużo w całej sieci. Zaczniemy od początku dokumentu, czyli prologu, powinien on wyglądać następująco:


<?xml version=”1.0″ encoding=”utf-8″?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”pl” lang=”pl”>



Pamiętajmy, że jeśli nasz dokument będzie miał rozszerzenie .PHP, czyli jeśli będziemy używać w nim języka php pierwszą linijkę deklaracji należy zastąpić linią:


<? print(“<?xml version=\”1.0\” encoding=\”utf-8\”?>”);?>


Powyższa deklaracja jest poprawna dla języka polskiego i kodowania UTF-8, według specyfikacji XHTML 1.0 jedynego poprawnego dla tego rodzaju dokumentów. Więcej o kodowaniu UTF-8 na stronie Unicode.


Kolejną bardzo ważną rzeczą jest fakt zamykania wszystkich znaczników, czyli inaczej niż w HTML nie ma tu znaczników otwartych. Sprawa tyczy się następujących znaczników:
<meta>; <br>; <img>; … a mają one wyglądać następująco:
<meta/>; <br/>; <img/>; …, oczywiście pominąłem w niektórych pozostałe elementy tych znaczników.

Następną istotną sprawą jest fakt, iż każdy obrazek powinien posiadać atrybut alt=””, może on być oczywiście pusty, ale “opłaca” się opisywać obrazki. To chyba wszystkie istotniejsze zmiany dotyczące znaczników.


Kolejnym bardzo istotnym elementem, jeśli nie najistotniejszym jest przeniesienie całego wyglądu strony
do arkusza styli CSS. Czyli możemy zapomnieć o opisywaniu stylu czcionek za pomocą znacznika <font>. W języku XHTML wszystkie informacje dotyczące wyglądu strony zostały przeniesione do arkusza styli CSS. Możemy je przypisywać do dokumentu XHTML trzema sposobami, przypisaniem stylu do taga, np. <body>, stworzenia klasy .klasa i przypisania jej później do jakiegoś taga np. <div class=”klasa”> lub stworzenia identyfikatora .identyfikator i przypisania jego później do jakiegoś taga np. <div id=”identyfikator”>. Różnica pomiędzy klasą a identyfikatorem jest taka, że klasę możemy przypisać do kilku tagów w jednym dokumencie a identyfikator tylko do jednego. Po pozostałe informacje na temat styli CSS odsyłam do modularyzacji lub licznych kursów.


Ostania zmianą jest fakt, iż poprawny dokument XHTML powinien mieć całą treść “rozłożoną” na div-ach a nie na tabelkach. Według standardów tabele mogą być stosowane jedynie do układania treści a nie wyglądu strony.
O budowaniu stron na div-ach napisze w następnym artykule, ponieważ jest to obszerniejszy temat.


Jeśli zastosowałeś wszystkie z powyższych zasad możesz smiało poddać swój dokument walidacji.
Mam nadzieje, że dzięki mojemu artykułowi już za pierwszym razem przejdziesz ją pomyślnie!

More HTML i CSS