Jump to content

Вёрстка

seemax

By seemax,
in Discussion of works

 Share

Recommended Posts

seemax Explorer

seemax

Posted
Posted

Посмотрите пожалуйста вёрстку http://pomidor.com.ua/seemax/BisGroup.html

Макет

e6f9b0a10eaft.jpg

Знаю, что меню безобразно мелко, но это к дизайнеру.

Знаю, что футер отрывается от грунта при разрешении от 1600х1200, исправлю.

Оранжевый ползунок тоже пока додумывается, а как можно было бы? Спрайты, jQuery?

Какие решения сомнительного качества?

Какие кроссбраузеные проблемы проигнорированы?

Link to comment
Share on other sites
Vin Explorer

Vin

Posted
Posted

Это

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

странно видеть на одной странице с этим:


<header>
<nav>
<footer>

Даже в ИЕ8 всё едет. Для поддержки новых элементов в эксплорере 8-й версии и ниже надо использовать html5shiv.

Link to comment
Share on other sites
seemax Explorer

seemax

Posted
  • Author
Posted

Насколько я понял, единого мнения по доктайпу нет. Гугля дает <!DOCTYPE html>

Может остановиться на такой записи? Если нет, почему?

Для поддержки новых элементов в эксплорере 8-й версии и ниже надо использовать html5shiv.

Что то надо с этим делать, согласен, но почему html5shiv, а не css3 PIE?

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

Заголовки картинками ввиду отсутствия соответствующих шрифтов. Какие аргументы против?

Link to comment
Share on other sites
hedgehog Explorer

hedgehog

Posted
Posted

Насколько я понял, единого мнения по доктайпу нет. Гугля дает <!DOCTYPE html>

Может остановиться на такой записи? Если нет, почему?

Вам как раз намекают, что на такой записи и нужно остановиться, если используются HTML5 элементы, потому что footer, header, aside и так далее отсутствуют в HTML4.1 спецификации.

Link to comment
Share on other sites
hypnocolor Explorer

hypnocolor

Posted
Posted (edited)

Текст не стоит делать картинками хотя бы потому, что если у юзера показ картинок отключён, то он ничего не увидит) Хотя бы альты стоит прописать для картинок, в таком случае.

По поводу доктайпа имелось ввиду, что запись <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> соответствует 4-й версии HTML, и в то же время в вёрстке используются элементы из HTML5. ёжик опередил)

И вопрос «почему html5shiv, а не css3 PIE» странный. Даже из названия очевидно, что у них разные предназначения.

Edited by hypnocolor
Link to comment
Share on other sites
Vin Explorer

Vin

Posted
Posted

<!DOCTYPE html> и был выбран для html5 как совместимый со всеми браузерами: и новыми, и старыми, и очень старыми, браузерам, по большому счёту и не нужны эти конструкции PUBLIC "-//W3C//DTD...

PIE — микроскоп для забивания гвоздей, не более. html5shiv же вполне справляется со своей задачей, т.к. ему всего лишь нужно включить поддержку синтаксиса HTML5, а PIE пытается эмулировать то, что скриптом в принципе по-нормальному исправить невозможно :facepalmxd:

  • Like 1
Link to comment
Share on other sites
seemax Explorer

seemax

Posted
  • Author
Posted

Спасибо парни, спасибо VIN. Прозрачно и лаконично.

Если я понял правильно 

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

, вполне должно хватить для приобщения 6-8IE, т как обращение идёт к Гугловскому депозитарию. Немного сбивает с толку 

<!--[if lt IE 9]>

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

...В отношении заголовок-картинка: ну нет таких шрифтов. Альтзаместители конечно же нужно расставить по местам.

Link to comment
Share on other sites
wildhind Explorer

wildhind

Posted
Posted

Немного сбивает с толку 

<!--[if lt IE 9]>

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

Пусть не сбивает. lt IE 9 как раз и означает «ИЕ версии ниже 9».

Если надо ИЕ версии 9 и ниже, то пишется так:

<!--[if lte IE 9]>

Link to comment
Share on other sites
seemax Explorer

seemax

Posted
  • Author
