Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Ответ
 
Опции темы
Старый 09.06.2018, 16:13   #1
codor01
 
Регистрация: 09.06.2018
Сообщений: 6
Репутация: 10
По умолчанию Как можно вынести текст в отдельный блок с отступом, чтобы шапка не наезжала?

Привет!

Сайт 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
Код 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>
_____
Код программы нужно выделять (форматировать) тегами [CODE] или [HTML] (читать FAQ)
Модератор

Последний раз редактировалось codor01; 10.06.2018 в 09:52.
codor01 вне форума   Ответить с цитированием
Старый 09.06.2018, 18:58   #2
Вадим Мошев
гигаМодератор :)
Заслуженный модератор
 
Аватар для Вадим Мошев
 
Регистрация: 12.11.2010
Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес:
Сообщений: 7,797
Репутация: 3781
По умолчанию

Немного посмотрел, не стал глубоко анализировать.

А зачем вы шапке поставили абсолютное позиционирование? В этом случае все элементы будут вести себя так, будто шапки нет.
Уберите у #header position:absolute, и за одно top:0px; left:0px, такие такие свойство при статическом позиционировании не имеют смысла.
Также уберите width: 100% - это у вас div, он и так по умолчанию 100%
Вадим Мошев на форуме   Ответить с цитированием
Старый 10.06.2018, 10:22   #3
codor01
 
Регистрация: 09.06.2018
Сообщений: 6
Репутация: 10
По умолчанию

Удалил 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%; }
codor01 вне форума   Ответить с цитированием
Старый 10.06.2018, 11:55   #4
codor01
 
Регистрация: 09.06.2018
Сообщений: 6
Репутация: 10
По умолчанию

Сделал! =)

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

И из <div id="head"> <div id="header"></div> </div>
вынести <div id="head">сам текст</div>
codor01 вне форума   Ответить с цитированием
Старый 12.06.2018, 16:10   #5
Javany
Форумчанин
 
Регистрация: 15.05.2018
Сообщений: 75
Репутация: 129
По умолчанию

Цитата:
Сообщение от codor01 Посмотреть сообщение
<div id="head"> <div id="header"></div> </div>
Простите, а для чего создавать в диве еще один пустой див?

Цитата:
Сообщение от codor01 Посмотреть сообщение
<font color="blue">
Это устарело и боле не используется, используйте css. Если хотите поменять стиль фрагмента текста, возьмите его в <span> </span>, далее в css
Код:

span{
color:blue;
}

Цитата:
Сообщение от codor01 Посмотреть сообщение
<img src="заметки друга.jpg" width="178" height="178"
Размеры картинки тоже стилями делайте. В html должна быть только разметка, а все стили в css.
__________________
Не задавай вопрос, если не знаешь что делать с ответом...
Javany вне форума   Ответить с цитированием
Старый 12.06.2018, 20:37   #6
Svetolux
Новичок
 
Регистрация: 12.06.2018
Сообщений: 2
Репутация: 10
По умолчанию

Зачем создавать в диве еще один пустой див?
Svetolux вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вынести 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 20:31
Как вынести пинг через IdIcmpClient в отдельный поток ? ewgenw Помощь студентам 1 11.05.2009 16:42
Работа с множествами. Вынести процедуры о отдельный Unit. [Delphi] sergey31 Помощь студентам 4 13.12.2008 13:39


22:47.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru