Первый макет пошёл!

[psywalker]

Только что закончил первый макет из топика http://forum.htmlbook.ru/index.php?s=&...st&p=104632 Пару дней просидел над этой работой, охх, честно скажу, не просто он мне дался, в нём до фига чего нужно учитывать, как мне показалось! Но вот я справился и хочу отдать его на всеобщий суд

Эту работу я посчитал нужным сделать практически целиком на Позиционировании и Обтекании, и не смотря на эти страшные слова, работа получилась неплохая, пуленепробиваемая и устойчивая при любой "Погоде"!

Интересно услышать мнения насчёт:

1) Дизайн этого макета мне показался очень трудным для вёрстки, скажите, я прав или нет?

2) Изначально я порезал макет на 4 большие картинки, и позиционировал их по углам, оставив лишь середину для бесконечной тянучести по высоте. Скажите правильно ли я сделал и как вообще нужно было порезать этот макет?

3) Все блоки я сделал не пробиваемыми наглухо, тоесть в них можно запихивать текста до отвалу, как по горизонтали, так и по вертикали!

Правильно-ли я сделал или нужно было просто тупо вырезать верхушки, середины и низ и наклепать Фиксированные блоки?

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

Правильно ли я сделал или нужно было просто продолжить его за центром и не париться?

5) Так как повторюсь - для меня этот макет дался непросто, то пришлось потратить на реализацию очень много элементов - "div" в частности, иначе у меня бы не вышло сделать его стойким ко всем неприятностям..

Хотелось бы узнать мнения, кто и как-бы сделал по своему разные блоки и вообще сайт?

6) Ну и конечно-же прошу оценить Кросс ( включая ИЕ6), Валидность а главное Семантику всего процесса

p.s. - Для уголков не сделал спрайт, потому что углы ПНГ, а на земле существует ИЕ6, так что за это прошу не судить, если только нет другого решения

Ссылка: http://psywalker.ru/SAITS/Izoprint/main-page.html

Edited June 28, 2009 by psywalker

[Zippovich]

Очень неплохая верстка.

1) Правильно, только сдается мне что хватило бы 3-х, верх, повторяющийся центр и низ.

2) Макет фиксированный, поэтому не вижу смысла в вынесении уголков в отдельные картинки, хватило бы: верх, низ и повторяющийся центр.

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

4) Я не использую id вообще для блоков, но это только мое предпочтение. Бывали случаи, когда программеры после меня жаловались, что мои id контачат с их скриптами.

[Константин]

что-то у меня эмулятор ИЕ6 плохо переварил ваш макет

футер тоже с кривоватостями. может эмулятор у меня кривой, подождем комменты счастливых обладателей чистого ие6

[Иван Шумов]

Все очень неплохо, однако:

1) уголки можно было сделать 8-и битной прозрачностью которую понимает IE6

2) неприятный косячек, но вполне исправим http://floomby.ru/content/iqN1QJH5xE/ с ним у меня в свое время появилась некоторая морока

3) лого типа файла я вно не JPG надо было делать.

4) число скидки тоже неплохо бы текстом

5) ссылки в меню я тогда делал блочными элементами - вообще неприятно бывает промахнуться мышкой мимо ссылки - неплохо увеличивать так сказать область захвата

6) в цитате при большом количестве текста http://floomby.ru/content/XbO0qyfMb0/

Улыбнуло:

1) что слоган отдельной картинкой - отличный ход! я так же делал и мне это 1 раз помогло

2) Комментированный код

3) CSS файл просто замечателен организация - самое главное

Не понравилось : Reset CSS мне уже опротивил - есть и плюсы и минусы

[psywalker]

Zippovich

Спасибо за ответы, но есть вопросы:

1)

1) Правильно, только сдается мне что хватило бы 3-х, верх, повторяющийся центр и низ.

Это получается, ты использовал-бы одну Здоровенную картинку сверху и снизу?

2)

2) Макет фиксированный, поэтому не вижу смысла в вынесении уголков в отдельные картинки, хватило бы: верх, низ и повторяющийся центр.

Согласен, но я привык делать наверняка, на все случаи жизни и на будущее!

3)

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

Гуд!

4)

4) Я не использую id вообще для блоков, но это только мое предпочтение. Бывали случаи, когда программеры после меня жаловались, что мои id контачат с их скриптами.

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

Константин

что-то у меня эмулятор ИЕ6 плохо переварил ваш макет

футер тоже с кривоватостями. может эмулятор у меня кривой, подождем комменты счастливых обладателей чистого ие6 smile.gif

