Co mam zrobić żeby div był na całej szerokości monitora.

pytanie zadane 3 października 2018 w HTML i CSS przez Karol.99 Użytkownik (550 p.)

Co mogę zrobić, żeby pozbyć się zaznaczonej "ramki"? Chodzi mi o to żeby div "heading" był na całej szerokości monitora.

<!DOCTYPE HTML>
<HTML lang="pl">
<head>
	<meta charset="utf-8"/>
	<title>Facebook - zaloguj się lub zarejestruj</title>
	<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
	<div id="container">
	
		<div class="heading">
			<div class="logo">
			</div>
			<div class="signin">
			</div>
		</div>
		
		<div class="content">
			<div class="image">
			</div>
			<div class="registration">
			</div>
		</div>
		
		<div class="footer">
		</div>
	</div>
</body>
</HTML>

body
{
	background-color: #648e91;
}

#container
{
	
}

.heading
{
	background-color: #196266;
	height: 70px;
	
}

2 odpowiedzi

odpowiedź 3 października 2018 przez arces Pasjonat (17,700 p.)

Nie masz zresetowanych ustawień przeglądarki.

body {
  padding: 0;
  margin: 0;
}

Najlepiej to dołączyć normalize.css albo reset.css i wtedy nie ma problemu z resetowaniem ustawień przeglądarki.

komentarz 3 października 2018 przez Tomek Sochacki Ekspert (227,510 p.)

Najlepiej to dołączyć normalize.css albo reset.css i wtedy nie ma problemu z resetowaniem ustawień przeglądarki.

A dlaczego najlepiej? Przyznam szczerze, że kiedyś dawno temu sam korzystałem nagminnie z resetów css, ale od dluższego czasu nie stosuję praktycznie żadnych styli globalnych po z max-width dla body i jest to wg mnie o wiele lepsze podejście, ponieważ tworzysz wtedy komponenty przenośne, które możesz wykorzystać bez problemów w innych projektach. Resety css to wg mnie tylko proszenie się o kłopoty gdy zechcesz jakiś komponent użyć gdzie indziej, a tak się często zdarza, przynajmniej mi.

komentarz 4 października 2018 przez arces Pasjonat (17,700 p.)

Dlaczego problem z przeniesieniem komponentów? W kolejnym projekcie też możesz użyć sobie resetów i będziesz miał to samo? Chyba, że źle zrozumiałem to co napisałeś.

komentarz 4 października 2018 przez Tomek Sochacki Ekspert (227,510 p.)

bo to tak naprawdę w ogole niepotrzebne, mam teraz kilka większych projektów w angularjs i angular i ani jednego resetu co pozwala mi swobodnie korzystać z wielu uniwersalnych komponentów jakie sobie robię.

komentarz 4 października 2018 przez arces Pasjonat (17,700 p.)

Nie odpowiedziałeś mi na pytanie, które zadałem. W jaki sposób przeszkadza Ci resetowanie CSS lub normalizacja CSS przy przenoszeniu komponentów? Jeżeli korzysta się z tego zawsze, to komponent też będzie wyglądał zawsze tak samo. Inna sprawa, że niektórzy korzystają z tego drudzy nie, ale chyba (wydaje mi się), że więcej jest tych pierwszych.

komentarz 4 października 2018 przez Tomek Sochacki Ekspert (227,510 p.)

Jeżeli korzysta się z tego zawsze, to komponent też będzie wyglądał zawsze tak samo.

No i ja właśnie w tym miejscu widzę problem - już na starcie narzucasz sobie takie ograniczenie w kolejnych projektach, wg mnie zupełnie niepotrzebnie.

A ponad to kwestia też wielkości projektu. A co jeśli tworzy wspólnie kilkudziesięciu programistów w firmie i kilkanaście zespołów... jeśli masz taką zdolność aby wszystkim narzucać z góry swoje wytyczne to super, ale nie w każdej firmie tak jest, często wiele zespołów wdraża swoje ficzery w różnych technologiach i wg mnie ważne jest poszukiwanie rozwiązań jak najbardziej przenośnych i jak najmniej inwazyjnych dla każdego systemu.

Oczywiście to moje subiektywne zdanie, m.in. na podstawie własnych obserwacji z projektu, nad którym siedzi kilkuset programistów gdzie na prawdę ciężko narzucać różne odgórne wytyczne technologiczne będące wytycznymi dla całego projektu... czasami lepiej zrobić nawet większy narzut pracy i kodu nad jakimś komponentem tylko po to, aby za chwilę inny zespół mógł go szybko i łatwo wykorzystać u siebie, bez konieczności dużych modyfikacji swojego srodowiska.

Ale tak jak pisałem, jest to kwestia subiektywna i wg mnie dużo zależy też od tego, jak traktuje się inne zespoły w firmie i jak myśli się o przyszłych update projektu.

odpowiedź 3 października 2018 przez Karol.99 Użytkownik (550 p.)

Zbyt pochopnie dodałem pytanie. Już sobie z tym poradziłem, wystarczyło w css do body{} dodać : margin: 0 !important;

komentarz 3 października 2018 przez Artur Koniec Gaduła (3,680 p.)

Polecam przejść JAKIKOLWIEK kurs, chociażby P. Mirka, dowiedział byś się tego na pierwszych godzinach ;)

komentarz 3 października 2018 przez arces Pasjonat (17,700 p.)

O ile podstaw mógłby się nauczyć, tak też również pewnie niektórych starych, już niewykorzystywanych rzeczy. Są o wiele nowsze kursy, które uczą już poprawnie.

Co do tego co zauważyłeś sam (autorze wątku), nie używaj importantów bez potrzeby, bo tylko wprowadzą Ci chaos w kod. Staraj się tego unikać.