Форум PHP программистов > Зафиксировать шапку, у которой изменяется ширина

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Зафиксировать шапку, у которой изменяется ширина

zvezda_t

7.08.2015 - 17:03

Всем привет.
Подскажите, пожалуйста, почему нельзя задать фиксированное положение шапки, если не задать ей сразу ширину? Потом при увеличении ширины внутренних контейнеров, шапка всё равно не растет.
Как зафиксировать правильно?

.header {
   border-bottom: 1px solid gray;
   left: 0px;
   right: -15px;
   position: fixed;
}

_____________

Что ты сделал сегодня - для завтра?
"Приидите ко Мне вси труждающиеся и обремененнии и Аз упокою вы, возмите иго Мое на себе и научитеся от Мене яко кроток есмь и смирен сердцем и обрящете покой душам вашим, иго бо Мое благо и бремя Мое легко есть."(Мф. 11:28-30)

Razzwan

8.08.2015 - 02:33

Цитата

Подскажите, пожалуйста, почему нельзя задать фиксированное положение шапки, если не задать ей сразу ширину?

так уж сложилось, смирись.

Цитата

Как зафиксировать правильно?

использовать position absolute.

_____________
Youtube канал WebDeveloper->Run()
Сайт для души
Gitter

zvezda_t

8.08.2015 - 15:21

Цитата

использовать position absolute.

тоже не помогает. Тем более мне нужно именно зафиксировать рамку, иначе, при перемотке страницы, шапка не фиксируется, а уходит за пределы экрана.

Вот смотрите, как только, задаю position для #wrapper, тут же теряю ширину (серая рамка контейнера сужается), а мне необходимо сохранить ширину. Как быть?
https://jsfiddle.net/ug44z9z4/

_____________

Что ты сделал сегодня - для завтра?
"Приидите ко Мне вси труждающиеся и обремененнии и Аз упокою вы, возмите иго Мое на себе и научитеся от Мене яко кроток есмь и смирен сердцем и обрящете покой душам вашим, иго бо Мое благо и бремя Мое легко есть."(Мф. 11:28-30)

SerginhoLD

8.08.2015 - 15:29

скажи что надо в итоге, а то я не слова не понял за два сообщения

_____________
"internet explorer всех правильней отображает страницы" ©

zvezda_t

8.08.2015 - 18:24

зафиксировать шапку, чтоб она не уходила. (в примере #wrapper - это шапка )
Как здесь - http://engalysh.ru/ - страница перематывается, а шапка на месте.

_____________

Что ты сделал сегодня - для завтра?
"Приидите ко Мне вси труждающиеся и обремененнии и Аз упокою вы, возмите иго Мое на себе и научитеся от Мене яко кроток есмь и смирен сердцем и обрящете покой душам вашим, иго бо Мое благо и бремя Мое легко есть."(Мф. 11:28-30)

inpost

8.08.2015 - 21:30

position:fixed; Ты бы села на пару деньков и почитала существующие теги и существующие свойства

_____________
Обучаю веб-программированию качественно и не дорого: http://school-php.com
Фрилансер, принимаю заказы: PHP, JS, AS (видео-чаты). Писать в ЛС (Личные сообщения на phpforum).

SerginhoLD

9.08.2015 - 00:44

Цитата (zvezda_t @ 8.08.2015 - 14:24)

зафиксировать шапку, чтоб она не уходила. (в примере #wrapper - это шапка )
Как здесь - http://engalysh.ru/ - страница перематывается, а шапка на месте.

и в чем проблема?

<style>
.header {
position: fixed;
left: 0;
top: 0;
width: 100%;
background: red;
color: #fff;
}

.container {
width: 800px;
margin: 0 auto;
}
</style>

<body>
  <div class="header">
    <div class="container">header content</div>
  </div>
  <div class="container">site content</div>
</body>

Быстрый ответ:

Здесь расположена полная версия этой страницы.