[CSS] Wyśrodkowanie Opcje

[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 nie miałem width ustawionego

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

[HTML] pobierz, plaintext 
<div id="top">
    <div id="header">
        <div id="napis"></div>
    </div>
</div>
<div id="center">
    <div id="center_head">
        <div id="logo"></div>
        <div id="prace">
            <img src="graf/obraz.jpg" width="197" height="197" alt="praca1" class="prace" />
            <img src="graf/obraz.jpg" width="197" height="197" alt="praca1" class="prace" />
            <img src="graf/obraz.jpg" width="197" height="197" alt="praca1" />
        </div>
        <div class="clear"></div>
    </div>
    <div id="center_body">
         <div id="menu">
             ...
         </div>
         <div id="tresc">
             ...
         </div>
         <div class="clear"></div>
    </div>
</div>
[HTML] pobierz, plaintext 

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.