Фиксированная (плавающая) шапка сайта

@snake_jan · Регистрация: 27.01.2015

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

Здравствуйте уважаемые форумчане! Я тут у вас совсем не давно, прошу сильно не бить если пишу пост не туда

Вопрос следующий:
Есть определенная самописная CMS. "Шапка" сайта прописана отдельно в файле top_form.php.
В файле index.php шапка прописана как :

PHP/HTML
1
2
3
4
5
6
7
<BODY 
style="MARGIN: 0px auto; POSITION: inherit; width: 1000px">
<?
include_once($base_path."blok/top_form.php"); 
?>
 
<table width="100%" class="table">

Помогите пожалуйста, как сделать шапку сайта фиксированной на своем месте при прокрутке страницы. Пытался реализовать с помощью css и блока тега div, но все безрезультатно. Буду очень признателен за помощь.

@Jewbacabra · 27.01.2015, 09:54

position: fixed;
http://htmlbook.ru/css/position

@snake_jan · 27.01.2015, 10:38 **[ТС]**

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

В index.php файл подргужается строчкой include_once($base_path."blok/top_form.php");
Если прописать fixed в index.php залипает вся страница.

@Jodah · 27.01.2015, 11:07

Этот атрибут нужно добавить параметру style вашей шапки. Вы не привели код самой шапки (содержимое файла top_form.php), поэтому показать правильный код в вашем случае нельзя.

@snake_jan · 27.01.2015, 11:14 **[ТС]**

Прилагаю файл top_form.php для более детального ответа

PHP/HTML
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<table width="100%">
    <tr height="64">
        <td width="250">
        <a href="<?=$bp?>"><img border=0 src="<?=$bp.'icon/8.gif'?>" /></a>
        <?
        
        if(!$_SESSION['ID_Glob'] && $rru['t_o'])
            {
            echo "<HTML><HEAD><meta http-equiv='Refresh' charset='utf-8' content='0; URL=".$bp."0000.php'></HEAD></HTML>";
            exit();
            }
        ?>
        </td>
        <td valign="middle">
            <table cellpadding="5" cellspacing="5" >
                <tr height="32">
                    <td colspan="6" >
                    <?
                    if($zag_glav)
                    echo '<h1 class="board" >'.$zag_glav.'</h1>';
                    elseif(!$no_title)
                    echo '<h1 class="board" >'.$title.'</h1>';
                    ?>
                    </td>
                </tr>
                 <tr height="32">
                    <?
                    
                    
                    echo '<td><a href="'.$bp.'blok/add.php"><p class="add_add">Подать<br> Объявление</p></a></td>';
 
                    echo '<td><a href="'.$bp.'bloknot/"><p class="addd">Избранное</p></a> <font id="blok_col" color=red>';
                    if($_SESSION['cart']) echo ' ('.count($_SESSION['cart']).')';
                    echo '</font></td>';
                    
                    ?>
                    
                    <td><a href="<?=$bp?>magazin/"><p class="addd">Магазины</p></a></td>
                                        <td><a href="/pages/news.php"><p class="addd">Новости<p></a></td>
                    <td><a href="<?=$bp?>pages/help.php"><p class="addd">FAQ</p></a></td>
                    <td>
                    <?
                    if($_SESSION['ID_P'] && !$v_cabinete)
                        {
                        ?>
                        <a href="<?=$bp?>user/edit_akk.php"><p class="cabinet">Личный кабинет</p></a>
                        <?
                        }
                    ?>
                    </td>
                    
                </tr>
            </table>
        </td>
        <td>
        
        <?
        if(!$no_form)
            {
            if(!$_SESSION['ID_P'])
                {
                ?>
                
<a  href="<?=$bp?>user/logpass.php?bp=<?=$bp?>" id="fancy_vhod"><p class="adddd"> Вход </p></a>
<a  href="<?=$bp?>user/registr.php" id="fancy_registr"><p class="adddd">Регистрация</p></a>
                
                <a  href="<?=$bp?>user/logpass_zab.php" id="fancy_zabili"><em><p class="adddd">Забыли пароль?</p></em></a>
</p>
                <?
                }
 
            if($_SESSION['ID_Glob'] && !$v_cabinete)
                {
                ?>
                <a href="<?=$bp?>admin/b_user.php"></a>
                <?
                }
            }
        ?>
 
        </td>
    </tr>
    <tr height="0">
        <td colspan="3" background="<?=$bp.'icon/line.jpg'?>"></td>
    </tr>
</table>

@Glueon · 27.01.2015, 11:20

Имееем три файла:
index.php
blok/top_form.php
style.css

Как вариант:
index.php

HTML5
1
2
3
4
5
6
7
8
<body>
 <div id="header">
    <?PHP include_once('$base_path.blok/top_form.php');?>
    </div>
 <div id="wrap">
    добро пожаловать
 </div>
</body>

style.css

CSS
1
2
3
4
5
6
7
body
{
margin: 0px auto; 
POSITION: inherit; 
width: 1000px;
} 
#header{position:fixed;top:0px;}

