Не получается сделать резиновую шапку на сайте

@codor · Регистрация: 07.06.2018

Студворк — интернет-сервис помощи студентам

Привет!

Загрузил файлы. Но шапка на страничке не отображается. Картинка в общей папке с index.html и header.css

в файле header.css такой код:

CSS
1
2
3
4
5
6
7
8
9
@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:

HTML5
1
<div id="head"> <div id="header"></div> </div>

Я ведь его вставляю в <body> ... </body> вместе с другой инфо? Или в отдельный <body> ... </body>. Или это не влияет?

Шапка приложена 550 x 343 jpg

Что я сделал не так? Почему не видно шапки?

@Вовчек · 07.06.2018, 09:27

нужен весь index.html, а то не видно, что подключено

@codor · 07.06.2018, 10:39 **[ТС]**

Сообщение от Вовчек

нужен весь index.html, а то не видно, что подключено

Вот код index.html:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Подарок от Sphere. Сфера Ваших интересов</title>
</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>

@AlexZaw · 07.06.2018, 10:50

А где у вас подключение файла стилей?

@codor · 08.06.2018, 05:38 **[ТС]**

Сообщение от Вовчек

нужен весь index.html, а то не видно, что подключено

Добавил в index.html

HTML5
1
<link rel="stylesheet" type="text/css" href="header.css">

Шапка появилась, но она закрывает текст сверху. http://www.presents.octawa.ru/

при уменьшении окна до минимуму часть текста появляется. как сделать так, чтобы весь текст сверху был виден при любом размере окна?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Подарок от Sphere. Сфера Ваших интересов</title>
<link rel="stylesheet" type="text/css" href="header.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>

Комментарий модератора

Используйте соответствующие теги в редакторе для форматирования кода [HTML], [CSS] и т.д.!
Памятка «Как работать в редакторе сообщений»

@alexey_wes · 08.06.2018, 07:46

а текст в отдельный блок вынести с отступом?

@codor · 10.06.2018, 11:00 **[ТС]**

Ок, попробую.

А отдельный css блок для текста - это не скажется плохо на его индексации поисковыми роботами? Вроде я что-то такое слышал...

Добавил css для текста. Но сейчас шапка закрывает текст, и она спустилась вниз.

А как можно вынести в отдельный блок с отступом?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Подарок от Sphere. Сфера Ваших интересов</title>
<link rel="stylesheet" type="text/css" href="style.css">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style type="text/css">
   DIV {
    width: 300px; /* Ширина слоя */
    margin: 7px; /* Значение отступов */
    margin-top: 300px;
    padding: 10px; /* Поля вокруг текста */
    border: 0px solid black; /* Параметры границы */
    background: #fc0; /* Цвет фона */
   }
  </style>
</head>
<body>
<div id="head"> <div id="header"></div> </div>
<div>
<p>
<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>
</p>
</div>
</body>
</html>

Пожалуйста, подскажите

Добавлено через 20 часов 55 минут
Сделал!

Просто нужно было в css прописать

CSS
1
2
3
#head{
  margin-top: 410px;
}

И из

HTML5
1
<div id="head"> <div id="header"></div> </div>

вынести

HTML5
1
<div id="head"></div>

Добавлено через 6 минут

Сообщение от tackter

вынести

HTML5
1
<div id="head"></div>

точнее

HTML5
1
<div id="head">сам текст</div>

@sergeysrnd · 13.06.2018, 14:18

Влезу со своей колокольни - при адаптации к мобильным, этот отступ

Сообщение от codor

CSS
#head{
margin-top: 410px;
}

сыграет злую шутку.. Нужно придумать более рациональное решение. Думаю, что шапке надо absolute присвоить, а далее идущим элементам - relative. Завернуть бы контент в отдельный блок, до самого подвала

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@Вовчек 33 / 33 / 28 Регистрация: 04.04.2011 Сообщений: 333
	07.06.2018, 09:27
	нужен весь index.html, а то не видно, что подключено 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	07.06.2018, 10:50
	А где у вас подключение файла стилей? 0

@alexey_wes 0 / 0 / 1 Регистрация: 03.06.2018 Сообщений: 10
	08.06.2018, 07:46
	а текст в отдельный блок вынести с отступом? 0