[home]
techniki internetowe[home] 24/V
[top]

Beauty of style and harmony and grace and good rhythm depend on Simplicity

Platon

Układy wielokolumnowe

1 wyśrodkowana kolumna

Element możemy środkować korzystając z wartości auto właściwości margin:

#wrapper { width: 720px; margin: 0 auto; }

Można wyśrodkować element korzystając z pozycjonowania i ujemnych marginesów

#wrapper { width: 720px; position: relative; left: 50%; margin-left: -360px; }

Oto przykład

Technically it's easy, but the conception of this kind of interface is the really amazing part, just having the idea and then realizing that it could be done. So many things are simple once you've seen that they're possible.

Glenn Vanderburg

2 kolumny: korzystamy z pływania

Projekty korzystające z pływania są łatwe do przygotowania. Ustawiamy szerokości elementów i włączamy pływanie. Jest tylko jednen problem z elementami pływającymi: nie zajmują one miejsca. Dlatego za elementami pływającymi musimy użyć właściwości clear. Jeśli dokument ma stopkę, to idealnie się ona nadaje do ustawienia tamowania na obu marginesach.

Prosty dwukolumnowy układ może wyglądać tak:

<div id="wrapper"> <div id="branding"> ... </div> <div id="content"> ... </div> <div id="navigation"> ... </div> <div id="footer"> ... </div> </div>

Kod CSS rozmieszczający w taki sposób elementy na stronie jest bardzo prosty:

#wrapper { width: 720px; margin: 0 auto; } #content { width: 520px; float: right; } #navigation { width: 180px; float: left; } #branding, #footer { clear: both; }

Oto przykład.

Element nawigacyjny nie wypełnia całej kolumny aż do stopki. Nie wygląda to ładnie.

Pustą przestrzeń można wypełnić umieszczając w tle obrazek. Dan Cederholm nazwał ten sposób faux columns.

#wrapper { background: #ffffff url(/images/navigation-background.png) repeat-y left top; }

Oto przykład po poprawce.

Fixed width, liquid, elastic layouts

fixed width layout — szerokość definiowana w pikselach, liquid layout — szerokość definiowana w procentach, elastic layout — szerokość definiowana w stosunku do rozmiaru fontu.

Materiały w sieci

[top]