Jump to content
  • 0

Проблема с footer

Nauticus

Asked by Nauticus,

 Share

Question

Nauticus Explorer

Nauticus

Posted
Posted

Всем привет.

Была проблема: "подвал" на сайте http://www.my-abc.info/ в мозилле уезжал вверх, т.е. следовал сразу за основным текстом. Проблему решил правкой css: добавил clear:left в классе .outfooter.

http://www.my-abc.info/styles.css

На другом сайте такая же проблема - http://www.sdmsp.com/ При этом в IE6 всё отображается нормально, а вот в остальных браузерах - низ уезжает вверх... Пробовал решить добавлением clear:both, но не помогает.

http://www.sdmsp.com/styles.css

http://www.sdmsp.com/mail.html

У кого какие мысли? Я просто даже не знаю, где нужно искать проблему...

Буду благодарен за любые подсказки.

Link to comment
Share on other sites

32 answers to this question

Recommended Posts

  • 0
Searcher Explorer

Searcher

Posted
Posted

Вообще решение то элементарное, для #content надо поставить overflow:hidden;

Такие вопросы встречаются очень часто, надо это внести в раздел "Для начинающих" в тему "ЧаВО", ну и как-то еще посодействовать распространению информации по скрытым возможнгостям свойства overflow...

Link to comment
Share on other sites
  • 0
Nauticus Explorer

Nauticus

Posted
  • Author
Posted (edited)

Всем спасибо.

  Quote
Вообще решение то элементарное, для #content надо поставить overflow:hidden;

Попробовал пока вот этот вариант, т.к. он проще... Не помогло. Результат виден на сайте.

Так что буду разбираться с вариантом psywalker'а.

Edited by Nauticus
Link to comment
Share on other sites
  • 0
Nauticus Explorer

Nauticus

Posted
  • Author
Posted
  psywalker said:
Неправильный подход к делу. Вот тебе пример, сделай как тут. http://psywalker.ru/Forum/Footer_bottom/main.html

psywalker, Наверное, я из тех, кто в танке. :)

Что-то ничего не получается. Посмотрел пример, добавил в классы (outbody и outfooter) эти параметры: повозился, но всё так же и осталось - в ие6 - норм, в остальных "подвал" не на месте...

  Quote
Неправильный подход к делу

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
  Quote
в каком именно месте неправильный подход?

Да во всех местах. Начнём с того, что не установлена высота у тегов html и body, далее не установлена минимальная высота у главного контейнера, ну и т.д. Я вообще не увидел, где ты там пытался сделать, как в моём примере.

Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
Posted

Ну вообще-то для начала неправильно пытаться прибивать подвал к низу, когда страницы и так достаточно наполнены.

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

Но я так понимаю, что ТС вообще любит сложности :)

0ab53d0285a4t.jpg

Это ж надо такое придумать! :) брррр!

Link to comment
Share on other sites
  • 0
Verder Explorer

Verder

Posted
Posted (edited)
  psywalker said:
Неправильный подход к делу. Вот тебе пример, сделай как тут. http://psywalker.ru/Forum/Footer_bottom/main.html

Читаю я вас, верстальщиков, и охреневаю. Пример епти. С абсолютом епти. Мастера епти.

Нахрена вообще это абсолютное позиционирование нужно, когда все просто как мычание.

*deleted*

Смотри ниже

Работает всегда и везде. Для FF маааленькое дополнение в код. Кому надо тот поймет.

Edited by Verder
Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
Posted (edited)

Вердер, когда код приводишь в порядок, может стоит его оформить как-нибудь?

Ну чтобы читаемо было.

а то сейчас:

<div…
<div…
<div…
<div…
<div…
<div…
<div…

разобраться в этом сможет действительно лишь тот, кому очень надо. :)

Edited by swetlana
Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
Posted

Сударь, ну Вы сравнили!

файрбаг файрбагом, но охота ж и живой код посмотреть.

К тому же в файрбаге (и даже в веб-инспекторе) этот набор дивов не намного лучше выглядит

Link to comment
Share on other sites
  • 0
Verder Explorer

Verder

Posted
Posted
  swetlana said:
Сударь, ну Вы сравнили!

файрбаг файрбагом, но охота ж и живой код посмотреть.

К тому же в файрбаге (и даже в веб-инспекторе) этот набор дивов не намного лучше выглядит

В моем живом коде вообще бы никто ничего не понял, так как он идет в одну строку, без кавычек, начиная с доктайпа и заканчивая закрывающим </html>

Это я уж потом, если не забываю, его более-менее делаю читаемым.

А в данном примере что непонятно? Вроде же там все просто и разбираться не в чем.

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted
  swetlana said:
Сударь, ну Вы сравнили!

файрбаг файрбагом, но охота ж и живой код посмотреть.

К тому же в файрбаге (и даже в веб-инспекторе) этот набор дивов не намного лучше выглядит

Мне почемуто в фаербаге все видно, даже багло ие6-7 я всегда ищу фаербагом.

А вот в, вами хваленном, веб-инспекторе работать нехватает нервов, сравнительно с фаербагом - тормознутая штука.

Link to comment
Share on other sites
  • 0
Verder Explorer

Verder

