Rozmieszczanie divów

pytanie zadane 21 listopada 2021 w HTML i CSS przez Pasjans Początkujący (280 p.)

Dzień dobry, uczę się robić strony internetowe i ugrzązłem na rozmieszczaniu divów. Otóz chciałbym stworzyć stronę agroturystki i mam plan aby w "home page'u", w tle było zdjęcie domku, a pod nim trochę tekstu na temat okolicy itp. Mam dwa problemy, albowiem mój div "photo"(ten czerwony kwadrat) ma jakby padding wokół niego. Nie wiem jak to wyłączyć tak aby moja strona nie miała tej brzydkiej ramki wokół zdjęcia. Po drugie chciałbym aby moje menu było na divie ze zdjęciem, jednak kiedy próbuję to na siebie nałożyć div z paskiem menu przeskakuje na dół. W załączniku przesyłam zdjęcie strony.



<!DOCTYPE HTML>
<html>

<head>

<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
</head>




<body>
	
	<div id="container"> 
		<div id="photo"></div>
		<div id="header">
		
		
		<div id="oferta">Oferta</div>
		<div id="kontakt">Kontakt</div>
		<div id="rezerwacja">Rezerwacja</div>
		<div id="atrakcje">Atrakcje</div>
		<div id="galeria">Galeria</div>
		
		<div style="clear: both;"></div>
		</div>
		
		<span class="divider"></span>
		
		
		
		
		
	
	</div>



</body>







</html>

body
{
	
	color: #ffffff;
	font-family: 'Lato', sans-serif;
	font-size: 15px;
	background-color: #303030
}

#container
{
	
	margin-left: auto;
	margin-right: auto;
	
	
	
	
}

#header
{
	width: 800px;
	padding-top: 20px;
	margin-left: auto;
	margin-right: auto;
	
}
#photo
{
	
	height: 100px;
	width: 400px;
	background-color: red;
	
}

#oferta
{
	


	font-size: 25px;
	width: 150px;
	float: left;
}


#rezerwacja
{
	font-size: 25px;
	width: 150px;
	float: left;
}

#atrakcje
{
	padding-left: 40px;
	font-size: 25px;
	width: 150px;
	float: left;
}


#kontakt
{
	font-size: 25px;
	width: 150px;
	float: left;
}

#galeria
{
	
	font-size:25px;
	width: 150px;
	float:left;
}

.divider{
	margin-top: 20px;
	margin-left: 50px;
	margin-right: 50px;
	
	
	width: 1750px;
	height: 1px;
	background-color: white;
	display: inline-block;
}

1 odpowiedź

odpowiedź 21 listopada 2021 przez qax Dyskutant (8,060 p.)

Myślę, że to zdjęcie w tle (na czerwonym prostokącie) mógłbyś przenieść po prostu do div#container, natomiast żeby pozbyć się tego wolnego miejsca wokół strony należy ustawić to w znaczniku body (i najlepiej jeszcze w html):

html, body {
    margin: 0;
    padding: 0;
}

#photo
{
    height: 100px;
    width: 400px;
    /*background-color: red;*/
}

#container
{
    margin-left: auto;
    margin-right: auto;
    background-color: red;
}

1	komentarz 21 listopada 2021 przez Posejdon Początkujący (490 p.) Może warto jeszcze ustawić by automatycznie się dostosowywała strona do wymiarów rozdzielczości ?. Trochę o tym wałkowałem tutaj na forum zobacz moje tematy które założyłem.

komentarz 23 listopada 2021 przez VBService Ekspert (253,100 p.)

@Pasjans, kolega @Posejdon, słusznie zwrócił uwagę na to

Może warto jeszcze ustawić by automatycznie się dostosowywała strona do wymiarów rozdzielczości ?.

zobacz co się dzieje gdy dostępna szerokość "ekranu" jest mniejsza od

width: 1750px;

.divider{
    margin-top: 20px;
    margin-left: 50px;
    margin-right: 50px;
     
     
    width: 1750px; /* <==  TO */
    height: 1px;
    background-color: white;
    display: inline-block;
}