fxposter's wave

Вчера наткнулся на сайте Eric IDE (прикольная, довольно легковесная IDE для питона и руби) на достаточно интересную картину, а именно:

Более подробный пример.

Думаю, проблема всем понятна - при указании размера шрифта в процентах (да и в em-ах тоже, кстати говоря) для тех элементов, которые могут быть вложенными приводит к плохим последствиям! Будьте осторожны!

Лично я везде указываю размеры шрифтов в пикселях и на мой взгляд - это вполне оправданно - на моей памяти было мало случаев, в которых размеры шрифтов действительно рассчитывались друг относительно друга (разве что относительно body, но тут уж ничего не поделаешь).

written by fxposter \\ tags: CSS

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

Вот так она выглядит:

А вот и её код:

#nav, #nav * {
  margin: 0;
  padding: 0;
}

#nav {
  overflow: hidden;
  background-color: #FFFFCC;
  border: 1px solid #73B65A;
  margin: 10px 0;
  zoom: 1;
}

#nav li {
  float: left;
  display: block;
}

#nav li a {
  padding: 2px;
  margin: 0 5px;
  display: block;
  height: 100%;
  color: #000000;
  text-decoration: none;
  border-top: 3px solid #FFFFCC;
  border-bottom: 3px solid #FFFFCC;
  float: left;
}

#nav li a:hover {
  border-bottom: 3px solid #73B65A;
}

<ul id="nav">
  <li><a href="...">Гостевая книга</a></li>
  <li><a href="...">Прайс</a></li>
  <li><a href="...">Login</a></li>
</ul>

Пример.

Авось кому-нибудь пригодится.

PS. Менюха на оригинальность и инновационность не претендует!

written by fxposter \\ tags: CSS, HTML, меню

Ищутся книги Эрика Мейера. Вот эти. Особенно хочется почитать Eric Meyer on CSS, More Eric Meyer on CSS и CSS: The Definitive Guide, Third Edition. Кто-нибудь знает, где их можно достать в электронном варианте?

UPD: Теперь хочу Eric Meyer on CSS и CSS Web Site Design.

written by fxposter \\ tags: CSS

Довольно давно я писал о существующем тесте CSS3-селекторов, который показывает, насколько современные браузеры подготовлены к CSS3, а именно к его модулю “Selectors”.

Если вкратце: селектор - это некоторый шаблон (паттерн), который “выделяет” нужные нам обьекты из DOM‘а. Т.е. селектор body div.right “выделит”из DOM’а все блоки div, которые (ясное дело ) находятся внутри тега body и имеют класс right. В CSS3 таких селекторов довольно много. Кому нужно - вот их список.

Так вот, в связи с переходом на линукс, у меня появился новый браузер, а именно Konqueror, на котором я тоже захотел запустить этот тест. Собственно из-за результатов запуска я и пишу этот пост.

Приведу табличку протестированных браузеров:

Тестов, как видно из таблицы, всего 578. Делаем выводы…

Кстати, насчет того, что результаты такие высокие (все-таки до CSS3 еще далеко) - это все благодаря тестам “этот селектор не должен подходить к этому обьекту DOM” (т.е. браузер “валит” тесты, в которых селектор должен подходить, потому что не знает такого селектора, но правильно обрабатывает тесты, в которых не должен - опять же потому что селектора не знает ).

PS. У кого есть возможность и желание - протестите на Safari для винды.

UPD: за результаты тестов на Safari для MacOS благодарим dimm’а :)

written by fxposter \\ tags: CSS

Около недели назад мне вдруг ни с того ни с сего предложили поработать - сверстать один сайт. После верстки главной страницы захотелось выложить это все сюда с комментариями относительно того, как все это версталось, какие мне идеи в голову приходили и т.д.. Теперь вот жалею, что этого не сделал. После того, как было сверстано еще 4 страницы разбираться в css-коде стало проблематично. Сейчас когда я доверстываю главную страницу во второй раз - код все ухудшается и ухудшается, а точнее - он становится все менее подходящим для путеводителя о том, как нужно верстать. Поэтому у меня родилась другая идея … идея о CSS-фреймворке, причем делать я его буду не сам, а вместе с моими знакомыми и читателями этого блога (я надеюсь кто-то все-таки откликнется). Поэтому я планирую начать цикл статей о том, что должен собой представлять собой такой фреймворк. Ну, пожалуй я начну.

Что такое фреймворк

На этот вопрос нам с легкостью поможет ответить моя любимая википедия: “каркас программной системы (или подсистемы). Может включать вспомогательные программы, библиотеки кода, язык сценариев и другое ПО, облегчающее разработку и объединение разных компонентов большого програмного проекта. Обычно объединение происходит за счет использования единого API.”. Говоря проще - фреймворк - это набор программ/кусков кода, которые направлены на решение одной определенной задачи.

Что такое CSS-фреймворк

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

.clear {

    clear: both;

}

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

И третье, что ВОЗМОЖНО стоит вносить в фреймворк - полностью сверстанные html-страницы (например, 3хколоночная, 2хколоночная и т.д.).

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

PS. На данный момент уже есть такие фреймворки, но все по тем или иным причинам меня не устраивают. Хочется объединить уже сделанное и добавить своего. :)

PPS. Кому все-таки интересна моя текущая работа: список страниц, которые уже сделаны, либо делаются.

written by fxposter \\ tags: CSS

Там помнится кто-то хотел, чтобы я о CSS и верстке страниц писал… Скоро (где-то в течении недели) вы все увидите… ;)

written by fxposter \\ tags: CSS, Markup

Такс… Много чего обещал. Буду исправлятся.

Планы на эту и следующую неделю таковы:

1. CSS, если найду дизайнера
2. C++
   1. Класс графа (если честно, сделанный так сяк, сил уже нет моих лабы делать)
   2. Класс-обертка для работы клавиатурой
   3. Поиск подстроки в строке за сублинейное время - поглядим, как получится

Отложенные:

1. PHP
   1. Zend Framework ModelDb-класс, боюсь просто не осилю продолжение
   2. Краткий обзор CodeIgniter, тоже будет, но не в ближайшие 2 недели

Пока что все. Что будет дальше - как жизнь покажет.

written by fxposter \\ tags: C++, CodeIgniter, CSS, PHP, Zend-Framework

Если хотите узнать, какие селекторы поддерживает ваш браузер - http://www.css3.info/selectors-test/test.html.

На XHTML.ru нашел сводную табличку по браузерам. Мой любимый FF2 впереди ;)

written by fxposter \\ tags: CSS

Что ж, большая половина сессии прошла, а у меня так и висят заказы по работе, которые у меня появились еще где-то в начале сессии, а некоторые и того раньше.

На данный момент ведется 2 проекта. Один из них уже готов, осталось контентом наполнить, но зная заказчика - контент я могу ждать очень долго. А пока что можете посмотреть на дизайн и верстку - http://agiscentre.com/. Второй же - пока что секрет.

PS. Как оказалось, таблицами я верстать не умею :) С помощью CSS мне как-то приятнее и удобнее, хоть и сложнее. Я аж сам удивился… За это спасибо Ивану Сагалаеву и Gansik‘у.

written by fxposter \\ tags: CSS