Проблемы с footer и menu

[Вадим]

В общем несколько траблов.

1. Сделали footer. Он не должен быть всегда к низу. Футер зависит от кол-ва текста. Но вот почему-то получается так, что внизу футера появляется линия странная и мешает нормальной заливки

2. Меню. Меню должно быть резиновым. 50% от ширины экрана. Как это сделать?

3. Footer должен идти повторяющейся волной.

В общем сам сайт: http://psywalker.ru/SAITS/Lotos/main-page.html

И макет сайта: www.w3u.ru/000.jpg

p.s. линия под футером появляется только на больших экранах

Edited September 1, 2009 by Вадим

[psywalker]

mishka2

И еще - мне довольно часто хотелось бы увеличить только шрифт. А если блоки тоже в емах будут то страничка вся растянется и вылезет за пределы окна браузера... я это нахожу недостатком. А вот если увеличится только шрифт, его станет приятно читать и сайт нестанет огромным - это здорово. Ведь меня не бекграунды и картинки интересуют, а контент.

Да, а вот я тебе так скажу, ты увеличиваешь шрифт и при этом так же рушатся блоки, потому что они заданы жёстко в РХ. А при em как раз задавание и блокам и всему живому такого не случится, а наоборот всё будет масштабироваться пропорционально и грамотно, и текст и блоки вместе с ним. Конечно так будет не везде, иногда Дизайн состоит из кучи всяких градиентов, закруглённых уголков и прочего материала, который мешает качественному масштабированию, но поверь мне, пиксели в этой ситуации тоже не помогут, опятьже если задавать em только для текста. Но опятьже это не всегда, повторяю, только когда действительно трудный Диз. А вообще если вёрстка резиновая, то em как никогда лучше подходит для этого дела.

Так вот где этот загадочный сайт "раира" берет свои корни

Почти

VJiK

http://psywalker.ru/SAITS/Izoprint2/main-page.html - а вот здесь из-за проблем с бэкграундом - вся фишка сводится на нет... Сайт становится оч. неудобоваримым

Вот я про это и говорю

Edited September 1, 2009 by psywalker

[Justnewone]

Да, и еще, статичный сайт я делал 100 лет назад, мода на них чтоль прошла )))

[mishka]

да что же вы никак не поймете что задание ширины блоков в ем имеет смысл только для еи. Если размеры картинок тоже задавать в ем то и они будут маштабироватся в ие при изменении размера шрифта. Чтобы и бекграунд масштабировался его делают картинками (есть такие заказчики извращенцы)

ты увеличиваешь шрифт и при этом так же рушатся блоки, потому что они заданы жёстко в РХ

непонял, чего им рушится то? они просто по высоте растягиваются

Чтото мы на разных языках говорим... я вас не понимать

[Justnewone]

да что же вы никак не поймете что задание ширины блоков в ем имеет смысл только для еи. Если размеры картинок тоже задавать в ем то и они будут маштабироватся в ие при изменении размера шрифта. Чтобы и бекграунд масштабировался его делают картинками (есть такие заказчики извращенцы)

Мне кажется вы нас недооцениваете. Если везде хорошо масштабируется (во всех браузерах, которые масштабируют "биноклем", типа как в опере, нет разницы, в em или в px. Это в честности опера и фф точно.) и + к этому хорошо мастабируется в IE (кстати, в FF тоже можно сделать "масштабировать только текст", не забывайте об этом) это же круче чем то же самое что в опере и беспардонно в IE. Разве нет? ))) Sаfаri 3 только текст масштабирует. Кроме того, открываются богатые возможности по ПРЕадаптации для девайсов, у которых em не равен 16px. Можно и под смарт заточить ВООБЩЕ не применяя спец приемов, только версткой на em.

Edited September 1, 2009 by Justnewone

[mishka]

http://psywalker.ru/SAITS/Izoprint2/main-page.html

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

открываются богатые возможности по ПРЕадаптации для девайсов, у которых em не равен 16px. Можно и под смарт заточить ВООБЩЕ не применяя спец приемов, только версткой на em.

Вот это рациональное зерно в этом деле. Ксожалению единственное, которое я вижу.

во всех браузерах, которые масштабируют "биноклем", типа как в опере, нет разницы, в em или в px. Это в честности опера и фф точно

Вот и я про тоже.. это актуально только для ие6. Тоесть плюс незначителен. А гемороя много. (Смарты пока упустим)

[psywalker]

Мне кажется вы нас недооцениваете. Если везде хорошо масштабируется (во всех браузерах, которые масштабируют "биноклем", типа как в опере, нет разницы, в em или в px. Это в честности опера и фф точно.) и + к этому хорошо мастабируется в IE (кстати, в FF тоже можно сделать "масштабировать только текст", не забывайте об этом) это же круче чем то же самое что в опере и беспардонно в IE. Разве нет? ))) Sаfаri 3 только текст масштабирует. Кроме того, открываются богатые возможности по ПРЕадаптации для девайсов, у которых em не равен 16px. Можно и под смарт заточить ВООБЩЕ не применяя спец приемов, только версткой на em.

Вот именно, и ещё для тех, кто не в курсе, EM - эта единственная единица измерения, которая понимает Тысячные доли, взгляните у меня в стилях куча таких записей типа: padding: .564em , margin-top: .124em и т. д. И это между прочим прекрасно понимают все браузеры, включая кстати и ИЕ6. А это уже означает, что только эти единицы будут масштабироваться самым точным образом во всех браузерах

[mishka]

