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

Automatyczne marginesy między zdjęciami na stronie www

Aruba Cloud PRO i VPS, Openstack, VMWare, MS Hyper-V
0 głosów
171 wizyt
pytanie zadane 6 października 2018 w HTML i CSS przez Lite Obywatel (1,030 p.)

Witajcie.

Mam problem z zdjęciami na stronie www.

Tworzę prostą stronę na jedną imprezę w szkole. Dodając zdjęcia w kodzie HTML tworzą się między nimi marginesy mimo braku nadania marginesów w kodzie. Jeżeli jest wstanie ktoś pomóc zapraszam do zapoznania się z stroną www.zsofestiwal.pl oraz kodem podanym niżej:

<!DOCTYPE html>
<html>
	<head>
		<title>Festiwal Talnetów Elbląg</title>
		<meta charset=utf-8 />
		<link rel="stylesheet" href="css.css" text="text/css" />
		<link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	</head>
	<body>
		<div id=conteiner1>
		
			<img src="top.png" width=100%; height: 100%;/>

		</div>
		<div id=conteiner>
			<img src="div/1.png" width="100%" height="100%" >
			<img src="div/2.png" width="100%" height="100%" >
			<img src="div/3.png" width="100%" height="100%" >
			<img src="div/4.png" width="100%" height="100%" >
			<img src="div/5.png" width="100%" height="100%" >
			<img src="div/6.png" width="100%" height="100%" >
			<img src="div/7.png" width="100%" height="100%" >
			<img src="div/8.png" width="100%" height="100%" >
			<img src="div/9.png" width="100%" height="100%" >
			<img src="div/10.png" width="100%" height="100%" >
			<img src="div/11.png" width="100%" height="100%" >
		</div>
	</body>
</html>
body
{
	background-repeat: no-repeat;
	background-color: black;
}
#conteiner
{
	width: 100%;
	height: 100%;
	font-family: 'Great Vibes', cursive;
}
#conteiner1
{
	width: 100%;
	height: 100%;
}
.tile
{
	width: 14.3%;
	height: 4.9%;
    color: rgba(255,255,255,0.5);
    filter: alpha(opacity=50);
	text-align: center;
	font-family: 'Great Vibes', cursive;
	position: absolute;
	float-color: black;
	font-size: 70%;
	top: 0;
	left: 0;
}

 

3 odpowiedzi

0 głosów
odpowiedź 7 października 2018 przez Greeenone Pasjonat (16,120 p.)
Nadają zdjęciom następującą właściwość:

display: inherit;
komentarz 7 października 2018 przez Lite Obywatel (1,030 p.)

Zrobiłem to w taki sposób i niestety nie działa, domyślam się że zrobiłem to źle dlatego proszę, popraw mnie :D

<!DOCTYPE html>
<html>
	<head>
		<title>Festiwal Talnetów Elbląg</title>
		<meta charset=utf-8 />
		<link rel="stylesheet" href="css.css" text="text/css" />
		<link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	</head>
	<body>
		<div id=conteiner1>
		
			<img src="top.png" width=100%; height: 100%; display: inherit;; />

		</div>
		<div id=conteiner>
			<img src="div/1.png" width="100%" height="100%" display: inherit; />
			<img src="div/2.png" width="100%" height="100%" display: inherit; />
			<img src="div/3.png" width="100%" height="100%" display: inherit; />
			<img src="div/4.png" width="100%" height="100%" display: inherit; />
			<img src="div/5.png" width="100%" height="100%" display: inherit; />
			<img src="div/6.png" width="100%" height="100%" display: inherit; />
			<img src="div/7.png" width="100%" height="100%" display: inherit; />
			<img src="div/8.png" width="100%" height="100%" display: inherit; />
			<img src="div/9.png" width="100%" height="100%" display: inherit; />
			<img src="div/10.png" width="100%" height="100%" display: inherit; />
			<img src="div/11.png" width="100%" height="100%" display: inherit; />
		</div>
	</body>
</html>
body
{
	background-repeat: no-repeat;
	background-color: black;
}
#conteiner
{
	width: 100%;
	height: 100%;
	font-family: 'Great Vibes', cursive;
	display: inherit;
}
#conteiner1
{
	width: 100%;
	height: 100%;
	display: inherit;
}
.tile
{
	width: 14.3%;
	height: 4.9%;
    color: rgba(255,255,255,0.5);
    filter: alpha(opacity=50);
	text-align: center;
	font-family: 'Great Vibes', cursive;
	position: absolute;
	float-color: black;
	font-size: 70%;
	top: 0;
	left: 0;
}

 

