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

[psywalker]

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

1) Вёрстка сделана 98% на "em" расчитывая на отличное масштабирование во всех браузерах, включая ИЕ6. Поэтому прошу оценить эффект, получился или нет?

2) Прошу проверить вёрстку на кроссбраузерность и кроссплатформенность (валидность само сабой)

3) Один из важных вопросов насчёт Семантики, поругайте пожалуйста по каждой мелочи

4) Ещё прошу оценить организованность стилей и вообще кода в частности

p.s. - на качество картинок не обращайте внимание, других небыло.

p.s.s. - интересует только вёрстка!

Ссылка:

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

Заранее спасибо!

[Колос]

Когда навожу на "eng", то "rus" остаётся красным.

[Павел Билькис]

http://floomby.ru/content/onKqfvUWYj/

тут все ясно

http://floomby.ru/content/jHOR06Lnj0/

тут в тетку упирается текст

Это изображение относится к лого так? Но тогда почему оно поставлено фоном для всей страницы?

http://floomby.ru/content/YbG2YDW5FU/

тоже самое, что и пункте один. Ие 6

Оценка - 4 с плюсом

[Verder]

http://floomby.ru/content/onKqfvUWYj/

тут все ясно

http://floomby.ru/content/jHOR06Lnj0/

тут в тетку упирается текст

Это изображение относится к лого так? Но тогда почему оно поставлено фоном для всей страницы?

http://floomby.ru/content/YbG2YDW5FU/

тоже самое, что и пункте один. Ие 6

Оценка - 4 с плюсом

Блин, ну ты реально запарил со своей убунту

Волкер, не смотри на его срины, он хер знает в каком браузере и на какой системе снял. У него там все так.

Смотрю в ИЕ, ФФ, Опере, Сафари под маком и виндами - все ок!

Я бы даже сказал - отлично.

Edited September 3, 2009 by Verder

[psywalker]

1)

http://floomby.ru/content/onKqfvUWYj/

тут все ясно

По другому не знал, как сделать для Убунты, оказалось, что эта платформа не понимает display: inline-block; для ссылки, может я ошибаюсь, но факт на лицо

2)

http://floomby.ru/content/jHOR06Lnj0/

тут в тетку упирается текст

Да, так и должно быть

3)

Это изображение относится к лого так? Но тогда почему оно поставлено фоном для всей страницы?

Спроси у Вердера, он рисовал

4)

http://floomby.ru/content/YbG2YDW5FU/

тоже самое, что и пункте один. Ие 6

А тут что, я не понял?

Verder

Блин, ну ты реально запарил со своей убунту laugh.gif

Волкер, не смотри на его срины, он хер знает в каком браузере и на какой системе снял. У него там все так.

Смотрю в ИЕ, ФФ, Опере, Сафари под маком и виндами - все ок!

Я бы даже сказал - отлично.

Спасибо дружище, я всё понимаю, но боюсь портфолио будут смотреть такие же Билькинсы

Edited September 3, 2009 by psywalker

[Павел Билькис]

Хочу заметить, что тот же фф и под убунту и под мак и под вин делается с минимальными отличиями! А то что всякие там ведерки(Verder) не знают о бунте, так это их(ведерок) проблемы.

У него там все так.

Знаешь, все остальные сайты у меня отображаются нормально

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

Отлично как всегда.

[Verder]

...

Verder

Спасибо дружище, я всё понимаю, но боюсь портфолио будут смотреть такие же Билькинсы

Я вот тут написал, что об этом думаю - http://forum.htmlbook.ru/index.php?showtop...20&start=20

Таких извращенцев один на миллион юзеров. В каких студиях не был (приличных) - верстальщики сидят за маками. В менее приличных попадаются и винды. Уродства типа убунту не видел нигде. Так что по поводу того, что кто-то скажет - "Ага! Он не умеет под это говно верстать" - можешь не парится. К счастью работодатели в области дизайна а тем более верстки - люди адекватные.

Хочу заметить, что тот же фф и под убунту и под мак и под вин делается с минимальными отличиями! А то что всякие там ведерки(Verder) не знают о бунте, так это их(ведерок) проблемы.

Ага, с минимальными, только почему-то не понимают они половину свойств CSS

По поводу никсов - я админил хостинг .masterhost на заре его юности. Знаю я систему или нет? Так что если ты любитель, который ставит вское говно от избытка времени, то я свое время ценю.

Edited September 3, 2009 by Verder

[Павел Билькис]

Ага, с минимальными, только почему-то не понимают они половину свойств CSS

Страно, страно.. Когда я верстаю, под виндой все ок.

По поводу никсов - я админил хостинг .masterhost на заре его юности. Знаю я систему или нет? Так что если ты любитель, который ставит вское говно от избытка времени, то я свое время ценю.

Знаю, знаю как ты админил)) :) Перезагружал сервер Ы_Ы

[Verder]

Страно, страно.. Когда я верстаю, под виндой все ок.

