• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Rozmieszczanie divów

VPS Starter Arubacloud
+1 głos
103 wizyt
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ź

+1 głos
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 (251,250 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;
}

Podobne pytania

0 głosów
2 odpowiedzi 485 wizyt
pytanie zadane 18 sierpnia 2019 w HTML i CSS przez Radek Koniarski Użytkownik (870 p.)
0 głosów
1 odpowiedź 1,599 wizyt
pytanie zadane 24 kwietnia 2016 w HTML i CSS przez Ziuziek Mądrala (5,140 p.)
0 głosów
1 odpowiedź 149 wizyt
pytanie zadane 22 kwietnia 2016 w HTML i CSS przez Ziuziek Mądrala (5,140 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...