Automatyczne marginesy między zdjęciami na stronie www

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

odpowiedź 7 października 2018 przez Greeenone Pasjonat (16,100 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

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.