1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

Как отпустить картинку с текстом "Подробности в описании к видео" чуть ниже?

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем codor, 14 июн 2018.

  1. codor

    codor

    Регистрация:
    9 июн 2018
    Сообщения:
    4
    Симпатии:
    0
    Привет!

    Как отпустить картинку с текстом "Подробности в описании к видео" чуть ниже? Чтобы выло видно, что это говорит Алмаз из Уфы?

    Сейчас выглядит немного коряво www.ufa.octawa.ru
    Гуглил, но не смог найти подходящий тег для изображений.
    HTML:
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Уфимцы на бизнес-тренингах Тони Роббинса</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header"></div>
<div id="head">
<p><font face="Droit Serif"><em>Белеме барҙың ҡәҙере бар. <br>Выше всего ценятся знания (башкирская пословица). <br>Знание - половина ума (русская пословица).</em></font></p>
<img src="значок стрелка вниз.png" width="48" height="48" alt=""/><br>
<img src="самолетик.png" width="48" height="48" alt=""/><br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/xS7sIBztBCI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><br>
<br>
<br>
<br>
<img src="speech balloon with words.png" width="280" height="157.5" alt=""/><br>
<p><font face="Droit Serif"><a href="[MEDIA=youtube]xS7sIBztBCI[/MEDIA]">Алмаз из Уфы (с 00:40:54): "Изменилось очень многое. Физиология... Изменения <br>в бизнесе, то есть финансы. Ну, мы и до этого были не бедные люди. Скачок был <br>феноменальный. Изменения впечатляющие. Серьезные цифры."</a></font></p>
<p><font face="Droit Serif"><a href="https://www.youtube.com/channel/UC12htG3aU9E5ABojYxs4DwA?sub_confir mation=1">По� �мотреть другие видеоотзывы и обучающие ролики Тони Роббинса"</a></font><img src="значок класс.png" width="" height="" alt=""/><img src="значок play.png" width="" height="" alt=""/></p>
<br>
<br>
<br>
<p>Фото: https://flic.kr/p/Ffv7Yw (CC BY 2.0)</p>
</div>
</body>
</html>
     
    Lasted edited by : 14 июн 2018
    codor, 14 июн 2018
    #1
  2. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Я не могу понять суть вашей задачи. Вам нужно опустить чуть ниже или поменять местами с текстом отзыва?

    Если опустить - используйте для неё margin-top, если поменять местами - просто перенесите тег img.

    Какой подходящий тег? Он только один и уже у вас используется - img.
     
    Dotrox, 14 июн 2018
    #2
  3. codor

    codor

    Регистрация:
    9 июн 2018
    Сообщения:
    4
    Симпатии:
    0
    Суть задачи в том, чтобы стрелочка с облаком для текста (как в комиксах) была ближе к говорящему (в данном случае это Алмаз)
    --- Добавлено, 15 июн 2018 ---
    Все равно картинка ниже не отпустилась... Что я делаю не так?

    Добавил в style.css margin-bottom:
    HTML:
    @charset "utf-8";
/* CSS Document */
#header { position:absolute; top:0px; left:0px; min-width:700px;
max-width:1920px;
width:100%;
height:400px;
background-image:url(/25762026606_97c6e77772_o.jpg);
background-repeat:repeat;
background-size: 50%; }
#head{
margin-top: 410px;
}
#balloon{margin-bottom: -10px;
}
    Добавил в index.html
    HTML:
    <div id="balloon"></div>:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Уфимцы на бизнес-тренингах Тони Роббинса</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header"></div>
<div id="head">
<p><font face="Droit Serif"><em>Белеме барҙың ҡәҙере бар. <br>Выше всего ценятся знания (башкирская пословица). <br>Знание - половина ума (русская пословица).</em></font></p>
<img src="значок стрелка вниз.png" width="48" height="48" alt=""/><br>
<img src="самолетик.png" width="48" height="48" alt=""/><br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/xS7sIBztBCI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><br>
<br>
<br>
<br>
<div id="balloon"><img src="speech balloon with words.png" width="280" height="157.5" alt=""/><br></div>
<p><font face="Droit Serif"><a href="[MEDIA=youtube]xS7sIBztBCI[/MEDIA]">Алмаз из Уфы (с 00:40:54): "Изменилось очень многое. Физиология... Изменения <br>в бизнесе, то есть финансы. Ну, мы и до этого были не бедные люди. Скачок был <br>феноменальный. Изменения впечатляющие. Серьезные цифры."</a></font></p>
<p><font face="Droit Serif"><a href="https://www.youtube.com/channel/UC12htG3aU9E5ABojYxs4DwA?sub_confirmation=1">Посмотреть другие видеоотзывы и обучающие ролики Тони Роббинса"</a></font><img src="значок класс.png" width="" height="" alt=""/><img src="значок play.png" width="" height="" alt=""/></p>
<br>
<br>
<br>
</div>
</body>
</html>
     
    Lasted edited by : 15 июн 2018
    codor, 15 июн 2018
    #3
  4. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Если вам нужно уменьшить отступ между этим изображением и текстом, вам нужно убрать дефолтный браузерный margin у тега p, то есть, прописать свой (например, нулевой).
    Именно этот margin сейчас создаёт отступ.
     
    Dotrox, 15 июн 2018
    #4
< Bootstrap4 - при открытии модального окна, сайт выкидывает наверх. | Меню перекрывает все остальное своей высотой. >