Знаю, знаю как ты админил)) :) Перезагружал сервер Ы_Ы

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

Просто ответь на последние пару вопросов:

Почему в том же ФФ 3.5 под виндами, самой популярной ОС в мире, все нормально, а в твоей убунту, в точно таком же (как ты уверяешь) ФФ 3.5 все криво?

Сколько юзеров используют ФФ под виндами? Наверное побольше чем под убунту. Так в какой системе он "правильный"?

Если логически подумать, то, наверное, все же не в верстке дело, а в кривизне системы?

Поэтому, прежде чем писать и выкладывать скрины из под своей системы с "правильным" ФФ, пиши КРУПНЫМИ БУКВАМИ - "У МЕНЯ УБУНТУ И "ПРАВИЛЬНЫЙ" ФФ". А вы все, сотни миллионов человек, которые сидите в виндах и у которых кривой ФФ - неудачники

[psywalker]

Павел Билькис

Объясни подробнее плиз про этот пункт:

http://floomby.ru/content/YbG2YDW5FU/

тоже самое, что и пункте один. Ие 6

[BassEast]

поднадоел этот шаблон уже если честно, давай Волкер верстай Астру, которую я тебе скинул, будет интересно.)

ох, вот лично я не люблю все вот эти сокращения названий классов, типа: "sb", "cnt" - чёрт не разберёт эти аббревиатуры , но это дело каждого.

img/girl.jpg я бы вынес в bsckground:... к классу online, тогда не пришлось бы span внутри, абсолютно позиционировать.

меню:

На неотложные нужды - под иконкой, Автокредит и остальные справа от иконки.. это по дизайну? или может быть лучше сделать уже все их под иконками?

Edited September 3, 2009 by BassEast

[Verder]

Павел Билькис

Объясни подробнее плиз про этот пункт:

Волкер, да не парься ты У него "Все правильно". Это мы под виндами и маками уроды

поднадоел этот шаблон уже если честно

Скоро еще один выложу, посложнее.

[Павел Билькис]

Павел Билькис

Объясни подробнее плиз про этот пункт:

А разве это правильно - когда надпись отдых, справа от картинки? Или так задумывалось?

[Verder]

А разве это правильно - когда надпись отдых, справа от картинки? Или так задумывалось?

http://pic.ipicture.ru/uploads/090522/WxutJjkOez.png - вот мой макет. Правильно справа.

[BassEast]

кстати кто-нибудь практикуется такой вот нарезкой и вёрсткой соответственно?

это конечно сокращает загрузку картинок на странице, но это нифига не удобный способ.

[psywalker]

BassEast

1)

поднадоел этот шаблон уже если честно, давай Волкер верстай Астру, которую я тебе скинул, будет интересно.)

Обязательно дружище, просто она следующая на очереди вроде

2)

ох, вот лично я не люблю все вот эти сокращения названий классов, типа: "sb", "cnt" - чёрт не разберёт эти аббревиатуры smile.gif, но это дело каждого.

Согласен, самому надоело, потому что как то непонятно другим, надо будет другие придумать

3)

img/girl.jpg я бы вынес в bsckground:... к классу online, тогда не пришлось бы span внутри, абсолютно позиционировать.

Сначала так и сделал, но из-за проблем в масштабировании(фон не масштабируется) пришлось делать Имгой

4)

меню:

На неотложные нужды - под иконкой, Автокредит и остальные справа от иконки.. это по дизайну? или может быть лучше сделать уже все их под иконками?

А вот тут уже всё зависит от длины строки, если немного экран сузить, то все фразы окажутся под картинкой, а так все справа

Verder

Волкер, да не парься ты smile.gif У него "Все правильно". Это мы под виндами и маками уроды laugh.gif

Даа, лохи мыыыы :)

кстати кто-нибудь практикуется такой вот нарезкой и вёрсткой соответственно?

это конечно сокращает загрузку картинок на странице, но это нифига не удобный способ.

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

http://pic.ipicture.ru/uploads/090522/WxutJjkOez.png - вот мой макет. Правильно справа.

Всегда справа, даже при сужении экрана?

Скоро еще один выложу, посложнее.

Поскорее бы и побольше

[Searcher]

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

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

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

Картинки в меню обязательно должны быть кликабельны.

Почему везде верстка резиновая а в ИЕ6 - нет?

Сделав все на em вы лишили пользователя возможности использовать режим увеличения только шрифтов. Все равно все увеличивается... Пытаюсь увеличить только шрифт, а тут бац, а увеличивается все да еще и выпадает за границы окна... Не для того я шрифт увеличивую, чтобы мне пришлось пользоваться горизонтальным скроллом. Может у меня зрение не очень и я просто хочу более крупные буквы, а такое часто встречается, особенно у людей за 40. А это как раз самая коммерчески высокая и активная часть населения. Вобщем, ширина сайта должна зависеть не от размера символов, а от ширины окна, особенно когда еще полно места.

