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

codor · June 9, 2018

Привет!

Сайт 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>

Edited June 10, 2018 by codor

AlexZaw · June 9, 2018

Уберите абсолютное позиционирование у #header и все встанет как надо.

Либо добавьте стили

#head{
  margin-top: 400px;
}

codor · June 10, 2018

16 часов назад, AlexZaw сказал:
Уберите абсолютное позиционирование у #header и все встанет как надо.

Либо добавьте стили
#head{
  margin-top: 400px;
}

Удалил 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%; }

Edited June 10, 2018 by codor

AlexZaw · June 10, 2018

Может я чего то не понимаю, но сейчас по вашей ссылке у меня все нормально выглядит

codor · June 10, 2018

Сделал! ?

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

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

Edited June 10, 2018 by codor

AlexZaw · June 10, 2018

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

Ну да ладно, постепенно поймете в чем у вас тут ошибка.

Edited June 10, 2018 by AlexZaw

Sign In

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

Recommended Posts

codor

Link to comment

Share on other sites

AlexZaw

Link to comment

Share on other sites

codor

Link to comment

Share on other sites

AlexZaw

Link to comment

Share on other sites

codor

Link to comment

Share on other sites

AlexZaw

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information