Как перенести надпись под блок?

Question

[artem]

Надпись становится рядом с блоком, а нужно чтобы под ним. Как это сделать?

<div id="main">
				<div id="line"></div>
				<h1>Фильмы 2020</h1>
				<div id="line"></div>
				<br>	
				<br>
				<a href="">
					<img src="img/1.jpeg" alt="film" id="img1">
					<span id="name-film">«Побег из претории»</span>
				</a>
</div>

#main {
	width: 94%;
	float: left;
	margin-left: 3%;
	margin-right: 3%;
	margin-top: 60px; 
	font-family: 'Exo 2', sans-serif;
	font-weight: 300;
	color: #85959A;
}

#img1 {
	float: left;
	width: 25%;
	background-repeat: no-repeat;
	width: 25%;
	max-width: 300px;
	border-radius: 10%;
	transform: scale(0.95);
	opacity: 0.9;
	transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}

#name-film {
	float: left;
	width: 25%;
	text-align: center;
	color: #85959A;
	transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}

Comments

[Антон Литвиненко]

Аж кровь из глаз...
Ты же в курсе, что все твои вопросы видно и в предыдущем ты выучил вёрстку и вопрошаешь куда двигаться дальше?)

Answer 1

[Ankhena]

1. Не стоит использовать id для стилизации, используйте классы. И один id на странице может использоваться только один раз. Т.е. не могут одновременно существовать два div'а c id line.
2. Чтобы сделать полосочки не нужны целые div'ы.
Псевдоэлементов за глаза и за уши хватает.
Полосочки это украшения, а не содержательная часть страницы.
3. Переходите на flex и grid. Флоаты придумали не для этого.
4. Два br подряд это дурной тон. Отступы делаются с помощью padding и margin.
5. Префиксы ручками в исходниках не пишут, а используют автопрефиксер https://autoprefixer.github.io/ru/ Причем, обычно, встроенный в сборщик.
У вас они еще и в неправильном порядке написаны.
Свойство без префикса должно идти последним (за очень редким исключением).
6. Надпись становится рядом с картинкой потому что вы сказали ей "встань слева и пусть все обтекает тебя справа" (float:left) И еще потому что надпись span, т.е. строчный элемент. Нужно либо div либо p либо сделать span блочным.

Comments

[artem]

Спасибо, верстаю всего 1,5 месяца)

[Ankhena]

artem, а точно, это ш ваши шикарные вопросы вчера были ))))

Ладно, читайте, смотрите современные актуальные уроки, развивайтесь. (Только больше не пишите, что выучили верстку, засмеют)

[artem]

Ankhena, емммм... Как я ненавижу таких людей которые любят докапываться до каждого слова. Выучил вёрстку - это значит выучить синтаксис. И не какому-то человеку с инета судить кто меня засмеет, так что абсолютно точно я уверен, что ваш комментарий бесполезен. Парадигмы учить вечность.

[Ankhena]

artem, да нет, всё не так )))). Я понимаю, что школа для вас еще не закончилась и там другие понятия типа сдал-забыл. И сейчас ваше главное умение это умение огрызаться. Все такими были, это нормально )))

Выучил верстку или не важно что это значит выучил навык. Т.е. по крайней мере умение решать 100% повседневных задач. Я не говорю про уровень бог.
Никому не интересно, что вы правильно умеете писать justify-content. Нужно, чтобы вы понимали, когда его нужно применять, когда не нужно и какие побочные эффекты можно получить.
И, вы меня простите, сейчас в коде ошибки, которые не тянут на "выучил" даже в школьном понимании этого слова.

[artem]

Ankhena, Я не огрызался. Я высказал свое недовольство по отношению к вам.
Вы говорите, что под словом выучил нужно уметь решать 100% повседневных задач, но это не уровень Бог? Почему вы наводите акцент на школьник* по вашему только школьники могут быть с достаточно развитым интеллектом, чтобы ответить по факту без заострения внимание на виде деятельности собеседника ? Знаете, если никому не интересно, что я знаю как писать justyfi-content, то уж тем более никому не интересно, то содержимое, что вы отправили нажав на зелёную кнопочку.

[Ankhena]

artem,

Вы говорите, что под словом выучил нужно уметь решать 100% повседневных задач, но это не уровень Бог?

Нет, уровень бог решает не только простые повседневные задачи.
Мало того, что решает простые сотней способов, справляется с большинством сложных, а также в курсе всех проблем в смежных областях.
Попробуйте ответить на все вопросы по тегам html, css, верстка и т.д. Это, кстати, очень полезное занятие, довольно быстро и заметно расширяет кругозор.

Ну не интересно, так не интересно. И я бы даже удивилась, если бы вы написали обратное )))) Тоже всегда говорила, что свои шишки пойду набивать сама. Но справедливости ради, хочу сказать спасибо своим учителям (привет, учителя) :)

Так что не злитесь ни на меня ни на других отвечающих, корыстных целей тут нет, в основном, желание помочь, иногда решением, иногда намеком на него или ссылкой в какую сторону копать.

[artem]

Ankhena, иногда тупым бессмысленным комментарием.