Форум русской поддержки Joomla!® CMS
08.12.2016, 11:58:25 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Зафиксировать футер

 (Прочитано 4528 раз)
0 Пользователей и 1 Гость смотрят эту тему.
slepoy
Завсегдатай
*****

Репутация: +21/-0
Offline Offline

Сообщений: 703


Тотальная шизофазия


« : 24.07.2011, 02:53:40 »

Здравствуйте. На сайте http://69game.ru/ мне не удалось "зафиксировать" содержимое футера (счетчики). Прошу сравнить главную страницу с внутренней, где помимо счетчиков есть немного текста http://69game.ru/dress-up.html и дпть совет.
Спасибо.
Записан
isis
Захожу иногда
**

Репутация: +2/-0
Offline Offline

Сообщений: 23


« Ответ #1 : 24.07.2011, 04:12:51 »

Ширина и высота блока #cp ?
Записан
slepoy
Завсегдатай
*****

Репутация: +21/-0
Offline Offline

Сообщений: 703


Тотальная шизофазия


« Ответ #2 : 24.07.2011, 04:19:58 »

Код
#cp{
float:right;
color:#fff;
top: 70px;
padding-right:15%;
position: relative;}
Ширина подойдет auto (до 980px). Высота - на глаз равная нижней оранжевой полосе. т.е. все счетчики и копирайт должны держаться на этой полосе в футере. мне пока не удалось.
Записан
al-teen
Support Team
*****

Репутация: +221/-10
Offline Offline

Пол: Мужской
Сообщений: 2460



« Ответ #3 : 24.07.2011, 04:28:37 »

Код:
это .css
 * {
 margin: 0;
 padding: 0;
 border: 0;
 }

 HTML, body {
 width: 100%;
 height: 100%;
 }

 * HTML #container {
 height: 100%;
 }

 body {
 background: #fff;
 color: #333;
 }

 #container {
 position: relative;
 width: 960px;
 margin: 0 auto;
 min-height: 100%;
 }

 .clearfloat {
 clear: both;
 }

 .empty {
 height: 50px;
 }

 #footer {
 position: relative;
 background: #333;
 width: 960px;
 height: 50px;
 color: #ccc;
 font-size: .9em;
 margin: -50px auto 0;
 }

 это .html
 <html>
 <head></head>
 <body>
 <div id="container">
 <div id="header"></div>
 <div id="leftside"></div>
 <div id="rightside"></div>
 <div class="clearfloat"></div>
 <div class="empty"></div>
 </div>
 <div id="footer"></div>
 </body>
 </html>
Записан
slepoy
Завсегдатай
*****

Репутация: +21/-0
Offline Offline

Сообщений: 703


Тотальная шизофазия


« Ответ #4 : 24.07.2011, 04:38:41 »

al-teen, это никак не влияет на футер, который "плавает" в зависимости от объема текстового наполнения в подвале.
Записан
al-teen
Support Team
*****

Репутация: +221/-10
Offline Offline

Пол: Мужской
Сообщений: 2460



« Ответ #5 : 24.07.2011, 04:44:13 »

Принцип тот же самый. Или предлагаете за вас его вписать как надо и выдать готовое решение?
Записан
isis
Захожу иногда
**

Репутация: +2/-0
Offline Offline

Сообщений: 23


« Ответ #6 : 24.07.2011, 04:49:53 »

Я что-то никак не могу понять: вам нужно что-бы и текст и счетчик находились в оранжевой полосе, но при этом ширина этой полосы (79пх) должна подстраиваться под неизвестное количество счетчиков и текста?
Сам счетчик я зафиксировал, но это бессмысленно, если в том же контейнере будет и текст. 
Записан
slepoy
Завсегдатай
*****

Репутация: +21/-0
Offline Offline

Сообщений: 703


Тотальная шизофазия


« Ответ #7 : 24.07.2011, 04:58:20 »

