Верстка своего дизайна.


Свершилось!
Цель: сверстать задуманный дизайн и натянуть его на смs Joomla.
Просмотр задуманного дизайна: здесь
Граничные условия:
— поддержка IE6
— кроссбраузерность
— валидность
— правильная семантика

Работу можно посмотреть здесь
Код выкладывать не стану — думаю исходник и firebug все знают.
Кроме этого используется 1 js.
Итого:
1 html — 16кб( вместе с тестовыми топиками)
2 css — 1+12 = 13кб
1 js — 13кб
14 jpg+png — примерно 140кб
Далее краткий разбор:
Фиксированная ширина. Изначально хотел сделать сверх-резину. Ушел от идеи после проблем ие6 столкнувшись с проблемами прозрачности блоков при резине. Впоследствии пожалел, так как прозрачный бордер в конце концов реализовался прозрачным png.
Переверстывал полностью три раза из-за этого. Прозрачность в ие6 можно было реализовать — абсолютным позиционированием и фиксированной шириной.

js использован лишь для того, чтобы в IE6 нормально отображались png.

Кратко по блокам:

Header:
Проблема отображения png файлов в ие6 была реализована js.

Content:
Очень семантически-неприятный код получился при реализации различных wrapper'oв. Набрался опыта, накодился, грабли взяты на учет для последующих дизайнов. В справочник после такого заглядываю редко.
Уверен, что css еще дополнится новыми селекторами при натягивании на cms. Какими предугадать не могу, так как делаю это впервые.

footer:
Долго мученный прозрачный блок в футере не виден. Долго думал как его «проявить», но рациональных решений пока не найдено. Ближайшая идея — это аккуратная фоновая картинка именно по высоте footer'a.

Комментарии (15)

RSS свернуть / развернуть
+
0
Дизайн понравился, особенно если вспомнить самый первый вариант, вот только интересно — а почему снеговик, а не пальмы, я лично ничего против не имею — после такого лета за зимой начинаешь скучать уже сейчас))
avatar

meg

  • 9 августа 2010, 16:16
+
0
)) не наю, може это из-за жары на улице. Все равно ж буду добавлять- доганять по всем сезонам и иконки на все праздники. К верстке это все равно не относится.
avatar

PigmaLion

  • 9 августа 2010, 17:44
  • ↑
+
0

Это так и должно быть?
Вроде как:
Граничные условия:
— поддержка IE6
— кроссбраузерность
Это в мурзилке.
Ну а на счет цветов, мое мнение таково — Вечерний Донецк. Kide меня поймет :)))
avatar

yuginboy

  • 9 августа 2010, 16:38
+
+2
Мну тебя понял и полностью согласен )))

п.с. ИЕ6 в топку
avatar

Kide

  • 9 августа 2010, 16:48
  • ↑
+
0
Отлично!)
На моих IE6 такого не было. (ie 6.0.2900.2180.xpsp_sp2...)
Конкретно
— выпавшего текста из правого верхнего блока
— мутного основного цвета текста.

Исправил — добавил условие в css на цвет основного текста и добавил лишнюю строчку в верхний блок. Должно работать — проверяй.

Кстати о тестировании — пока не нахожу человеческих ресурсов по тестированию онлайн в различных браузерах, все какое-то глючное. Може кто подскажет?
avatar

PigmaLion

  • 9 августа 2010, 17:42
  • ↑
+
0
Chrome:


Epiphany:


Seamonkey:


Только в Хроме не убежал текст.
avatar

yuginboy

  • 9 августа 2010, 17:56
  • ↑
+
0
Мной проверялось в IE6, Chrome, FF, Opera.
Ответ простой я думаю — clear:both; Вряд ли там заморочка серъезней.

Я вставил в еще одну п о п у. Глянь еще разок.
Если не получилось — надо искать нормальные тестовые ресурсы, потому как это тращупанье вслепую получается.
avatar

