[CSS] Jak zrobić w css pasek na całą stronę


(MrGalek) #1

Hej
Ucze się CSSa i chciałem zrobić na stronie pasek na full ekran, tak jak np: jest czarny pasek na forum Dobrych Programów. Niestety u mnie jest dosłownie minimetry w ramach ekranu (na ss’ie widać).

#top
{
    height: 80px;
    font-family: 'Lobster', cursive;
    font-size: 30px;
    color: white;
    width: 100%;
    background-color: #8467a9;
    text-align: center;
}

2017-08-14 13_35_07-Nowa karta


(masma) #2

Musisz dodać ostylowanie znacznika “body”:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>	
#top{ 	
height: 80px;
font-family: 'Lobster', cursive;
font-size: 30px;
color: white;    
background-color: #8467a9;
text-align: center;
}
body {
margin-left: 0px;
margin-top: 0px;
width: 100%;
}
</style>
</head>
<body>
<div id="top"></div>
</body>
</html>

(Fizyda) #3

Przypadkiem nie masz #top w jakimś innym kontenerze który nie jest rozciągnięty na całą szerokość okna przeglądarki? Ogólnie wartość % odnosi się do rozmiaru nadrzędnego obiektu czyli jeśli masz okno przeglądarki o szerokości 1000px, w nim kontener wrapper o szerokości 500px to 100% dla kolejnego kontenera który znajduje się w kontenerze wrapper 100% szerokości to będzie 500px a nie 1000px.

EDIT:
Albo jak wyżej może chodzić o to że nie zresetowałeś domyślnych styli przeglądarki, każda przeglądarka ma coś takiego jak domyślne style CSS - każda może mieć trochę inne reguły, więc jeśli ich nie zresetujesz to domyślnie body lub html mogą mieć jakieś marginesy lub dopełnienia które psują Ci Twój efekt.
By temu zaradzić stosuje się dodatkowy plik ze stylami często nazwany reset.css który jest wczytywany jako pierwszy, zawartość takiego pliku można skopiować z gotowców dostępnych na internecie, wystarczy że wpiszesz reset css i wyskoczą Ci gotowe reguły resetujące domyślne style przeglądarek.


(MrGalek) #4

Tak jest to z body pomogło dziękuję wam bardzo :slight_smile: