Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Wyśrodkowanie
Forum PHP.pl > Forum > Przedszkole
kamil_lk
Witam.
Jak wyśrodkować wszystkie warstwy?
Link
mortus
Jeśli chodzi o wyśrodkowanie div-a prace, to musi mieć on oprócz margin: 50px auto; jeszcze width ustawione. Zresztą każdy element, który chcemy wyśrodkować w poziomie musi mieć nadaną szerokość (width).
kamil_lk
dzięki mortus winksmiley.jpg nie miałem width ustawionego smile.gif

A moge zrobić coś takiego, żeby ta stopka była na samym dole, ale nie była fixed?
mortus
No po prostu usuń position: fixed; ze stylu. Ale poza tym masz trochę źle rozplanowaną stronę. Ja bym dał tak
  1. <div id="top">
  2. <div id="header">
  3. <div id="napis"></div>
  4. </div>
  5. </div>
  6. <div id="center">
  7. <div id="center_head">
  8. <div id="logo"></div>
  9. <div id="prace">
  10. <img src="graf/obraz.jpg" width="197" height="197" alt="praca1" class="prace" />
  11. <img src="graf/obraz.jpg" width="197" height="197" alt="praca1" class="prace" />
  12. <img src="graf/obraz.jpg" width="197" height="197" alt="praca1" />
  13. </div>
  14. <div class="clear"></div>
  15. </div>
  16. <div id="center_body">
  17. <div id="menu">
  18. ...
  19. </div>
  20. <div id="tresc">
  21. ...
  22. </div>
  23. <div class="clear"></div>
  24. </div>
  25. </div>
i jeszcze style trzeba uaktualnić przede wszystkim na potrzeby IE6:
do #top dodaj overflow: hidden;
#header ma mieć margin: 0 auto;, width: 900px; i overflow: hidden;
#center powinien mieć margin-top: -xxx, gdzie xxx to wysokość tej czerwonej kreski i overflow: hidden;
#center_head i #center_body powinny mieć margin: 0 auto;, width: 900px; i overflow: hidden;
i klasa .clear ma za zadanie czyścić float-y i powinna mieć clear: both;
Resztę stylów zostaw tak jak masz.
kamil_lk
hym.. ale tutaj ta stopka nie będzie przy dolnej krawedzi przeglądarki jak jest mało tekstu?
mortus
No to niestety trzeba się bawić atrybutem min-height: i ustawiać ten element, który ma zawierać konkretną treść. Tyle, że takie rozwiązanie zadziała tylko dla viewportu o określonej wysokości. Jeżeli ktoś np. będzie miał mniejszą lub większą rozdzielczość monitora, to wtedy wygląd się wykrzaczy. Alternatywą jest wykorzystanie JavaScript-u do ustalenia odpowiedniej minimalnej wysokości podczas ładowania strony. Ogólnie działa to tak, że pobieramy wysokość viewportu i odliczamy sumę wysokości wszystkich elementów o stałej wysokości, a na końcu dodajemy min-height: do stylu naszego zmiennego div-a, przy czym min-height to różnica pomiędzy wysokością viewportu a wspomnianą sumą wysokości. Takie rozwiązanie nie zadziała, jeśli ktoś wyłączy obsługę JavaScript. Myślę, że najlepiej zrobić to w taki sposób, że ustalamy minimalną wysokość strony np. na 500px i tego się trzymamy. Ewentualnie możemy tło do samego dołu zrobić w konkretnym kolorze (będzie bardziej "estetycznie").
nitek
jeśli chodzi ci o przyklejenie stopki 'do podłogi', w przypadku gdy jest mało tekstu na stronie, to rozwiązanie jest tutaj: http://www.cssstickyfooter.com/
bez wykorzystania js i dziala pod znaczną większością przeglądarek.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.