Вот повсеместное использование em - тоже не самый лучший вариант, надо уметь комбинировать с абсолютными размерами и с %. Отсюда ряд проблем.

Размер картинок отличный от оригинала в ИЕ6 лучше не использовать, он их очень некачественно рендерит.

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

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

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

[Great Rash]

<!-- lang -->

			<div class="lang">
				<ul>
					<li class="page"><a href="#">rus</a></li>
					<li><a href="#">eng</a></li>
					<li><a href="#">deu</a></li>
				</ul>
			</div>

С какой целью <ul> оборачивался в <div>?

<!-- about bank -->
		<div class="about-bank">
			<h3>Кратко о банке</h3>
			<p>Надёжность и безупречная репутация банка подтверждаются высокими рейтингами ведущих рейтинговых агенств.<br />
			Агенство <a href="#">Fitch Ratings</a> банку присвоен долгосрочный рейтинг дефолта в иностранной валюте "ВВВ", агенством <a href="#">Moody's Investors Service </a> - долгосрочный рейтинг депозитив в иностранной валюте "Baa1". Кроме того, агенство Банку наивысший рейтинг по национальной шкале.</p>

			<a href="#" class="more">Полная информация о банке</a>
		</div>

С какой целью понадобилось оборачивать в <div> этот абзац?

[BassEast]

Да и макет для портфолио изначально не очень годится.

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

[psywalker]

Searcher

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

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

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

Картинки в меню обязательно должны быть кликабельны.

Почему везде верстка резиновая а в ИЕ6 - нет?

Сделав все на em вы лишили пользователя возможности использовать режим увеличения только шрифтов. Все равно все увеличивается... Пытаюсь увеличить только шрифт, а тут бац, а увеличивается все да еще и выпадает за границы окна... Не для того я шрифт увеличивую, чтобы мне пришлось пользоваться горизонтальным скроллом. Может у меня зрение не очень и я просто хочу более крупные буквы, а такое часто встречается, особенно у людей за 40. А это как раз самая коммерчески высокая и активная часть населения. Вобщем, ширина сайта должна зависеть не от размера символов, а от ширины окна, особенно когда еще полно места.

Вот повсеместное использование em - тоже не самый лучший вариант, надо уметь комбинировать с абсолютными размерами и с %. Отсюда ряд проблем.

Размер картинок отличный от оригинала в ИЕ6 лучше не использовать, он их очень некачественно рендерит.

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

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

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

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

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

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

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

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

Great Rash

<!-- lang -->

			<div class="lang">
				<ul>
					<li class="page"><a href="#">rus</a></li>
					<li><a href="#">eng</a></li>
					<li><a href="#">deu</a></li>
				</ul>
			</div>

С какой целью <ul> оборачивался в <div>?

<!-- about bank -->
		<div class="about-bank">
			<h3>Кратко о банке</h3>
			<p>Надёжность и безупречная репутация банка подтверждаются высокими рейтингами ведущих рейтинговых агенств.<br />
			Агенство <a href="#">Fitch Ratings</a> банку присвоен долгосрочный рейтинг дефолта в иностранной валюте "ВВВ", агенством <a href="#">Moody's Investors Service </a> - долгосрочный рейтинг депозитив в иностранной валюте "Baa1". Кроме того, агенство Банку наивысший рейтинг по национальной шкале.</p>

			<a href="#" class="more">Полная информация о банке</a>
		</div>

С какой целью понадобилось оборачивать в <div> этот абзац?

1) Тоже долго думал перед тем, как С какой целью <ul> оборачивался в <div>, и сделал это ради левого Фона сверху, возле меню этого. Как бы сделал ты?

2) А блок завернул в Див, чтобы просто поделить всё на логические блоки, вот этот например относиться к "О Банке". Как бы сделал ты?

Edited September 3, 2009 by psywalker

[Great Rash]

1) Фон я бы зафигачил в сам <ul>

2) В ворде ты ж не делишь все на блоки когда реферат пишешь. Хтмл тот же документ (тем более "дизайнерскими фичами" это не обусловлено). Я б делал без дива.

[psywalker]

1) Фон я бы зафигачил в сам <ul>

2) В ворде ты ж не делишь все на блоки когда реферат пишешь. Хтмл тот же документ (тем более "дизайнерскими фичами" это не обусловлено). Я б делал без дива.

1) Я тоже сначала зафигачил, а потом увидел одну херню, то что сам фон левый верхний заходит левее нижнего бордера, ты посмори сам, вот поэтому и пришлось делать Див, а так я сам это ненавижу. Скажи, можно было бы обойти эту проблему иначе?

2) Ну это уже я бы поспорил, всё таки я в этой ситуации не просто дивы напихал, а действительно обернул отдельный блок, которым в дальнейшем возможно можно будет управлять через этот самый Див

[Great Rash]

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

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

[psywalker]

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

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

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