codor Posted June 9, 2018 Report Share Posted June 9, 2018 (edited) Привет! Сайт 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">© Sphere. Сфера Ваших интересов</font> </body> </html> Edited June 10, 2018 by codor Quote Link to comment Share on other sites More sharing options...
AlexZaw Posted June 9, 2018 Report Share Posted June 9, 2018 Уберите абсолютное позиционирование у #header и все встанет как надо. Либо добавьте стили #head{ margin-top: 400px; } Quote Link to comment Share on other sites More sharing options...
codor Posted June 10, 2018 Author Report Share Posted June 10, 2018 (edited) 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 Quote Link to comment Share on other sites More sharing options...
AlexZaw Posted June 10, 2018 Report Share Posted June 10, 2018 Может я чего то не понимаю, но сейчас по вашей ссылке у меня все нормально выглядит Quote Link to comment Share on other sites More sharing options...
codor Posted June 10, 2018 Author Report Share Posted June 10, 2018 (edited) Сделал! ? Просто нужно было в css прописать #head{ margin-top: 410px; } И из <div id="head"> <div id="header"></div> </div> вынести <div id="head">сам текст</div> Edited June 10, 2018 by codor Quote Link to comment Share on other sites More sharing options...
AlexZaw Posted June 10, 2018 Report Share Posted June 10, 2018 (edited) Вообще конечно странный код, странное решение. Зачем делать абсолютное позиционирование там где это абослютно не нужно, а потом искать способы борьбы с последствиями? Ну да ладно, постепенно поймете в чем у вас тут ошибка. Edited June 10, 2018 by AlexZaw Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.