хм...странно, я конечно ненавижу это говно, но ради принципа всегда добиваюсь полного Кросса, включая ИЕ6, у меня две проги, ИЕ-тестер и Виртуалка, и обе показывают, что в Ие6 всё хорошо, мало того, что всё в точности так же, как и во всех остальных браузерах! Ребят, посмотрите пожалуйста, у кого нибудь ещё есть с этим проблемы?

Иван Шумов

Спасибо и тебе друг, а скажи пожалуйста:

1)

1) уголки можно было сделать 8-и битной прозрачностью которую понимает IE6

А можно поподробнее, очень интересно и позновательно

2)

2) неприятный косячек, но вполне исправим smile.gif http://floomby.ru/content/iqN1QJH5xE/ с ним у меня в свое время появилась некоторая морока

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

3)

3) лого типа файла я вно не JPG надо было делать.

Извини, не понял, о чём речь?

4)

6) в цитате при большом количестве текста http://floomby.ru/content/XbO0qyfMb0/

Вот тут вообще отдельный разговор, я значит понял так, либо я прибиваю подвал к низу навечно и тогда при заполнении цитаты будет такая какашка, либо я делаю подвал потоком и тогда при пустой середине он будет сверху соответственно, но зато Цитата при заполнении не будет касячить, по другому мне не удалось разобраться с этой проблемой, если подскажите, как мне убить двух зайцев, буду рад!

4)

Улыбнуло:

1) что слоган отдельной картинкой - отличный ход! я так же делал и мне это 1 раз помогло

2) Комментированный код

3) CSS файл просто замечателен smile.gif организация - самое главное

Спасибо, всегда тренирую организацию файлов, и стараюсь улучшать её от вёрстке к вёрстке потому что считаю это очень хорошим качеством и привычкой!

Edited June 28, 2009 by psywalker

[Zippovich]

Это получается, ты использовал-бы одну Здоровенную картинку сверху и снизу?

Да, а почему бы нет?

Логотип - согласен, я обычно делаю его png-24 - для лучшего качества. Так же логотип лучше не делать бэкграундом, лучше сделать так, что бы пользователь мог правой кнопкой мыши жмакнуть и скачать его.

Edited June 28, 2009 by Zippovich

[Иван Шумов]

Да, а почему бы нет?

Логотип - согласен, я обычно делаю его png-24 - для лучшего качества. Так же логотип лучше не делать бэкграундом, лучше сделать так, что бы пользователь мог правой кнопкой мыши жмакнуть и скачать его.

полностью неправ - это ОЧЕНЬ большой размер - пользователь задолбается ждать пока оно грузится

[psywalker]

Ребят извините, но вы меня запутали, значит:

1) Логотип лучше делать картинкой или бекграундом?

2) Я вырезал четыре большие картинки, потому что подумал, что если я сделаю не четыре, а например Две, то сайт будет грузиться очень долго. Правильно ли я сделал или нет?

Иван Шумов

Спасибо и тебе друг, а скажи пожалуйста:

1)

Цитата

1) уголки можно было сделать 8-и битной прозрачностью которую понимает IE6

А можно поподробнее, очень интересно и позновательно

2)

Цитата

2) неприятный косячек, но вполне исправим smile.gif http://floomby.ru/content/iqN1QJH5xE/ с ним у меня в свое время появилась некоторая морока

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

3)

Цитата

3) лого типа файла я вно не JPG надо было делать.

Извини, не понял, о чём речь?

4)

Цитата

6) в цитате при большом количестве текста http://floomby.ru/content/XbO0qyfMb0/

Вот тут вообще отдельный разговор, я значит понял так, либо я прибиваю подвал к низу навечно и тогда при заполнении цитаты будет такая какашка, либо я делаю подвал потоком и тогда при пустой середине он будет сверху соответственно, но зато Цитата при заполнении не будет касячить, по другому мне не удалось разобраться с этой проблемой, если подскажите, как мне убить двух зайцев, буду рад!

Edited June 29, 2009 by psywalker

[Иван Шумов]

ну, отвечаю

-- есть PNG-8, PNG-24 и PNG-36(если память не изменяет) в общем это то-ли при создании файла в фотошопе определяется, то-ли при сохранении. поищи. а вообще IE6 понимает прозрачность PNG-8 отсюда и название - 8-и битной прозрачности

-- Цитата - overflow: hidden тебя спасет

-- С высотой - я вставил вертикальную распорку-див