PigmaLion

  • 9 августа 2010, 18:12
  • ↑
+
+1
Еще парачка тестов на других браузерах.

Firefox на wine:


IE7 на wine:


Ничего не поменялось в тех браузерах, где были глюки. Те сайты, в которых проблем с форматированием нет, отображаются везде одинаково.
avatar

yuginboy

  • 9 августа 2010, 20:47
  • ↑
+
0
Да, конечно с кроссбраузерностью я загнул малехе.

Подправил на IE7 и SeaMonkey. Спасибо за суету.

Кстати о тестировании на различных платформах и браузерах. Монополист на это дело — browsershots. Но он глючит постоянно — много запросов к нему и выдает только скрин-шоты. Когда они расчехлились от очередного эррора я успел снять 60 скринов. Отличная тестилка для ie различных версий — ipinfo.

А ваши морские обезьяны нашел только у друзей убунтоидов, пришлось докучать людям. Все пользуются FF.
avatar

PigmaLion

  • 10 августа 2010, 12:17
  • ↑
+
0
А ваши морские обезьяны нашел только у друзей убунтоидов, пришлось докучать людям.
— дык cygwin в помощь. Там не только макаки есть, там целый зоопарк разных браузеров будет при минимальных хлопотах.
avatar

yuginboy

  • 10 августа 2010, 14:28
  • ↑
+
0
Вот, что стандартно есть в поставках из www-client:
www-client/arora
     Homepage:            http://arora.googlecode.com/
     Description:         A cross-platform Qt4 WebKit browser

* www-client/chromium
     Homepage:            http://chromium.org/
     Description:         Open-source version of Google Chrome web browser

[I] www-client/chromium-bin
     Homepage:            http://code.google.com/chromium/
     Description:         Open-source version of Google Chrome web browser (binary version)

* www-client/ck4up
     Homepage:            http://jue.li/crux/ck4up/
     Description:         Check for Updates on HTTP pages

* www-client/conkeror
     Homepage:            http://conkeror.org/
     Description:         A Mozilla-based web browser whose design is inspired by GNU Emacs

* www-client/dillo
     Homepage:            http://www.dillo.org/
     Description:         Lean FLTK2-based web browser

* www-client/downman
     Homepage:            http://downman.sourceforge.net
     Description:         Suite of programs to download files.

* www-client/elinks
     Homepage:            http://elinks.or.cz/
     Description:         Advanced and well-established text-mode web browser

[I] www-client/epiphany
     Homepage:            http://www.gnome.org/projects/epiphany/
     Description:         GNOME webbrowser based on Webkit

* www-client/epiphany-extensions
     Homepage:            http://www.gnome.org/projects/epiphany/extensions.html
     Description:         Extensions for the Epiphany web browser

* www-client/fetch
     Homepage:            http://cs.nmu.edu/~lhanson/fetch/
     Description:         Fetch is a simple, fast, and flexible HTTP download tool built on the HTTP Fetcher library.

* www-client/firefox
     Homepage:            http://www.mozilla.com/firefox
     Description:         Firefox Web Browser

[I] www-client/firefox-bin
     Homepage:            http://www.mozilla.com/firefox
     Description:         Firefox Web Browser

