Кроссбраузерная и кроссплатформенная вёрска на EM

[Игорь Ермаков]

Verder, не стоит так ненавидеть все системы, ты прав в том, что под многие не стоит затачивать сайт, но вот что ты говоришь, что мак оси, крутая ось, а всё остальное гавно, не показывает тебя с лучшей стороны. Все системы служат под определённые цели, их делали не глупые люди. Может Павел спит и видит, как он будет крутым сисадмином, вот и сидит под убунтой. Твоя любимая мак оси, тоже далеко не идеальна. То же самое ты говорил про браузеры, возвышая сафари, и говоря, что все остальные браузеры гавно. Обозвать, что-то гавном очень просто, а вот обосновать слова намного сложнее. Я сидел на многих браузерах даже на всяких макс тонах, и часто менял вкусы, и у меня например есть масса причин, по которым я использую FF, а не какой-то другой браузер.

Впрочем всё это похоже на примитивный холивар типа: помидоры гавно, огурцы намного вкуснее.

[Verder]

Verder, не стоит так ненавидеть все системы, ты прав в том, что под многие не стоит затачивать сайт, но вот что ты говоришь, что мак оси, крутая ось, а всё остальное гавно, не показывает тебя с лучшей стороны. Все системы служат под определённые цели, их делали не глупые люди. Может Павел спит и видит, как он будет крутым сисадмином, вот и сидит под убунтой. Твоя любимая мак оси, тоже далеко не идеальна. То же самое ты говорил про браузеры, возвышая сафари, и говоря, что все остальные браузеры гавно. Обозвать, что-то гавном очень просто, а вот обосновать слова намного сложнее. Я сидел на многих браузерах даже на всяких макс тонах, и часто менял вкусы, и у меня например есть масса причин, по которым я использую FF, а не какой-то другой браузер.

Впрочем всё это похоже на примитивный холивар типа: помидоры гавно, огурцы намного вкуснее.

Игорь, ты недопонял Я не "возвышаю" OSx и не ненавижу все системы. OSx просто очень хорошая операционка. Во всяком случае для верстальщика и дизайнера лучшая.

По поводу браузеров - у любого человека есть предпочтения - я свои предпочтения отдаю Safari, только и всего.

Если Павел видит себя крутым сисадмином, то пусть разбирается с линкусом/юниксом в пределах АДМИНСКИХ функций, а не приводит в пример слетевшую верстку в какой-то кривой версии Firefox. Это то же самое, если я сейчас стану запускать какую-нибудь игру последнего поколения на Windows 95, она будет постоянно вылетать или не запускаться, а я буду говорить - "Нихрена, это не система виновата! Эта игра такая (в данном контексте верстка)"!

Понимаешь о чем я?

[Searcher]

Searcher

Спасибо огромное за развёрнутый ответ, но есть вопросы по пунктам:

1) В ИЕ6 вёрстка тоже резиновая, а разве нет? У меня да, поэтому хотелось бы услышать поподробнее об этом

2) Тоесть Вы хотите сказать, что масштабирование всех блоков вместе с текстом плохая вещь?

3) Научите меня комбинировать ЕМ с %, хотябы пару примеров пожалуйста

Всё остальное сделал на угад, просто Т3 особо не было, но всё исправлю обязательно

1) В ИЕ6, у меня, вообще, прикол... Открываю сайт в окне на полный экран - нормально все. Уменьшаю окно - нормально. Увеличиваю, а верстка остается статичной и по размеру как на уменьшенном окне.

Потом периодически при изменении размера шрифта в ИЕ6 он просто виснет. Встречал восновном при увеличении.

Может у меня ИЕ6 такой глючный, но повисание я за ним крайне редко замечаю...

2) Масштабирование - отличная вещь, но для пропорционального масштабирования есть один инструмент, а для масштабирования только шрифта - другой. Вы их объединили. Это, конечно, не криминал, но для портфолио - минус. Привязка размера картинок к em - вещь спорная, есть много "за" есть много "против", но у вас это вполне неплохо реализуется, только ИЕ портит все паршивым масштабированием графики.

3) Для комбинирование относительных и абсолютных величин нужен индивидуальный подход. Тут в двух словах не научишь. Для каждого макета - свои принципы. А вот то, что вы без ТЗ работали это большая ошибка. Наугад ничего не стоит делать. Никто не мешал вам самому себе до начала работы написать ТЗ. Вы посмотрите на удобство пользования сайтом со стороны обыкновенного посетителя 40 лет. Подумайте, что, где и как должно увеличиваться и уменьшаться, чему и когда позволительно вылезать за пределы окна и т.п. Но общий принцип такой, что вся информация даже при самых жестких условиях (разрешение 800х600, а то и КПК типа 640х480, 3200х200, или супер-мега-большое разрешение, отсутствие графики, отключенные стили и т.п.) должна быть доступна с максимально возможным удобством. Для портфолио, если вы напишите, что этот сайт также доступен и с кпк и с телефона и продемонстрируете - это будет большим плюсом. Но для этого уже потребуется технология адаптивной разметки, корректировка макета для мин. и макс. разрешений. Может тут пока и не стоит этим заниматься.

