Tryb drzewa | Tryb normalny

Sosna · 22-04-2011 01:40

Nie zauważyłem żadnego tutoriala na ten temat, a z pewnością znajdzie się wielu początkujących webmasterów, którym się to przyda.

Wiele osób zadaje sobie pytanie jak zrobić, aby nasza strona zawsze była dokładnie na środku ekranu, niezależnie od rozdzielczości monitora. Odpowiedź jest prosta, wystarczy zastosować prosty trick z zastosowaniem CSS'a.

Zawartość strony umieszczamy w jednym div'ie

Kod:

<div id="container">

Zawartość strony...

</div>

Następnie w css'ie (może to być w tym samym pliku bądź w osobnym z końcówką .css), wrzucamy poniższy kod

Kod:

#container{

position: relative; 

margin: 0 auto; 

width: 1000px;}

container - to oczywiście id div'a z zawartością strony.
width: 1000px; - to szerokość div'a, aby strona była na środku należy nadać mu tą samą wartość co najszerszy element (div) strony.

W ten oto prosty i szybki sposób możecie bez problemów wyśrodkować swoją stronę!

Tutorial pochodzi ze strony: michalsosnowski.pl

Ancik · 22-04-2011 15:51

Cytat:position:relative; - zapewni nam, że strona będzie dopasowywać się do wielkości ekranu
margin: 0 auto; - zapobiega rozłażeniu się strony po dodaniu kontenera

...? Po przeczytaniu tego, mam wątpliwości czy sam to rozumiesz. Wątpię, żeby jakiś początkujący cokolwiek z tego wyciągnął.

Morfeusz_2005 · 22-04-2011 18:01

Ja używam innego sposobu na wyśrodkowanie

HTML:

Kod:

<body>

<div class="calosc">

Zawartość

</div>

</body>

CSS:

Kod:

html, body

{

    margin: 0px;

    padding: 0px;

    text-align: center;

}

.calosc

{

margin: auto;

}

Sosna · 22-04-2011 19:02

Dosyć podobnie, oczywiście jest wiele sposobów na wyśrodkowanie strony, ja przedstawiłem jedną z możliwości, moim zdaniem najszybszą i najprostszą.

Leja · 27-04-2011 19:48

A ja podam Ci link do dobrego tutka: http://hubert.tulibacki.pl/artykuly/stro...-na-srodku Pozdro

(22-04-2011 18:01)Morfeusz_2005 napisał(a): Ja używam innego sposobu na wyśrodkowanie

HTML:

Kod:

<body> <div class="calosc"> Zawartość </div> </body>

CSS:

Kod:

html, body { margin: 0px; padding: 0px; text-align: center; } .calosc { margin: auto; }

Tylko że wtedy każdemu atrybutowi trzeba dodać text-align: left; przydaje to sie tylko w IE 6