-- лого файла - это я про http://floomby.ru/content/MH0yhVONUe/ там же фон не белый, а прозрачный

Кстате - оЧепятка http://floomby.ru/content/4mQBi4fSzk/

на счет не моих вопросов - ты все правильно сделал, не парься

ЗЫ - добавился бы в кои-то веки мне в аську - такого верстальщика под рукой иметь всегда полезно

[Константин]

psywalker, по-поводу кривостей в ие6 это у меня эмулятор кривой (блин, я же по нему верстаю ) надо переустановить его мне, он и так ошибки выдавал какие-то. На работе на том же эмуляторе, сейчас все красиво. иль может ты уже переверстал всё)

кстати. если вдруг в ие6 вылез какой-то фигпоймический глюк, попробуй использовать zoom:1; иногда помогает.

Edited June 29, 2009 by Константин

[Great Rash]

Санке-Петербург

[psywalker]

Иван Шумов

Спасибо ещё разок, ошибки поправил кроме блока "Каталоги", как нибудь займусь им.

ЗЫ - добавился бы в кои-то веки мне в аську - такого верстальщика под рукой иметь всегда полезно wink.gif

С удовольствием!

Константин

кстати. если вдруг в ие6 вылез какой-то фигпоймический глюк, попробуй использовать zoom:1; иногда помогает.

Давно уже юзаю его и кстати из хаков только его и юзаю, остальной мусор не признаю просто)))

[Glebr]

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Кодировку смените на windows-1251, а то рядом с копирайтом иероглифы

[psywalker]

Glebr

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Кодировку смените на windows-1251, а то рядом с копирайтом иероглифы wink.gif

Нет, извини друг, но у всех и у меня в частности всё с этим делом в порядке, а во вторых твою кодировку я не признаю, считаю её скудной и неправильной на сегодняшний день! А вот utf-8 как раз то, что нужно...посмотрим, что скажут эксперты и вообще интересно услышать ещё мнения)))

[Иван Шумов]

utf-8 лучше.

[Searcher]

utf-8 лучше.

Однозначно! ))) Хотя с копирайтом что-то с кодировкой не так...

[psywalker]

Searcher

Хотя с копирайтом что-то с кодировкой не так...

А можно поподробнее, где именно траблы, почему я не вижу?

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

Мега круто!

[Searcher]

в FF после "© 2008 "ИзоПрин" вижу коды символов: ““““ ““‹ŒŒ““‹ŒŒ ““‹““‹““‹““‹““‹, и так до "Все права защищены"

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

[psywalker]

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

Спасибо, но Чем же так "Мега круто" прям?

Searcher

в FF после "© 2008 "ИзоПрин" вижу коды символов: ““““ ““‹ŒŒ““‹ŒŒ ““‹““‹““‹““‹““‹, и так до "Все права защищены"

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

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

[Zippovich]

полностью неправ - это ОЧЕНЬ большой размер - пользователь задолбается ждать пока оно грузится

да никто не задолбется, обычно в png-24 логотип занимает от 10-50кб, это оправдывает важность этой картинки. Я сам раньше логотипы делал бэкграундом и мог с фоном заколбасить, но потом пришел к мысли что это не правильно, лого должно скачаться пользователю в хорошем качестве, и размещать его нужно в теге img. Считайте это моим ИМХО, хотя оно так же и не мое.

[amiron]

Если еще интересно насчет ие6, вот скриншот:

http://study-languages-online.com/images/psi-ie6.jpg

т.е. у меня там из информация из футера вверх вылезает, и с оранжевым блоком что-то не то, если сравнить с FF:

http://study-languages-online.com/images/psi-ff.jpg

При обновлении странички в FF (Firefox/2.0.0.20) футер смещается вниз:

http://study-languages-online.com/images/psi-ff-2.jpg

хотя, может быть, это только у меня такой баг

Может быть, это не очень важно, но мне в глаза бросилось, что верхние уголки в оранжевом блоки светлее чем верхний блок между ними.

Ну, и размер странички - 1000 Кб. На работе у меня интернет быстрый, а вот дома я бы ждать не стал. Но здесь это скорее вопрос к дизайнеру.

[psywalker]

amiron

Спасибо друг, всё важно, каждое замечание ценю и постараюсь всё исправить Насчёт веса, это ты прав, притензии к дизайнеру)))

[Glebr]

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

А так неплохо.

[Fu-tai]

пипец, вес страницы метр с гаком, считай модемы отвалились, адслщики на нате тоже забылись. !!!