Мне кажется вы нас недооцениваете.

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

psywalker

Прокоментируйте пожалуйста мой верхний пост.

и я еще повторюсь:

ты увеличиваешь шрифт и при этом так же рушатся блоки, потому что они заданы жёстко в РХ

непонял, чего им рушится то? они просто по высоте растягиваются

На страничках сверстаных вами, при просмотре на мониторе 17"(1024 по ширине) появляется горизонтальный скролл, который портит картину

[psywalker]

psywalker

Прокоментируйте пожалуйста мой верхний пост.

и я еще повторюсь:

Цитата

ты увеличиваешь шрифт и при этом так же рушатся блоки, потому что они заданы жёстко в РХ

непонял, чего им рушится то? они просто по высоте растягиваются

Чё комментировать, всё уже сказал, не раз такое замечал, замечу ещё, обязательно скину посмотреть

На страничках сверстаных вами, при просмотре на мониторе 17"(1024 по ширине) появляется горизонтальный скролл, который портит картину

Они были заточены под это разрешение, я не приделах

[Вадим]

О! Круто! Все очень интересно! Может про сайт поговорим? У кого Safari стоит - протестируйте plz!

[VJiK]

В сафари почти всё хорошо

Серая полоска у футера появляется когда делаешь мелкие масштаб.

[Вадим]

у меня не получается сделать растягивающиеся меню! у кого получилось?

[mishka]

При ширине экрана 1024px появляется горизонтальный скролл.

Каталок изделий некритично с точки зрения верстки, но всеже...

В ие при крупном размере шрифта сайт настолько огромен, что его абсолютно неудобно смотреть на мониторе 1024х768. И полоска серая горизонтальная внизу появляется, волны отрываются от дна.

Было заявленно что размеры в em все браузеры понимают абсолютно одинаково. А у вас есть разбежности в ие7 и ие8 - ширина логотипа скачет.

В сафари при увеличении тоже полоска есть под волнами

[Вадим]

При ширине экрана 1024px появляется горизонтальный скролл.

+решил. указал в body min-width: 100em; вместо 102em и все решилось

+Каталог изделий

исправил) спасибо, это важно!

В ие при крупном размере шрифта сайт настолько огромен, что его абсолютно неудобно смотреть на мониторе 1024х768. И полоска серая горизонтальная внизу появляется, волны отрываются от дна.

ужас.. можно принт-скрин? plz

А у вас есть разбежности в ие7 и ие8 - ширина логотипа скачет.

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

[mishka]

У имги по дефолту есть маргины. Причем для их обнуления недостаточно написать img{margin:0} у вас это есть в css-reset чтобы это сработало имгу еще надо блочной сделать.

это я к тому что меню от лого скачет в браузерах

[psywalker]

В ие при крупном размере шрифта сайт настолько огромен, что его абсолютно неудобно смотреть на мониторе

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

[mishka]

насчет em почитайте на этом форуме в "Создание сайтов" -> "Теория" -> "Дизайн VS разрешение экрана"

[psywalker]

насчет em почитайте на этом форуме в "Создание сайтов" -> "Теория" -> "Дизайн VS разрешение экрана"

Я уже прочитал не одну книжку и не одну статью по этому поводу, прежде чем осваивать эту технику

[Вадим]

Загрузили сайт, убрали проблемные места!

http://w3u.ru/goldlotos/index.html

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

[mishka]

Все супер, кроме того что используется мелкий текст. Это субъективное мнение: я незадерживаюсь на сайтах с мелким шрифтом, хотя зрение еще отличное... но почитав пару абзацев глазки начинают болеть.

[Вадим]

Все супер

А как футер в разделе каталог? Какой размер экрана у вас и какой браузер?

[mishka]

футер ок.

FF 3.0.13

17" 1024х768

Извините недоглядел - в каталоге футер без волны

Почему в каталоге эти всякие побрякушки не ссылки?

[Вадим]

Извините недоглядел - в каталоге футер без волны

Почему в каталоге эти всякие побрякушки не ссылки?

Вот же, у меня тоже такая проблема. Не могу понять почему. Когда использую li+p возникает такая трабла, когда просто li - футре нормальный.

Кликабельная только одна - Сергьи. А внутри разделе Каталог изделий>Серьги фото будут кликабельные с помощью prettyPhoto и в title будет вставлена цена и др. ценная информация о товаре.

Кто может разобраться с футером в каталоге? У меня просто уже ума не хватает. Все перепробывал. Я так понимаю что из-за relative или float просиходит такая фегня.

Но фишка в том, что если бы li было ровно 5 (т.е. они каталог бы состоял в одно строчку), то футер был бы нормальным.

Как только просиходит перенос строки на новую строчку, футер начинает выделываться.

И как выравнивается постраничная навигация на этой же странице? Цифры в центре, а "посмотреть все" чуть правее, верно?

Edited September 2, 2009 by Вадим

[mishka]

замените на <li> нижний маргин на паддинг

ваш блок div#ftr схлопнулся так как на нем нет оверфлов, а внутри есть флотнутый елемент

[Вадим]

замените на <li> нижний маргин на паддинг

ваш блок div#ftr схлопнулся так как на нем нет оверфлов, а внутри есть флотнутый елемент

сделал. ничего не изменилось(

[mishka]

волну цепляйте на div#ftr. оставляйте для нее паддинг (в пикселях по высоте волны). Внутри блок центрированный с вашим текстом

или не центрированный

line это лишний блок

Edited September 2, 2009 by mishka2