Posted
PIE — микроскоп для забивания гвоздей, не более. html5shiv же вполне справляется со своей задачей, т.к. ему всего лишь нужно включить поддержку синтаксиса HTML5

Может они всё ж для разных задач?

Добавил html5shiv, layout принял вид "как в новых браузерах", border-radius попрежнему не читабелен.

Если использовать и html5shiv, и PIE конфликт не вылезет в самый неожиданный момент?

Link to comment
Share on other sites
Viper Explorer

Viper

Posted
Posted

Может они всё ж для разных задач?

Добавил html5shiv, layout принял вид "как в новых браузерах", border-radius попрежнему не читабелен.

Если использовать и html5shiv, и PIE конфликт не вылезет в самый неожиданный момент?

Да, для разных. Конфликта не вызовет. Но лучше научиться обходиться без PIE или хотя бы разобраться как он работает и его нюансы. Хорошая же практика: либо Graceful degradation, либо применять CSS3 для новых ( умных ) браузеров, а для "не понимающих" - по старинке )

Link to comment
Share on other sites
seemax Explorer

seemax

Posted
  • Author
Posted

Спасибо всем!

Пока не во всем разобрался.

Как прибить футер без обмана фоном http://htmlbook.ru/samlayout/verstka-na-html5/podval-stranitsy?

В моем случае колонки лево-право это фон кртинки <html><body> поэтому пытался дотянуть футер донизу абсолютным позиц относительно <html>.

Может на большом экране будет то, что надо, но на маленьком вертикального скролла нет и футер просто подныривает под вышележащие блоки.

Link to comment
Share on other sites
Vin Explorer

Vin

Posted
Posted (edited)

Может они всё ж для разных задач?

Так о чём и речь.

Добавил html5shiv, layout принял вид "как в новых браузерах", border-radius попрежнему не читабелен.

Повторюсь: этот скрипт всего лишь добавляет поддержку синтаксиса html5, а PIE берёт на себя непосильную ношу модернизации устаревшего движка клиентским JS-ом.

Как прибить футер без обмана фоном http://htmlbook.ru/s...dval-stranitsy?


html,body {
   height:100%;
}

/* В html5 вместо wrapper'а можно использовать section, если не ошибаюсь */
#wrapper {
   margin:0 auto;
   position: relative;
   height:auto !important;
   min-height:100%;
   padding-bottom: YYpx; /* Высота футера */
}

footer {
   height: YYpx; /* Такая-то высота */
   width: 100%; 
   position: absolute;
   bottom: 0;
}

Edited by Vin
Link to comment
Share on other sites
seemax Explorer

seemax

Posted
  • Author
Posted

Спасибо за поиск решения VIN, моей задаче это помогло частично, зато есть неск вопросов, котор хотел бы прояснить:

1) Зачем 


height:100%;
 height:auto !important;
   min-height:100%;

Разве не достаточно height:100%;?

К сожалению не могу проверить при разных разрешениях. Не нашел замену ViewLikeUs, который сегодня не доступен...

2) Почему ширина футера ведет себя таким образом? http://pomidor.com.ua/seemax/BisGroup.html

Параметры шириы аналогичны .container, который строго держится сценария.

Link to comment
Share on other sites
Vin Explorer

Vin

Posted
Posted

Разве не достаточно height:100%;?

Ну, это можно считать, такой особый хак, ставший обычной практикой. Как необходимость очистки плавающих элементов, многочисленные "обёртки" для фактически одного элемента; или табличная вёрстка.

2) Почему ширина футера ведет себя таким образом? http://pomidor.com.u...x/BisGroup.html

Потому что нужно ещё прописать width: 100% для "подвала".

Link to comment
Share on other sites
seemax Explorer

seemax

Posted
  • Author
Posted
Потому что нужно ещё прописать width: 100% для "подвала".

Пробовал перед спрашивал.

То мало длины вправо, то много. Закрывает вертикальный фон рис <body>.

Не могу понять, что ж его укорачивает.

Link to comment
Share on other sites
  • 4 weeks later...

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
Reply to this topic...

×   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 topic listing
×
×
  • 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