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

Rozmieszczanie divów

+1 głos
55 wizyt
pytanie zadane 21 listopada w HTML i CSS przez Pasjans Nowicjusz (130 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 przez qax Mądrala (6,470 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 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 przez VBService VIP (136,830 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 189 wizyt
pytanie zadane 18 sierpnia 2019 w HTML i CSS przez Radek Koniarski Użytkownik (870 p.)
0 głosów
1 odpowiedź 570 wizyt
pytanie zadane 24 kwietnia 2016 w HTML i CSS przez Ziuziek Mądrala (5,150 p.)
0 głosów
1 odpowiedź 83 wizyt
pytanie zadane 22 kwietnia 2016 w HTML i CSS przez Ziuziek Mądrala (5,150 p.)

85,774 zapytań

134,555 odpowiedzi

298,695 komentarzy

56,666 pasjonatów

Advent of Code 2021

Top 15 użytkowników

  1. 64p. - nidomika
  2. 62p. - ScriptyChris
  3. 60p. - Whistleroosh
  4. 57p. - adrian17
  5. 55p. - CC PL
  6. 55p. - B4mbus
  7. 53p. - Klaudia
  8. 50p. - WhiskeyTaster
  9. 47p. - rucin93
  10. 45p. - tokox
  11. 44p. - Adrian Rębisz
  12. 43p. - Michał Tartanus
  13. 41p. - Jarosław Roszyk
  14. 38p. - Argeento
  15. 18p. - Marcin Harasimowicz
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...