Skocz do zawartości
  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

wlodziu

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

Promowane odpowiedzi

wlodziu    1,201

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

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.

×