Skocz do zawartości
wlodziu

[RDiR] - 2 - wyśrodkowanie strony pod wszystkimi przeglądark

Polecane posty

wlodziu

Witam, dziś pokażę Wam, jak wyśrodkować stronę, tak by była ona wyśrodkowana na wszystkich przeglądarkach.

Strona bedzie zawierać podstawowo body, czyli nasze ciało strony i jednego DIV'a, który bedzie trzymał wszystko razem.
Każdy mógłby uzyć do wyśrodkowania strony znanego nam margin: 0 auto;, no ale niestety pod przeglądarką Internet Explorer ta opcja nie działa.
W tym celu specjalnie dla tej przeglądarki zastosujemy znaną "funkcje" do wyśrodkowania tekstu w elemencie, czyli text-align.
Dlaczego akurat text-align? Ponieważ IE traktuje elementy (div) jako normalny tekst i dlatego potraktujemy divy jako tekst.

Zacznijmy budowę CSS od body.

body { 
margin: 0 auto; 
font-family: tahoma; 
font-size: 11px; 
text-align: center; 
} 

margin: 0 auto; - sławne wyśrodkowanie dla wszystkich przeglądarek za wyjątkiem Internet Explorer. Wartość 0 okresla nam brak marginesów, a auto, to gdy nie mamy marginesów próbuje nam się dopasować automatycznie by z dwóch stron był po równy odstęp.
font-family: tahoma; - nazwa czcionki
font-size: 11px; - rozmiar czcionki
text-align: center; - w body oznacza wyśrodkowanie wszystkich elementów na stronie (potrzebne do wyśrodkowania w IE).

Jak zauwazyliście, nasza strona nie ma wymiarów, zostało to zrobione celowo.
Teraz stworzymy div'a, w którym określimy szerokośc strony itp. ja go nazwie "strona". Ładnie, nie?

Wklejmy go do CSS:

#strona { 
margin: 0 auto; 
width: 900px; 
text-align: left; 
} 


 margin: 0 auto; - wyśrodkowuje dany element tj. wcześniej. (dodatkowe zabezpieczenie)
width: 900px; - szerokośc naszej strony (dowolna wartość)
text-align: left; - tekst do lewej, gdyby brakowało tego każda treśc na stronie była by wyśrodkowana, więc przywrócmy domyślne ustawienia. Nasz div został wyśrodkowany przez text-align znajdujące się w body.

Teraz stwórzmy nasz kod HTML:

<body> 
<div id="strona"> 
To moja pierwsza strona poprawnie wyśrodkowana pod każdą przeglądarką ;] 
</div> 
</body> 

Najpierw otwieramy znaczniki ciała strony, potem to co ma sieznajdować w tym ciele, czyli nasz div o nazwei strona.
Występuje tu hierarchia, czyli najpierw nawazniejsze elementy.
DIV strona podporządkowuje się body, czyli zostaje wyśrodkowany.
Kolejne elementy naszej strony nalezy dodawać w div'ie "strona", które będą mu podporządkowane, czyli będą znajdować się centralnie na stronie na powierzchni 900px.
To jak byśmy na stole na środku połozyli pudełko a w nim kluczyki. Kluczyki są podporządkowane położeniu pudełka na stole. Nie ma prawa z niego coś wypaśc czy też wystawać, chyba że wrzucimy coś co bedzie wieksze od "pudełka".


Nasz pełny kod CSS:

body { 
margin: 0 auto; 
font-family: tahoma; 
font-size: 11px; 
text-align: center; 
} 
#strona { 
margin: 0 auto; 
width: 900px; 
text-align: left; 
} 

Wszelkie prawa zastrzeżone.
Kopiowanie bez zgody autora surowo zabronione.

  • Lubię to! 1

www.fb.com/wwwlodziu zapraszam do lajkowania, codzienna dawka wiedzy

Zacznę przejmować się standardami kiedy świat ulegnie standardyzacji

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
Daniel

Świetny poradnik wszystko działa!

Włodziu wymiatasz.


Ar­tyści nig­dy nie przes­tają być dziećmi, ale niektóre dzieci rodzą się dorosłe.

 

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
Arixon

Kolejna świetna wstawka. Pozdrawiam ;)

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
Cropp

Świetny poradnik - gratulacje! :brawo:

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
KiLu

Git poradnik,na pewno się przyda ;P

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
Gość
Temat jest zablokowany i nie można w nim pisać.
×
×
  • Utwórz nowe...