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.

Możliwość komentowania jest wyłączona.

Autor

Dawid Świerczek

Dawid Świerczek

Zajmuje się projektowaniem oraz programowaniem aplikacji wykorzystując platformę .NET, głównie C#. Potrafię również wykonać strony internetowe i z powodzeniem je wypozycjonować. Nieustannie uczę się nowych technologi, aby moje aplikacje były jeszcze lepsze i bardziej wydajne. więcej...

Szukaj