Jump to content
Daniel

[HTML/CSS] Wyśrodkowujemy stronę

Recommended Posts

Daniel

Dosyć często spotykamy się z pytaniami jak wyśrodkować stronę pod wszystkimi przeglądarkami?
Odpowiedź jest bardzo prosta i każdy początkujący webmaster powinien dobrze się z nią oswoić.

Na początek tworzymy nowy plik, który nazwiemy index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl"> 
 <head> 
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
 <title>Moja wyśrodkowana strona</title> 
 <link rel="stylesheet" type="text/css" href="style.css" /> 
 </head> 
 <body> 
 <div id="page"> 
 Mój tekst na stronie. 
 </div> 
 </body> 
 </html> 


Na początku otwieramy znaczniki html oraz head.
Następnie nadajemy naszej stronie możliwość używania UTF-8 czyli polskich znaków.
Gdy już zdefiniowaliśmy polskie znaki przechodzimy do definiowania nazwy, a raczej tytułu naszej strony.
Po wykonaniu tych operacji musimy dołączyć arkusz styli .css, który odpowiada za wygląd naszej strony.
Następnie zamykamy znacznik head i otwieramy body. Tutaj sprawa jest już prosta, bo wystarczy stworzyć div, który zdefiniowaliśmy w naszym pliku .css - nazwaliśmy go page więc tak postąpimy w pliku html.
Teraz możemy wpisać obojętnie jaki tekst pomiędzy naszego div'a, a na samym końcu zamykamy znaczniki body oraz html.

Następnie tworzymy nowy plik, który nazwiemy style.css

body {
margin: 0 auto;
font-family: Tahoma;
font-size: 11px;
}

#page {
margin: 0 auto;
width: 1000px;
text-align: left;
} 


margin: 0 auto; - Wpisanie tego kodu powoduje wyśrodkowanie danego elementu.
width: 1000px; - Tutaj określamy szerokość naszej strony w pikselach(px).
text-align: left; - Tekst zostanie przesunięty na lewą stronę.
font-family: Tahoma; - Tutaj wybieramy czcionkę, która będzie odpowiedzialna za nasz tekst na stronie.
font-size: 11px; - Tutaj definiujemy rozmiary w pikselach, który odpowiada za czcionkę.

Share this post


Link to post
Share on other sites
Daniel
Posted Original Poster

wlodziu, no tak, ale mój jest inaczej opisany ;)

Share this post


Link to post
Share on other sites
Love Poland rEMO

bookworms, Ale ja na pewno za takie cuś piffka nie dam bo wlodziu ma i to dużo lepsze ;)

Share this post


Link to post
Share on other sites
Daniel
Posted Original Poster

NEODomInIK, tu się nie komentuje.. I ciekawe co ma lepsze jak to jest to samo. :facepalm:

Inteligencja niektórych ludzi mnie przeraża.

Share this post


Link to post
Share on other sites
damian122851

bookworms, Ale co z tego że masz inaczej opisane skoro poradnik dotyczy tego samego ? .

A włodzia poradnik jest bardziej wytłumaczone co gdzie i jak :).

// Właśnie to samo . To po co wstawiasz drugi raz to samo ? :facepalm:

Share this post


Link to post
Share on other sites
Daniel
Posted Original Poster

damian122851, kody są takie same. :facepalm:

Opisane jest inaczej... :roll:

Nie komentujemy poradnikow.. x_x

Share this post


Link to post
Share on other sites
Arek
NEODomInIK, tu się nie komentuje.. I ciekawe co ma lepsze jak to jest to samo. :facepalm:

Inteligencja niektórych ludzi mnie przeraża.

JPD :facepalm: wrzucił to samo co włodziu wcześniej i teraz wielce napina.

Share this post


Link to post
Share on other sites
wlodziu

Twój poradnik skupia się na części HTML'a co nie jest w ogóle potrzebne, po co komu UTF-8 do wyśrodkowania strony? Jeżeli wytłumaczysz to spoko, tak samo sytuacja z tytułem strony itp, tak samo rodzina czcionki, po c oto komu do wyśrodkowania strony. W łatwy sposób mogę Ci udowodnić, że pod wszystkimi przeglądarkami strona nie jest wyświetlana na środku.

Idąc dalej, wyjaśnienie jakiegoś kodu: "Wpisanie tego kodu bla bla bla.." - a może łaskawie byś wyjaśnił co on robi czy znasz regułki na pamięć? Pisząc tak wprowadzasz ludzi w błąd.

Share this post


Link to post
Share on other sites
Karaś

Piszesz poradnik i do tego wymagasz stawiania piw żeby zobaczyć jego całość.

Walnij się w łeb, Bożę, skąd się biorą tacy ludzie?

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
×
×
  • Create New...