В любом случае уже надо смотреть непосредственно на макет, что должно меняться в зависимости от размеров окна, что от размера шрифта и т.п. Использование полного масштабирования в FF, Opera, Chrome происходит за счет виртуального уменьшения разрешения, а если менять только размер шрифта - то меняется только em.

В вашей ситуации стоит сжимать блоки и свободное пространство между ними максимально возможно, чтобы уместить всю информацию в окно по горизонтали. Значит блоки и расстояния между ними, отступы, лучше делать в зависимости от размеров окна, т.е. в %, а минимальные размеры в пикселях. Ну а размеры текста и картинки в em.

Вот в кратце так.

[psywalker]

1) В ИЕ6, у меня, вообще, прикол... Открываю сайт в окне на полный экран - нормально все. Уменьшаю окно - нормально. Увеличиваю, а верстка остается статичной и по размеру как на уменьшенном окне.

Потом периодически при изменении размера шрифта в ИЕ6 он просто виснет. Встречал восновном при увеличении.

Может у меня ИЕ6 такой глючный, но повисание я за ним крайне редко замечаю...

2) Масштабирование - отличная вещь, но для пропорционального масштабирования есть один инструмент, а для масштабирования только шрифта - другой. Вы их объединили. Это, конечно, не криминал, но для портфолио - минус. Привязка размера картинок к em - вещь спорная, есть много "за" есть много "против", но у вас это вполне неплохо реализуется, только ИЕ портит все паршивым масштабированием графики.

3) Для комбинирование относительных и абсолютных величин нужен индивидуальный подход. Тут в двух словах не научишь. Для каждого макета - свои принципы. А вот то, что вы без ТЗ работали это большая ошибка. Наугад ничего не стоит делать. Никто не мешал вам самому себе до начала работы написать ТЗ. Вы посмотрите на удобство пользования сайтом со стороны обыкновенного посетителя 40 лет. Подумайте, что, где и как должно увеличиваться и уменьшаться, чему и когда позволительно вылезать за пределы окна и т.п. Но общий принцип такой, что вся информация даже при самых жестких условиях (разрешение 800х600, а то и КПК типа 640х480, 3200х200, или супер-мега-большое разрешение, отсутствие графики, отключенные стили и т.п.) должна быть доступна с максимально возможным удобством. Для портфолио, если вы напишите, что этот сайт также доступен и с кпк и с телефона и продемонстрируете - это будет большим плюсом. Но для этого уже потребуется технология адаптивной разметки, корректировка макета для мин. и макс. разрешений. Может тут пока и не стоит этим заниматься.

В любом случае уже надо смотреть непосредственно на макет, что должно меняться в зависимости от размеров окна, что от размера шрифта и т.п. Использование полного масштабирования в FF, Opera, Chrome происходит за счет виртуального уменьшения разрешения, а если менять только размер шрифта - то меняется только em.

В вашей ситуации стоит сжимать блоки и свободное пространство между ними максимально возможно, чтобы уместить всю информацию в окно по горизонтали. Значит блоки и расстояния между ними, отступы, лучше делать в зависимости от размеров окна, т.е. в %, а минимальные размеры в пикселях. Ну а размеры текста и картинки в em.

Вот в кратце так.

Спасибо тебе огромное за ответы, вот ещё хотел ответить и кое что спросить:

1) Насчёт ИЕ6 понял, у меня тоже самое зависание, оно лечится когда обновляешь страницу при большом разрешении

2) Картинки очень плохого качества и это всё портит, да?

3) Тоесть ты хочешь сказать, что размеры самих блоков надо делать в %? Допустим div.class { width: 18%; padding: 0 3%;} и т. д.?

4) Ты сказал, что вообще нельзя задавать размеры в em для всех блоков и шрифта сразу? Или всё таки это можно делать в каких то случаях?

Edited September 4, 2009 by psywalker

[VJiK]

Если не секрет, psywalker, сколько стоит такая верстка?

Можно в личку...

[psywalker]

Если не секрет, psywalker, сколько стоит такая верстка?

Можно в личку...

Да бесплатно же, просто макет висит на форуме, бери и верстай

[VJiK]

Неет

Я имел в виду какую сумму ты взял бы за верстку такого макета.

Edited September 4, 2009 by VJiK

[mishka]

у меня моник 17" и при просмотре появляется раздражающая горизонтальная полоса прокрутки.

Если расчитываешь на разрешение минимум 1024 по ширине, то делай сайт c минимальной шириной 1000px

