Menu o stałej szerokości poniżej treści w kodzie
16 listopada 2006
Często stosowanym układem layoutu jest menu o stałej szerokości dostawione z jednej strony układu, tak aby druga kolumna dopasowywała się płynnie do pozostałej szerokości.
Standardowe rozwiązanie jest proste - umieścić w HTML menu (#sidebar) nad treścią (#content), ustawić szerokość oraz float - a temu drugiemu margines równy szerokości menu.
HTML:
<div id="sidebar">…</div><div id="content">…</div>
CSS:
#sidebar {width: 200px;float: left;}#content {margin-left: 200px;}
Jednak ten sposób sprawia problemy. Jako, że umieszczamy kod menu nad zawartością:
- zmuszamy gości do zobaczenia ładującego się menu przed resztą
- musimy dodać link przeskoczenia nawigacji, inaczej się zaklika (klawiatury) albo ogłuchnie (czytniki)
- spada wartość naszej strony dla wyszukiwarek
I tak dalej. Więc wrócmy do początku i zamieńmy kolejność. Dodatkowo na potrzeby nowego CSS-a należy dodać kolejny div do zawartości oraz otoczyć obydwa wrapperem (co zwykle i tak się czyni w prawie każdym układzie).
<div id="wrapper"><div id="content"><div>…</div></div><div id="sidebar">…</div></div>
Wszystko teraz opiera się na sztuczce z marginesami.
Najpierw floatujemy
#contentw prawo oraz ustawiamy mu szerokość równą 100%.Następnie odciągamy go w prawo za pomocą ujemnego marginesu równemu szerokości menu.
A nowo wstawionemu divowi do
#contentdajemy taki sam margines, ale już dodatni.Na koniec wrapperem przycinamy całość za pomocą
overflow: hidden.
#sidebar {width: 200px;}#content {float: right;width: 100%;margin-right: -200px;}#content div {margin-right: 200px;}
Dla IE należy poprawić tylko błąd wynikający z niepoprawnego zaokrąglania wartości, który powoduje, że sidebar nie mieści się tam gdzie powinien być.
Jeśli chcemy być perfekcyjni w każdym pikselu, możemy w arkuszu dla IE dodać taki kod:
html {overflow-x: hidden;}#wrapper {width: 100.5%;}#content {width: 99.5%;position: relative;left: -0.5%;}
Jeśli nie, zmniejszenie width wystarczy.
Demo.