komentarz 7 października 2018 przez StOcK Mądrala (6,100 p.)

To co wrzuciłeś wyżej to próbujesz do elementu html dodać atrybut display. Nie ma takiego atrybutu. Musisz dodać style="display:block" A już najlepiej zrób to w css

0 głosów
odpowiedź 7 października 2018 przez arces Pasjonat (17,700 p.)

Zdjęcia mają domyślnie

display: inline;

Do każdego zdjęcia zmień na

display: block;

i będzie wszystko dobrze.

 

P.S.

Dziwny sposób wybrałeś do zakodowania strony w ten sposób ;)

komentarz 7 października 2018 przez Lite Obywatel (1,030 p.)
Niestety kolego Twój pomysł też mi nie zadziała (spójrz odpowiedź wyżej i podmień     display: inherit; na     display: block;.

Odpowiadając na dziwny sposób kodowania, jestem samoukiem, taka techniki u mnie się "wyrobiła" dlatego w taki sposób wszystko tworzę. Bardzo trudno jest mi znaleźć jakiegoś mentora który pomógłby mi z nauką dlatego powolutku uczę się po swojemu.
komentarz 7 października 2018 przez arces Pasjonat (17,700 p.)
Działać mój sposób musi działać, bo sprawdzałem na Twojej stronie. Display: inherit też działa, bo też sprawdzałem, więc oba sposoby rozwiązują Twój problem.

 

Co do mentora to zawsze można się samemu doszkalać. W internecie jest już tyle tutoriali, że bez problemu podstawy można załapać samemu. Też jestem samoukiem, ale jak już coś zaczynać to od najlepszych praktyk.
komentarz 7 października 2018 przez Lite Obywatel (1,030 p.)
Zadziałaó ale teraz mam inny problem. Dodałem zdjęcia inaczej ponieważ niżej były takie żółte bloczki które mają mieć hiperłącza. Teraz gdy jest display: block; lub display: inherit; robi się to www.zsofestiwal.pl . Czy masz może pomysł co na to zaradzić?
komentarz 8 października 2018 przez arces Pasjonat (17,700 p.)
Obecnie widzę zupełnie rozjechaną stronę, więc coś musiałeś zmienić sam.
komentarz 8 października 2018 przez Lite Obywatel (1,030 p.)
Chodzi o to aby te 3 obrazki były obok siebie, dodając definicję któregokolwiek diplayu tworzą się właśnie takie klocki które nie są obok siebie tylko pod spodem, musi też być najlepiej width: 100% i height: 100% tak aby komenda <meta name="viewport" content="width=device-width, initial-scale=1.0" /> dalej pracowała i skalowała te wielkości to rozdzielczości ekranu na którym otwierana jest strona.
0 głosów
odpowiedź 7 października 2018 przez StOcK Mądrala (6,100 p.)

Co do strony, tamten css jest po porstu ulepiony :D
 

#conteiner img {
    display: block;
}

Powinno załatwić sprawę

Podobne pytania

–1 głos
1 odpowiedź 121 wizyt
pytanie zadane 4 października 2017 w HTML i CSS przez Wojtaz Nowicjusz (240 p.)
+1 głos
1 odpowiedź 168 wizyt
pytanie zadane 20 stycznia 2019 w HTML i CSS przez DEVO-SON Początkujący (260 p.)
0 głosów
1 odpowiedź 638 wizyt
pytanie zadane 15 sierpnia 2017 w HTML i CSS przez Sirtek Nowicjusz (170 p.)

89,777 zapytań

138,386 odpowiedzi

309,503 komentarzy

59,681 pasjonatów

Advent of Code 2022

Top 15 użytkowników

  1. 1088p. - Argeento
  2. 1032p. - nidomika
  3. 1024p. - rucin93
  4. 1020p. - Michal Drewniak
  5. 1014p. - Łukasz Eckert
  6. 1006p. - Mikbac
  7. 988p. - TheLukaszNs
  8. 963p. - JMazurkiewicz
  9. 960p. - adrian17
  10. 945p. - Jarosław Roszyk
  11. 941p. - Hubert Chęciński
  12. 920p. - Mawrok
  13. 914p. - overcq
  14. 859p. - ssynowiec
  15. 848p. - Adam Salamon
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! ♡

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

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

...