[psywalker]

у меня моник 17" и при просмотре появляется раздражающая горизонтальная полоса прокрутки.

Если расчитываешь на разрешение минимум 1024 по ширине, то делай сайт c минимальной шириной 1000px

Сайт был заточен под 1024, все вопросы к Вердеру, он заказчик))

[mishka]

заточен под 1024 это значит что при появлении вертикальной полосы непоявится горизонтальной. И верстальщик если видит макет шире 1000px то он должен проконсультироватся с заказчиком

[psywalker]

заточен под 1024 это значит что при появлении вертикальной полосы непоявится горизонтальной. И верстальщик если видит макет шире 1000px то он должен проконсультироватся с заказчиком

Мишка, интересно, а напиши поподробнее плиз свою мысль

[mishka]

если нет вертикальной полосы прокрутки то размер окна браузера шире. Если вертикальная полоса появляется, то и размер окна становится меньше.... (насамом деле не окно а та часть где располагается страница, и у разных браузеров она разная). тоесть если страничка вполне помещается в окне браузера без вертикальной полосы прокрутки, то это еще не значит что с появлением вертикальной полосы не появится горизонтальная. Ориентир для 1024 - 1000px. Если видишь макет шире 1000px то предуприждай заказчика об этом. Эта полоса реально раздражает.

[psywalker]

если нет вертикальной полосы прокрутки то размер окна браузера шире. Если вертикальная полоса появляется, то и размер окна становится меньше.... (насамом деле не окно а та часть где располагается страница, и у разных браузеров она разная). тоесть если страничка вполне помещается в окне браузера без вертикальной полосы прокрутки, то это еще не значит что с появлением вертикальной полосы не появится горизонтальная. Ориентир для 1024 - 1000px. Если видишь макет шире 1000px то предуприждай заказчика об этом. Эта полоса реально раздражает.

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

[mishka]

на самом деле там чтото около 1002px но 1000 както круглее

Ты что гонишь? Я говорю про 1000 вширину

[Searcher]

Заточен под 1024 - вообще не понятная формулировка и может означать все что угодно. Есть много динамических параметров, которые нужно решить с заказчиком. Как макет должен себя вести на размерах окна меньше чем 1024? Если больше не сужаться - будет горизонтальная полоса прокрутки, но если уж макет подразумевается резиновым и на 1024 еще полно места, то зачем ограничивать его дальнейшее сужение? Лучше чтобы не было горизонтального скролла до такого минимума разрешения, пока не потеряется хоть какие-то промежутки позволяющие визуально отделать друг от друга различные элементы.

Вообще как резиновый макет может быть заточен только под 1024? Тут диапазон должен быть. Броузер не всегда развернут на все окно и может оказаться немного меньше, чем вы задумали. И почему тут посетитель должен видеть горизонтальный скролл?

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

там такие отступы, что можно и сужать дальше.

[psywalker]

на самом деле там чтото около 1002px но 1000 както круглее

Ты что гонишь? Я говорю про 1000 вширину

Мих, так я думал, ты про вертикальную полосу вроде))

Заточен под 1024 - вообще не понятная формулировка и может означать все что угодно. Есть много динамических параметров, которые нужно решить с заказчиком. Как макет должен себя вести на размерах окна меньше чем 1024? Если больше не сужаться - будет горизонтальная полоса прокрутки, но если уж макет подразумевается резиновым и на 1024 еще полно места, то зачем ограничивать его дальнейшее сужение? Лучше чтобы не было горизонтального скролла до такого минимума разрешения, пока не потеряется хоть какие-то промежутки позволяющие визуально отделать друг от друга различные элементы.

Вообще как резиновый макет может быть заточен только под 1024? Тут диапазон должен быть. Броузер не всегда развернут на все окно и может оказаться немного меньше, чем вы задумали. И почему тут посетитель должен видеть горизонтальный скролл?

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

там такие отступы, что можно и сужать дальше.

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

p.s. - Мих смори, сделал 940пк в ширину минималку, зацени

Edited September 4, 2009 by psywalker

[Searcher]

места для сужения еще полно: между sb и cnt большое расстояние, слева отступ большой, справа все равно вы прилепляетесь к краю, так и слева можно приблизить

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

[psywalker]

места для сужения еще полно: между sb и cnt большое расстояние, слева отступ большой, справа все равно вы прилепляетесь к краю, так и слева можно приблизить

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

Воо, сделал 880пк, но это точно предел, меньше нельзя сто пудов или я гоню?

Там просто меню справа, слова в нём уже меньше када 880пк, то они начинают залазить на правые ячейки

Edited September 4, 2009 by psywalker

[psywalker]

Кое что поправил, и сделал 760пк минималку, зацените теперь, как вам?

http://www.psywalker.ru/SAITS/First-Orange/main-page.html#

