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.

3 odpowiedzi na “DIV na całą szerokość strony”

  1. Wioleta napisał(a):

    dziękuję też szukałam rozwiązania tego problemu 🙂

  2. Kris napisał(a):

    U mnie nie działa x) to jeszcze nie to

  3. Kacper napisał(a):

    Dzięki szukałem tego kilka godzin.Naprawdę super post i myślę że rozwiązał wielu ludziom ten sam problem który przed chwilą miałem.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

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