* www-client/galeon
     Homepage:            http://galeon.sourceforge.net
     Description:         A GNOME Web browser based on gecko (mozilla's rendering engine)

* www-client/htmlview
     Homepage:            http://www.redhat.com
     Description:         A script which calls an installed HTML viewer.

* www-client/httrack
     Homepage:            http://www.httrack.com/
     Description:         HTTrack Website Copier, Open Source Offline Browser

* www-client/icecat
     Homepage:            http://www.gnu.org/software/gnuzilla/
     Description:         GNU project's edition of Mozilla Firefox

* www-client/jd
     Homepage:            http://jd4linux.sourceforge.jp/
     Description:         gtk2 based 2ch browser written in C++

* www-client/links
     Homepage:            http://links.twibright.com/
     Description:         links is a fast lightweight text and graphic web-browser

* www-client/lynx
     Homepage:            http://lynx.isc.org/
     Description:         An excellent console-based web browser with ssl support

* www-client/midori
     Homepage:            http://www.twotoasts.de/index.php?/pages/midori_summary.html
     Description:         A lightweight web browser

* www-client/mozilla-launcher
     Homepage:            http://sources.gentoo.org/viewcvs.py/gentoo-src/mozilla-launcher/
     Description:         Script that launches mozilla or firefox

* www-client/netrik
     Homepage:            http://netrik.sourceforge.net/
     Description:         A text based web browser with no ssl support.

[I] www-client/opera
     Homepage:            http://www.opera.com/
     Description:         A standards-compliant graphical Web browser

* www-client/pybugz
     Homepage:            http://www.liquidx.net/pybugz
     Description:         Command line interface to (Gentoo) Bugzilla

* www-client/rekonq
     Homepage:            http://rekonq.sourceforge.net/
     Description:         A browser based on qt-webkit

[I] www-client/seamonkey
     Homepage:            http://www.seamonkey-project.org
     Description:         Seamonkey Web Browser

* www-client/seamonkey-bin
     Homepage:            http://www.seamonkey-project.org/
     Description:         Mozilla Application Suite - web browser, email, HTML editor, IRC

* www-client/surf
     Homepage:            http://surf.suckless.org/
     Description:         a simple web browser based on WebKit/GTK+

* www-client/surfraw
     Homepage:            http://surfraw.alioth.debian.org/
     Description:         A fast unix command line interface to WWW

* www-client/uget
     Homepage:            http://urlget.sourceforge.net/
     Description:         Download manager using gtk+ and libcurl

* www-client/uzbl
     Homepage:            http://www.uzbl.org
     Description:         Web interface tools which adhere to the unix philosophy.

* www-client/w3m
     Homepage:            http://w3m.sourceforge.net/
     Description:         Text based WWW browser, supports tables and frames

* www-client/w3mir
     Homepage:            http://langfeldt.net/w3mir/
     Description:         w3mir is a all purpose HTTP copying and mirroring tool

* www-client/w3mmee
     Homepage:            http://pub.ks-and-ks.ne.jp/prog/w3mmee/
     Description:         A variant of w3m with support for multiple character encodings

Found 35 matches.
avatar

yuginboy

  • 10 августа 2010, 14:36
  • ↑
+
0
да видел я этот наборчик)
И заметьте valid- верстка.
Ты лучше ответь — теперь хорошо отображается, не съезжает? Пиши — молодчина!
avatar

PigmaLion

  • 10 августа 2010, 16:05
  • ↑
+
0
Теперь вроде нормуль, ячейка таблицы двигается согласно размеру текста.
avatar

yuginboy

  • 10 августа 2010, 18:26
  • ↑
+
+1
SeaMonkey ))) lol.

Давид — молодец! 

.article{
    padding-bottom:20px;
    padding-left:10px;
    padding-right:10px;
    text-align: left;
    }

можно записать как
.article{
    padding:? 10px 20px 10px;
    text-align: left;
    }


? — значение что там сверху у тебя. Не критично абсолютно, но прикольно для сохранения места

открыл в сафари, фф, опере, хром — усьо вроде как шоколадно )

avatar

cyril

  • 11 августа 2010, 02:21
+
0
Сейчас попросил посмотреть статистику по браузерам на сайте у которого с начала месяца 18000 уников. не шибко конечно много, но картину обрисовать хватит ) Там ФФ, ИЕ, Сафари, Хром, Опера… и какая то хрень на 0.3% от кол-во заходов.
avatar

cyril

  • 11 августа 2010, 02:29

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.
Не забываем смотреть статистику:

Яндекс цитирования