Edited September 5, 2009 by psywalker

[Searcher]

Заголовок "Первый оранжевый" обрезается при уменьшении...

По хорошему нужно чтобы и левая часть сайта была резиновой, поскольку там отступ от края до меню большой и фиксированный, как-то при сжатии правой части непропорционально кажется. Для телефона, курса валют и поиска тоже можно левый отступ сделать в %.

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

[psywalker]

Заголовок "Первый оранжевый" обрезается при уменьшении...

По хорошему нужно чтобы и левая часть сайта была резиновой, поскольку там отступ от края до меню большой и фиксированный, как-то при сжатии правой части непропорционально кажется. Для телефона, курса валют и поиска тоже можно левый отступ сделать в %.

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

Вот дружище, это максимум, что мне удалось добиться, вроде всё, что ты говорил, я поправил

http://www.psywalker.ru/SAITS/First-Orange/main-page.html#

1) На твой взгляд остались ещё косяки?

2) А так в целом я вообще нормал верстанул?

[aseran]

Здравствуйте господа, не буду осужадть качество верстки,

но замечу - что можно избежать (это не принципиально - выглядит лучше)

——————

<!--[if IE 6]><link type="text/css" href="css/ie6.css" rel="stylesheet" media="all" /><![endif]-->

<!--[if IE 7]><link href="css/ie7.css" rel="stylesheet" media="all" /><![endif]-->

<!--[if IE 8]><link href="css/ie8.css" rel="stylesheet" media="all" /><![endif]-->

—————————

заменить этой строчкой

<!--[if IE]><link type="text/css" href="css/ie.css" rel="stylesheet" media="all" /><![endif]-->

а уже в файле ie.css использовать хаки для версий IE

в нем можно прописывать отдельные стили для всех версий IE (например его блочная модель отлична от других браузеров - я имею ввиду ширина + отступ)

IE 6 * html style {font-size:6em; }

IE 7 *+html style {font-size:7em; }

IE 8 - для него как правило и не нужно отдельных хаков - он более ли менее ведет себя адекватно.

в верстке (коде) есть (элементы) которые не имеют ни какого значения

Чтобы увидеть в "приближении" семантику кода - отключите таблицу стилей - есть над чем поработать

[psywalker]

aseran

в верстке (коде) есть (элементы) которые не имеют ни какого значения

Можно поподробнее

Чтобы увидеть в "приближении" семантику кода - отключите таблицу стилей - есть над чем поработать

Тоже если можно, то поподробнее пожалуйста, я отключаю, вроде всё хорошо

А в целом как вёрстка из 10 баллов?

[aseran]

ЧТо касается качества верстки - то код - его оформление (HTML) - (семантика) 8

(css посмотреть не могу) - оценка n/d

На кроссбраузерность не проверял - оценка n/d .

Чтобы увидеть в "приближении" семантику кода - отключите таблицу стилей - есть над чем поработать

Что касается семантики - тут

1) блок с логотипом - телефон накладывается - в строку - можно было использовать блочный элемент вместо инлайн элемента. зачем в логотип ставить картинку награмождение - лучше это в стили задать для элемента <a>

или <h1><a href="#">Логотип</a><span></span></h1> - а span абсолютно спозиционировать и присвоить в стилях картинку

2) Можно использовать метод отрицательных отступов - и поставить контентную часть выше навигационной. (это хорошо для оптимизации сайта)

в верстке (коде) есть (элементы) которые не имеют ни какого значения

Есть лишине обертывания div-ми например блок с языками UL и так блочный элемент и к нему и нужно было применять класс...

+ не нужно забывать что заказчик может вставить свой контент на страницу - например в ложенный список - нумерованный и с точками в контентную часть (как он выглядит сейчас - ВОТ. Обнуляя таблицу стилей браузера - не забудь предусмотреть добавление контента)

Как правило это нужно, хотя это достаточно и добавляет css кода но это есть - ГУД.

[psywalker]

aseran

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

1)

в верстке (коде) есть (элементы) которые не имеют ни какого значения

Есть лишине обертывания div-ми например блок с языками UL и так блочный элемент и к нему и нужно было применять класс...

Этот лишний див выполняет функцию левого верхнего фона, дело в том, что нижний бордер UL находиться прям под ним, а левый верхний фон левее UL и соответвственно нижнего бордера, поэтому и пришлось оборачивать в Див, а как бы вы поступили?

2)

+ не нужно забывать что заказчик может вставить свой контент на страницу - например в ложенный список - нумерованный и с точками в контентную часть (как он выглядит сейчас - ВОТ. Обнуляя таблицу стилей браузера - не забудь предусмотреть добавление контента)

Как правило это нужно, хотя это достаточно и добавляет css кода но это есть - ГУД.

Можно узнать о каком именно меню идёт речь и вообще поподробнее этот пример?