08
lis
DIV na całą szerokość strony
Wykonać div-a, który jest rozciągnięty na całą szerokość strony/monitora, można na kilka sposobów. Do wykonania rozwiązania potrzebna będzie podstawowa znajomość HTML oraz CSS. Div stworzony będzie jako tło pod menu znajdujące się na górze strony (przykład: swierczek.biz).OK, zaczynamy.
Na początek należy dodać poniższą linijkę do naszego kodu źródłowego strony, jest to zadeklarowanie naszego diva:
<div id="menu-top"></div>
Następnie w arkuszu stylów CSS dodajemy:
Sposób nr 1
#menu-top { background: #000; height: 30px; position: fixed; top: 0; left: 0; width: 100%; }
Poprzez zastosowanie umiejscowienia stałego diva (fixed) o ustalonej pozycji od góry (0px) oraz od lewej (0px), div będzie cały czas u góry strony, nawet po zjechaniu scrollem niżej. Dodatkowo tło diva niezależnie od tego czy przybliżymy stronę czy też oddalimy cały czas będzie jednakowe, w tym wypadku czarne. Wadą tego rozwiązania jest to, iż po przybliżeniu strony lub oglądania w małej rozdzielczości inne elementy umiejscowione w tym divie np. tekst są niewidoczne (przykład: menu na stronie onet.pl), gdyż menu pozostaje w stałej pozycji.
Sposób nr 2
body { margin: 0; } #menu-top { background: #000; height: 30px; width: 100%; min-width:1000px; }
Jest to sposób preferowany przeze mnie, tak jak widać na mojej stronie domowej. Poprzez zastosowanie atrybutu width 100% div rozciąga się na całą szerokość strony. Nie wystarczy to jednak do ładnie wyglądającego diva ponieważ przy przybliżeniu strony i przesunięciu suwakiem w bok div będzie miał tylko szerokość „monitora” a reszta będzie miała tło strony. Dlatego zastosowany został również atrybut min-width o wartości 1000px oznacza to, że div nie będzie mógł mieć szerokości mniejszej niż 1000px dlatego przy przybliżeniu czy oddaleniu div będzie miał swoje tło.