#html #css
#HTML #CSS
Вопрос:
Я в основном пытаюсь поместить заголовок, а затем, как 150 пикселей, под ним изображение с подписью. Однако мой текст прикрепляется к изображению и перемещается вместе с ним.
figure { text-align: center; font-style: italic; padding-top: } img { width: 500px; margin: 0.5em; padding: 0.5em; } h1 { font-family: Georgia; margin-top: -300px; text-align: center; } lt;link href="D:DocumentsCodinghtml-css practice.css" rel="stylesheet" type="text/css"gt; lt;titlegt;Cod vanguard reviewlt;/titlegt; lt;divgt; lt;figuregt; lt;img src="https://www.callofduty.com/content/dam/atvi/callofduty/cod-touchui/blog/hero/vgd/VGD-Campaign-Overview-TOUT.jpg"gt; lt;figcaptiongt; The Campaign Image For The New Call Of Duty lt;/figcaptiongt; lt;/figuregt; lt;/divgt; lt;divgt; lt;h1gt;Call of duty vanguard reviewlt;/h1gt; lt;/divgt; Комментарии:
1. Просто чтобы было понятно…. Ваш текст о «Изображении кампании….» действительно отображается в виде подписи под изображением совершенно нормально. Ваш заголовок действительно закрывает изображение. Вы хотите изменить только заголовок??
2. Я хочу переместить изображение и подпись вниз и оставить заголовок на месте. Каждый раз, когда я пытаюсь переместить изображение и подпись вниз, заголовок перемещается вместе с ним.
3. Вы пробовали ставить
lt;h1gt;толькоlt;figuregt;что?h1возможно, вам не нужно находиться внутри Div, просто переместите его в свой код. На данный момент он находится далеко внизу в вашем коде, что означает, что он немного отображается внизу страницы, но затем вы пытаетесь переместить его вверх по странице с помощью CSS.
Ответ №1:
Просто переверните свои дивы …
figure { text-align: center; font-style: italic; padding-top: } img { width: 500px; margin: 0.5em; padding: 0.5em; } h1 { font-family: Georgia; text-align: center; margin-bottom: 150px; } lt;link href="D:DocumentsCodinghtml-css practice.css" rel="stylesheet" type="text/css"gt; lt;titlegt;Cod vanguard reviewlt;/titlegt; lt;divgt; lt;h1gt;Call of duty vanguard reviewlt;/h1gt; lt;/divgt; lt;divgt; lt;figuregt; lt;img src="https://www.callofduty.com/content/dam/atvi/callofduty/cod-touchui/blog/hero/vgd/VGD-Campaign-Overview-TOUT.jpg"gt; lt;figcaptiongt; The Campaign Image For The New Call Of Duty lt;/figcaptiongt; lt;/figuregt; lt;/divgt; Комментарии:
1. Идеальный. Именно так, как я думал выше. h1 находится далеко внизу в вашем коде, а затем вы пытаетесь переместить его вверх по странице с помощью CSS. Как говорит здесь Тони, просто поставьте h1 над изображением в своем коде. h1, возможно, даже не понадобится Div вокруг него.
2. Я в замешательстве, почему инвертирование что-то изменило. Например, есть ли в html правило, которое не соответствует порядку.
3. @Youssef1781 конечно, приказ имеет свое значение. Ваши элементы создаются для того, чтобы вы объявили об этом.
Ответ №2:
Размещение вашего «заголовка» над изображением помогло бы. Затем укажите заголовок a margin-bottom с требуемым количеством пикселей. Размещение его под изображением и создание негатива margin-top -это анти-шаблон
figure { text-align: center; font-style: italic; padding-top: } img { width: 500px; margin: 0.5em; padding: 0.5em; } h1 { margin-bottom: 150px; font-family: Georgia; text-align: center; } lt;link href="D:DocumentsCodinghtml-css practice.css" rel="stylesheet" type="text/css"gt; lt;titlegt;Cod vanguard reviewlt;/titlegt; lt;divgt; lt;divgt; lt;h1gt;Call of duty vanguard reviewlt;/h1gt; lt;/divgt; lt;figuregt; lt;img src="https://www.callofduty.com/content/dam/atvi/callofduty/cod-touchui/blog/hero/vgd/VGD-Campaign-Overview-TOUT.jpg"gt; lt;figcaptiongt; The Campaign Image For The New Call Of Duty lt;/figcaptiongt; lt;/figuregt; lt;/divgt; Ответ №3:
Это должно сработать, если вы просто поставите lt;h1gt; выше lt;figuregt; вот так…..
lt;divgt; lt;h1gt;Call of duty vanguard reviewlt;/h1gt; lt;figuregt; lt;img src="https://www.callofduty......."gt; lt;figcaptiongt; The Campaign Image For The New Call Of Duty lt;/figcaptiongt; lt;/figuregt; lt;/divgt;