три счетчика одной строкой и текст (белого цвета) "© 2010-2011 флеш игры на 69Game.Ru...." второй. - только они поверх оранжево полосы. Сам я уже давно окончательно запутался :[
Записан
isis
Захожу иногда
**

Репутация: +2/-0
Offline Offline

Сообщений: 23


« Ответ #8 : 24.07.2011, 05:48:30 »

разделяете текст и счетчики во вспомогательные блоки с классами .copyright и .counters соответственно. Отодвигаете основной блок на ширину мальчика и полностью вниз (для жесткой фиксации), потом делаете отступ вверх на ширину полоски. По аналогии подконтейнер со счетчиками. Вот готовый код:
Код:
#cp { position:relative; margin-left:134px; top:100%; margin-top:-89px; padding:0px; float:none; }
#cp .counters { position:relative; left:50%; margin-left:-107px; }
#cp .copyright { text-align:center; left:0px; }
Проверенно в опере, старом FF2, и IE7. Можно смело копипастить.
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #9 : 02.08.2011, 01:30:00 »

Задача тривиальная. al-teen в принципе правильно всё написал.
В двух словах:
Разметка:
Код:
<html>
  <body>
    <div id="wrap">
      <div id="wrap_fix"></div>
    </div>
    <div id="footer">футер</div>
  </body>
</html>

Стили:
Код:
html, body {height:100%; width:100%;}
#wrap {min-height:100%; width:100%; margin-bottom:-100500px;}
#wrap_fix, #footer {height:100500px;}

Как это работает:
Вся фишка в том, что если указать явно высоту body и HTML, то мы так же можем прописать относительную высоту непосредственного потомка. Но только непосредственного, т.е. первого уровня.
Далее мы просто делим весь сайт горизонтально на два блока. Враперу прописываем минимальную высоту равную окну браузера и отрицательный отступ снизу равный высоте футера. Теперь футер всегда "прибит". Врап_фикс нужен для того, чтобы контент под футер не наползал. Можно обойтись и без лишнего элемента, с помощью позиционирования, например. Но на практике замечены периодические глюки в Опере. Ну и не забываем, что для шестого осла надо или уменьшить в два раза значение margin-bottom или прописать блоку display:inline.
Записан
fixbob
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 13


« Ответ #10 : 12.04.2015, 17:03:58 »

Задача тривиальная. al-teen в принципе правильно всё написал.
В двух словах:
Разметка:
Код:
<html>
  <body>
    <div id="wrap">
      <div id="wrap_fix"></div>
    </div>
    <div id="footer">футер</div>
  </body>
</html>

Стили:
Код:
html, body {height:100%; width:100%;}
#wrap {min-height:100%; width:100%; margin-bottom:-100500px;}
#wrap_fix, #footer {height:100500px;}

Как это работает:
Вся фишка в том, что если указать явно высоту body и HTML, то мы так же можем прописать относительную высоту непосредственного потомка. Но только непосредственного, т.е. первого уровня.
Далее мы просто делим весь сайт горизонтально на два блока. wrapperу прописываем минимальную высоту равную окну браузера и отрицательный отступ снизу равный высоте футера. Теперь футер всегда "прибит". Врап_фикс нужен для того, чтобы контент под футер не наползал. Можно обойтись и без лишнего элемента, с помощью позиционирования, например. Но на практике замечены периодические глюки в Opera. Ну и не забываем, что для шестого осла надо или уменьшить в два раза значение margin-bottom или прописать блоку display:inline.

очень сомнительный вариант - думаю что еще и не рабочий

Хотя пардон автору - пубдикация 2011 года сейчас несколько по другому все работает
« Последнее редактирование: 12.04.2015, 17:08:45 от fixbob » Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #11 : 12.04.2015, 23:43:45 »

очень сомнительный вариант - думаю что еще и не рабочий
Хотя пардон автору - пубдикация 2011 года сейчас несколько по другому все работает
При допущении, что футер фиксированной высоты, вариант рабочий. Был рабочий, сейчас рабочий и будет работать всегда. Я подробно описал механизм способа. Чем аргументированы сомнения?
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet