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

Как можно вынести текст в отдельный блок с отступом, чтобы шапка не наезжала?

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

  1. codor

    codor

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

    Сайт www.presents.octawa.ru . Cейчас шапка наезжает на текст.
    Как можно вынести текст в отдельный блок с отступом? Чтобы шапка не наезжала.

    Только осваиваю html и css. Пожалуйста, подробнее.

    Файлы index.html, style.css ниже.

    style.css
    @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(/thumbnail_large.jpg);
    background-repeat:no-repeat;
    background-size: 100%; }


    index.html
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Подарок от Sphere. Сфера Ваших интересов</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    <div id="head"> <div id="header"></div> </div>
    <p><font face="Droit Serif">Привет, друг! Мы дарим тебе в <font color="blue">подарок</font><img src="подарок мини.png" width="59" height="42" alt=""/> <img src="улыбка.png" width="42" height="42" alt=""/> книги Тони Роббинса (формат doc):</font><br></p> <p><img src="книга о власти над собой.jpg" width="178" height="178" alt=""/><br><font face="Droit Serif">Книга о власти над собой - программа о том, как самостоятельного избавиться от страхов и предрассудков, кардинально улучшить отношения с окружающими людьми, зарядить свой организм завидным здоровьем и неукротимой энергией, добиться вершин личных достижений.</font></p>
    <hr size=1px width=970px align="left">
    <p><img src="разбуди в себе исполина.jpg" width="178" height="178" alt=""/><br><font face="Droit Serif">Разбуди в себе исполина - наиболее эффективные стратегии и конкретные приемы для того, чтобы каждый человек смог взять под контроль все силы, играющие его жизнью и судьбой: свои чувства и эмоции, телесное здоровье, финансы, отношения с окружающими людьми.</font></p>
    <hr size=1px width=970px align="left">
    <p><img src="заметки друга.jpg" width="178" height="178" alt=""/><br><font face="Droit Serif">Заметки друга - написана в качестве пособия для тех, у кого сейчас «тяжелые времена», эта книга
    представляет собой упрощенный вариант материала, представленного в вышеописанных, гораздо
    больших по объему, книгах, и предлагает читателям дружескую поддержку в виде нескольких
    простых шагов для немедленного улучшения их жизни к лучшему.</font></p>
    <a href="https://www.spheretrainings.com/podarki"><img src="кнопка Получить подарок.JPG" width="184" height="40" alt=""></a><br>
    <font face="Droit Serif"><a href="www.spheretrainings.com">Перейти на сайт</a></font><br>
    <img src="подарок.png" width="795" height="561" alt=""/><br>
    <font face="Droit Serif">С уважением,<br>
    команда Sphere<br>
    <a href="www.spheretrainings.com">www.spheretrainings.com</a></font><br>
    <img src="визитная карточка SPHERE с девизом, линией и рамкой - сфера ваших интересов 2.png" width="336" height="192" alt=""/><br>
    <font face="Droit Serif" size="2">&copy; Sphere. Сфера Ваших интересов</font>
    </body>
    </html>
     
  2. Dotrox

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

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Потому что у неё непонятно зачем стоит position: absolute.
    Зачем?
     
  3. codor

    codor

    Регистрация:
    9 июн 2018
    Сообщения:
    4
    Симпатии:
    0
    Удалил position:absolute, но все равно шапка закрывает часть книги и текст сверху (текст видно частично только при уменьшении окна).

    style.css

    @charset "utf-8";
    /* CSS Document */
    #header { top:0px; left:0px; min-width:700px;
    max-width:1920px;
    width:100%;
    height:400px;
    background-image:url(/thumbnail_large.jpg);
    background-repeat:no-repeat;
    background-size: 100%; }
    --- Добавлено, 10 июн 2018 ---
    Сделал!

    Просто нужно было в css прописать #head{
    margin-top: 410px;
    }

    И из <div id="head"> <div id="header"></div> </div>
    вынести <div id="head">сам текст</div>