В HTML5 еще проще:

HTML5
1
2
3
<header>
<?PHP include_once('$base_path.blok/top_form.php');?>
</header>

Смысл, думаю, понятен.

Демо: http://jsfiddle.net/Lzunttw9/ (дикий у вас какой-то стиль для body)

P.S. Я бы переверстал на вашем месте все ваши таблицы в divы.

@snake_jan · 27.01.2015, 11:31 **[ТС]**

Все делаю как вы сказали, но ни один из способ не дает результата. Вылазят ошибки, либо шапка не позиционируется.

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

Кликните здесь для просмотра всего текста

Warning: include_once($base_path.blok/top_form.php) [function.include-once]: failed to open stream: No such file or directory in E:\OpenServer\domains\localhost\blok\top _form.php on line 3

Warning: include_once() [function.include]: Failed opening '$base_path.blok/top_form.php' for inclusion (include_path='.;e:/openserver/modules/php/PHP-5.2;e:/openserver/modules/php/PHP-5.2/PEAR/pear') in E:\OpenServer\domains\localhost\blok\top _form.php on line 3

@Glueon · 27.01.2015, 11:46

Если шапка не позиционируется, то ответ здесь один - не подключен стиль в хеде, потому что выше я дал ссылку на jsfiddle, там все работает. Попробуйте:

HTML5
1
2
3
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

Это если стиль лежит в той же папке, где ваш индекс, чтобы не мудрить с путями (о них ниже).

Причина ошибки, которую вы привели, в пути к файлу top_form.php, переменная $basepath вообще не воспринимается интерпретатором

Я копировал просто ваш код из первого поста. Как вариант, укажите абсолютный путь типа:

HTML5
1
<?PHP include_once('E:\OpenServer\domains\localhost\blok\top_form.php');?>

Как загрузите на хост, измените на относительный.

@snake_jan · 27.01.2015, 11:54 **[ТС]**

Я еще раз извиняюсь, но что значит изменить на относительный ?

@Glueon · 27.01.2015, 12:00

Почитайте:
1. http://phpfaq.ru/paths
2. http://open-server.ru/docs/#rabota-s-path

@snake_jan · 27.01.2015, 12:02 **[ТС]**

Получилось! большое спасибо!
Еще вопрос, как теперь сместить основное содержимое страницы ниже? Плавающая шапка теперь поверх сайта.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Jewbacabra 4925 / 3920 / 1620 Регистрация: 24.04.2014 Сообщений: 11,441
	27.01.2015, 09:54
	position: fixed; http://htmlbook.ru/css/position 0

@snake_jan 0 / 0 / 0 Регистрация: 27.01.2015 Сообщений: 51
	27.01.2015, 10:38 [ТС]
	Прошу прощения, но куда ставить этот тег? Можно получить более детальный ответ. Дело в том, что я не знаю как это реализовать, попытки не увенчались успехом. В index.php файл подргужается строчкой include_once($base_path."blok/top_form.php"); Если прописать fixed в index.php залипает вся страница. 0

@Jodah 3899 / 3237 / 1353 Регистрация: 01.08.2012 Сообщений: 10,909
	27.01.2015, 11:07
	Этот атрибут нужно добавить параметру style вашей шапки. Вы не привели код самой шапки (содержимое файла top_form.php), поэтому показать правильный код в вашем случае нельзя. 0

@snake_jan 0 / 0 / 0 Регистрация: 27.01.2015 Сообщений: 51
	27.01.2015, 11:31 [ТС]
	Все делаю как вы сказали, но ни один из способ не дает результата. Вылазят ошибки, либо шапка не позиционируется. Добавлено через 3 минуты Кликните здесь для просмотра всего текста Warning: include_once($base_path.blok/top_form.php) [function.include-once]: failed to open stream: No such file or directory in E:\OpenServer\domains\localhost\blok\top _form.php on line 3 Warning: include_once() [function.include]: Failed opening '$base_path.blok/top_form.php' for inclusion (include_path='.;e:/openserver/modules/php/PHP-5.2;e:/openserver/modules/php/PHP-5.2/PEAR/pear') in E:\OpenServer\domains\localhost\blok\top _form.php on line 3 0

@snake_jan 0 / 0 / 0 Регистрация: 27.01.2015 Сообщений: 51
	27.01.2015, 11:54 [ТС]
	Я еще раз извиняюсь, но что значит изменить на относительный ? 0

@Glueon 11 / 11 / 7 Регистрация: 25.11.2014 Сообщений: 81
	27.01.2015, 12:00
	Почитайте: 1. http://phpfaq.ru/paths 2. http://open-server.ru/docs/#rabota-s-path 0

@snake_jan 0 / 0 / 0 Регистрация: 27.01.2015 Сообщений: 51
	27.01.2015, 12:02 [ТС]
	Получилось! большое спасибо! Еще вопрос, как теперь сместить основное содержимое страницы ниже? Плавающая шапка теперь поверх сайта. 0