|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
09.06.2018, 15:13 | #1 |
Регистрация: 09.06.2018
Сообщений: 6
|
Как можно вынести текст в отдельный блок с отступом, чтобы шапка не наезжала?
Привет!
Сайт www.presents.octawa.ru. Cейчас шапка наезжает на текст. Как можно вынести текст в отдельный блок с отступом? Чтобы шапка не наезжала. Только осваиваю html и css. Пожалуйста, подробнее. Файлы index.html, style.css ниже. style.css Код:
Код 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> Код программы нужно выделять (форматировать) тегами [CODE] или [HTML] (читать FAQ) Модератор Последний раз редактировалось codor01; 10.06.2018 в 08:52. |
09.06.2018, 17:58 | #2 |
Старожил
Регистрация: 12.11.2010
Сообщений: 8,568
|
Немного посмотрел, не стал глубоко анализировать.
А зачем вы шапке поставили абсолютное позиционирование? В этом случае все элементы будут вести себя так, будто шапки нет. Уберите у #header position:absolute, и за одно top:0px; left:0px, такие такие свойство при статическом позиционировании не имеют смысла. Также уберите width: 100% - это у вас div, он и так по умолчанию 100% |
10.06.2018, 09:22 | #3 |
Регистрация: 09.06.2018
Сообщений: 6
|
Удалил 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.06.2018, 10:55 | #4 |
Регистрация: 09.06.2018
Сообщений: 6
|
Сделал! =)
Просто нужно было в css прописать #head{ * margin-top: 410px; } И из <div id="head"> <div id="header"></div> </div> вынести <div id="head">сам текст</div> |
12.06.2018, 15:10 | #5 |
Пользователь
Регистрация: 15.05.2018
Сообщений: 75
|
Простите, а для чего создавать в диве еще один пустой див?
Это устарело и боле не используется, используйте css. Если хотите поменять стиль фрагмента текста, возьмите его в <span> </span>, далее в css Код:
Не задавай вопрос, если не знаешь что делать с ответом...
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Вынести GUI в отдельный поток | Silly Student | C++ Builder | 1 | 22.11.2011 15:15 |
Как вынести печать массива в отдельный метод | Julila | Помощь студентам | 3 | 29.09.2011 00:36 |
Как вынести объявление переменных в отдельный сегмент кода | boris-blade | Microsoft Office Word | 1 | 16.01.2010 19:31 |
Как вынести пинг через IdIcmpClient в отдельный поток ? | ewgenw | Помощь студентам | 1 | 11.05.2009 16:42 |
Работа с множествами. Вынести процедуры о отдельный Unit. [Delphi] | sergey31 | Помощь студентам | 4 | 13.12.2008 12:39 |