Posted
Posted
  mishka2 said:
Мне почемуто в фаербаге все видно, даже багло ие6-7 я всегда ищу фаербагом.

А вот в, вами хваленном, веб-инспекторе работать нехватает нервов, сравнительно с фаербагом - тормознутая штука.

А я вообще ни в чем не проверяю :) Просто на виртуалке запускаю IE6 под ХР и все.

Link to comment
Share on other sites
  • 0
Verder Explorer

Verder

Posted
Posted
  mishka2 said:
Verder, твой пример не везде работает. Подправь немного. Так как скролл всеже есть, и место пустое под футером.

Ну я ж говорю, для FF надо подправить. Во всем остальном пашет как надо. Кто додумается, как для FF сделать? :)

Link to comment
Share on other sites
  • 0
Verder Explorer

Verder

Posted
Posted (edited)

Сорри за предыдущие посты - там просто сетка была выдернута с проектов и не проверена как следует.

Вот чистый код с прибитый нижним блоком, идентично во всех браузерах начиная с IE5, без использования абсолюта:

http://freeway-design.ru/ft/

Edited by Verder
Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
Posted
  Verder said:
А я вообще ни в чем не проверяю :) Просто на виртуалке запускаю IE6 под ХР и все.

я тоже так делаю.

А если там ошибка?

Сейчас использую IE Developer Toolbar для отладки в IE, но это устройство, мягко говоря, неудобно.

Может кто знает что получше? Хотя бы уровня файербага. (Сомневаюсь, что под винды есть по настоящему удобное решение вроде веб-инспектора. Там это идеологически не приветствуется)

Link to comment
Share on other sites
  • 0
Verder Explorer

Verder

Posted
Posted
  swetlana said:
я тоже так делаю.

А если там ошибка?

Сейчас использую IE Developer Toolbar для отладки в IE, но это устройство, мягко говоря, неудобно.

Может кто знает что получше? Хотя бы уровня файербага. (Сомневаюсь, что под винды есть по настоящему удобное решение вроде веб-инспектора. Там это идеологически не приветствуется)

Ну от ошибок никто не застрахован, просто я всегда считал сам браузер лучшим показателем правильности верстки. Отсюда следует, что самое лучшее решение - это посмотреть страницу в родном браузере чистой операционной системы.

У меня два компа - основной леопард и второй под вин7. Но мне удобна виртуалка под лео.

Да и пора уже, если честно, перестать трястись над каждым не так отбраженным пикселом в старом осле.

P.S.

Кстати, в последнем варианте с футером я специально для тебя более-менее оформил код. Тошнило, но оформил :)

Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
Posted
  Verder said:
…самое лучшее решение - это посмотреть страницу в родном браузере чистой операционной системы.…

другой бы спорил, а я даже драться не буду.

Но есть разные типы задач:

— сверстать с нуля по макету;

— устранить ошибку в чьих-то завалах кода.

Если у меня стоит задача сверстать с нуля, то я пишу по принципу: чем меньше, тем лучше. В процессе написания кода браузеры (а тем более всякие веб-инспекторы) вообще не трогаю. По завершении проверяю во всех браузерах во всех имеющихся операционных системах. И во всех всё на своих местах. Если в IE6 что-то чуть не так, но при этом не мешает восприятию информации — и хрен бы с ним. Исключение составляют случаи, когда заказчик требует идентичности в старом осле. И если доплачивает за поддержку старого IE — да хоть IE3, не вопрос.

А бывают задачи: разобрать непроходимые завалы многократно вложенных div'ов, нагромождённых неким пионером, который позавчера подслушал у взрослых дяденек, что таблицами верстать не круто. И вот тут уже нужно включить гибкость мышления на полную, а также вооружиться мощным инструментом отладки, иначе проще не выполнять поставленную задачу, а переверстать всё заново.

И если под Safari/Chrome есть нормальный инструмент разработчика, в шестом хроме он даже почти не глючит, под оперу сносный тоже присутствует, даже под ФФ есть нечто относительно юзабельное с характерным словом BUG в названии, то вот с IE беда. Даже не беда: катастрофа.

Link to comment
Share on other sites
  • 0
Verder Explorer

Verder

Posted
Posted

Не, это то я понимаю, ведь ты практически исключительно версткой занимаешься, а верстальщикам частенько приходится за кем-то что-то переписывать.

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

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

Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
Posted

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

Но проекта с третьего-четвёртого уже то же самое: знаешь, что надо написать, чтобы он тоже отобразил как надо, и ожидания оправдываются.

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted
  Quote
Может кто знает что получше? Хотя бы уровня файербага. (Сомневаюсь, что под винды есть по настоящему удобное решение вроде веб-инспектора. Там это идеологически не приветствуется)

Жаль конечно незнаю какой там вебинспектор в сафари5. Но в хроме он реально уступает фаербагу.

  Quote
Хотя бы уровня файербага

Ну ни фига себе "хотя бы"...

Вставь в код этот скрипт, мож больше чем IE Developer Toolbar понравится.

<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

Хотя я отлавливаю все баги только фаербагом. Просто видя баг, уже предполагаю чем это вызвано, смотрю фаербагом верстку и отлавливаю причину.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept