Записи с метками ‘верстка’

Название Censored

Вторник, 1 июня 2010

Очень долгий проект – первые страницы были сделаны еще в начале декабря 2008, некоторые добавления уже в конце мая 2009. Всего около 30 шаблонов.
Вплотную познакомился с jQuery. Конечно, код не кодерский, но вполне работоспособный.
Как обычно кастомные контролы, закругления и тени. Что мне понравилось, как я сделал, так это выбор города и упрощенный «аккордеон» собственного изготовления. Готовые аккордеоны не устроили своей громоздкостью и множеством излишеств. В моем варианте весь аккордеон занял полтора десятка строк.

jQuery('a', '#accord').each(function(){
        if ($(this).next('ul').length > 0)
            $(this).css({
                color: '#000'
            });
        $(this).click(function(event){
            if ($(this).next('ul').length > 0) {
                event.preventDefault();
            }
            $(this).addClass('selected');
            $(this).next().show('slow');
            $('ul', $(this).parent().siblings()).hide('slow');
            $('a', $(this).parent().siblings()).removeClass('selected');
        })
    })

Все остальное просто  добротная верстка. Вот пример страницы.

главная страница сайта

главная страница сайта

Что мне не нравится на этом сайте — это огромные формы. Мне трудно представить, что  кто-то станет заполнять их полностью. Например вот такую

пример формы

пример формы

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

Метки: , , , , ,
Написано в портфолио | 5 комментариев »

Еще раз про inline-block (коротко)

Среда, 19 августа 2009

Сегодня в очередной раз задали вопрос: как кроссбраузерно реализовать свойство inline-block. Для этого воспользуюсь хаком для ИЕ 6 и 7 версий. Это необходимо, так как ИЕ этих версий не понимает inline-block для блочных элементов, таких как DIV, LI, UL, а только для строчных (например:A, SPAN). Буду предельно краток.

.someclass{
    display: inline-block;
}

.someclass{
    //display: inline;/*магия ИЕ*/
}

Именно вот так: в таблице стилей должны присутствовать обе записи. Если же вы предпочитаете условные комментарии, то вторая запись должна быть вынесена в стили для ИЕ.
Работает в ИЕ6+, ФФ3+, Опера (даже не знаю с какой версии), Хром, Сафари, далее – везде).
Для ФФ2 нужен костыль

Метки: , , , , , , ,
Написано в CSS, верстка | 2 комментариев »

Равномерно расположить картинки по ширине страницы

Суббота, 25 июля 2009

Бывает, возникает вопрос (по «вине» дизайнеров или заказчиков), что картинки надо расположить по ширине страницы (ну или родительского контейнера) равномерно, то есть первая (для читающих слева направо) картинка должна быть выровнена по левому краю, последняя – по правому, а остальные – находится друг от друга и от крайних на одинаковом расстоянии. Вот как-то так:

fig Самый простой вариант, который я сам использую – это использовать таблицу. Это, так скажем, не самое правильное использование таблицы, но зато самое простое и наименее времезатратное, что бывает важно.

Создадим табличку на пять ячеек и в каждую поместим по картинке. Выровняем картинки по центру ячеек (td {text-align: center}), а таблицу растянем на всю ширину (table {width: 100%})

fig2

Сейчас между картинками одинаковое расстояние, что и требуется. И это нам необходимо сохранить. И при этом крайние картинки должны быть прижаты к краям. Для этого добавим в таблицу пустые ячейки между ячейками, в которых находятся картинки.

fig3 Как и следовало ожидать, и как и должно было произойти (такова природа таблиц: для ячеек, содержащих больше отводится большее место), пустые ячейки сжались до минимальной ширины. Поэтому для ячеек с картинками создадим класс, которому зададим свойство width:1%. Опять воспользуемся свойством таблиц: несмотря на указание ширины ячейкам, эти ячейки будут растянуты по ширине содержимого, если только таблице на задано свойство table-layout:fixed.

fig4 Вот мы и получили, что требовалось. Уберем границы у ячеек, которые были добавлены для наглядности, и можно использовать. Но, конечно, надо подумать, как избавиться от таблицы при верстке подобной задачи.

Метки: ,
Написано в CSS, верстка | 2 комментариев »

Отступы в кнопках в ИЕ и других

Четверг, 18 июня 2009

Небольшое предисловие. Так случилось, что я подписался на сайте WSG на мейл-лист для обсуждения различных вопросов, связанных с применением веб-стандартов в ежедневной практике. Да, в этой подписке случаются интересные обсуждения, но зачастую там появляются вопросы настолько простые, что даже становится как-то неловко за авторитет уважаемой WSG. Вот и в этот раз вопрос был просто потрясающим: можно ли использовать картинку-бекграунд для кнопки с нефиксированной шириной. Но не это меня побудило меня черкануть пару строк. В одном из ответов, как лучше все сделать проскользнул совет:

Something like this (как-то так):
button {padding:2px 5px;background: #FAF9F5 url(../images/bgimg.png) repeat;line-height: 1.5;
}
then use smaller padding left/right value for IE, e.g. (и потом уменьшите отступы для ИЕ)
button {padding: 2px 1px !important}

Вот последняя строчка и вызвала мое изумление. Уважаемый подписчик WSG не знает как можно избавиться от лишних отступов по бокам в кнопках в Интернет Експлорере.

Поясню в чем дело. Интернет Експлорер в версиях до 7 включительно добавлял в кнопках (будь то input, илиbutton) справа и слева непонятные отступы, причем, чем длиннее была надпись на кнопке, тем больше отступы. Вот как-то так:

лишние отступы в кнопках в браузерах Интернет Експлорер 5-7

лишние отступы в кнопках в браузерах Интернет Експлорер 5-7

Тогда как в остальных браузерах (для меня это Файрфокс, Опера и Хром) все выглядит так:

отступы в кнопках в файрфоксе

отступы в кнопках в файрфоксе

Никаких непонятных отступов, все одинаково, независимо от количества знаков в надписи.

И что же делать? Как привести в чувство этот загадочный ИЕ? (далее…)

Метки: , , , ,
Написано в CSS, верстка | 6 комментариев »

Геоинформационная Система Инвестора Санкт-Петербурга

Понедельник, 8 июня 2009

Состоит из двух частей: непосредственно сайт и картографический модуль. (http://www.investinfo.spb.ru/ru/about/info/  и http://map.investinfo.spb.ru/mapview/ соответственно)

На сайте я немного необычно, как мне кажется, сделал меню (первый его уровень). Как обычно, я старался уменьшить количество картинок, используемых для создания меню. И делая это меню, я еще не использовал CSS-свойство clip. Думается мне, что это свойство мне могло пригодится. Но обошелся и без него, сделав все кроссбраузерно, использовав минимум картинок, причем PNG с альфа-каналом. Вот из-за альфа-канала весь сыр-бор, как обычно. Как известно ИЕ6 не поддерживает альфа-прозрачность в PNG напрямую, а только через проприетарные майкрософтовские фильтры. И поэтому не получилось просто сдвигать фон пунктов меню, как обычно это делается для меню, реализованных фоновыми картинками. Ну раз нельзя двигать фон, будем двигать целиком элемент, в котором фоном будет необходимая нам картинка.

Итак, делаем картинку, состоящую из двух частей: одна с белой надписью, вторая с красной (синий фон добавлен, чтобы читалась белая надпись, но синий в данном случае означает прозрачный).

пункт меню

Высота картинки равна двойной высоте меню (в данном случае 51 пиксель). Создаем в таблице стилей описание для элемента, фоном которого будет наша картинка. Размеры элемента равны размеру картинки. Это необходимо для, чтобы пнг-фильтр для ИЕ6 отобразил картинку полностью. И теперь нам только остается сдвигать этот элемент с фоном при наведении на соответсвующий пункт меню.

иллюстрация к идее

иллюстрация к идее

Чтобы показать как все это ведет себя в браузере воспользуюсь возможностями FireBug.

исходное состояние. элемент с необходимым фоном подсвечен голубым цветом

исходное состояние. элемент с необходимым фоном подсвечен голубым цветом

Красным обведены стили, отвечающие за исходное состояние.

наведенное стояние пункта меню

наведенное стояние пункта меню

Как видите (обведено красным), я поспользовался отрицательным <code>margin</code>, чтобы сдвинуть элемент с фоном и показать красную надпись.

Вот такой вариант мне пришел в голову, когда я верстал этот макет. И вот итог работы.

макет главной страницы

макет главной страницы

Что касается карты, то в ней единственной сложностью было, что приходилось работать через удаленный рабочий стол, имея не очень хорошо сгенеренный картографическим модулем HTML. Пришлось много перелопачивать уже готовых шаблонов вывода результатов. Но общий каркас мне удался) Аж самому понравилось. К тому же было принято несколько моих предложений по, как мне кажется улучшению интрефейса. И верстка получилась в общем компактная, вполне себе семантичная. И почти без Expressions для ИЕ6) В общем смотрите, любуйтесь, что понравилось — используйте. К сожалению в статичном варианте раздела карты у меня нет, по причине укзанной выше. Все делалось наживую на удаленном сервере. Но будет время, соберу воедино все стили и всю верстку карты и выложу на общее обозрение.

карта Геоинформационной Системы Инвестора Санкт-Петербурга

карта Геоинформационной Системы Инвестора Санкт-Петербурга

При верстке карты обнаружил забавную мелочь: из всех браузеров, которые у меня установлены (ИЕ6-8, ФФ 2-3,5. Опера 9.2-10, Хром 3.0.183.1 и Сафари 4 бета (кстати, надо скачать уже не бету)), только Сафари и ИЕ8 понимают свойство background-image для selecta‘а. background-color понимают все, даже ИЕ6, а вот background-image отнюдь нет.

Метки: , , ,
Написано в c0nstant.in, портфолио | Нет комментариев »

Факультет – новая литература нового поколения

Среда, 3 июня 2009

Давно длится проект (с марта месяца 2009 года), для которого сверстал общий макет и несколько внутренних страниц. Особенностями проекта по верстке я бы назвал обилие закругленных уголков на различных, местами неоднородных, фонах. Макет тянущийся с прижатым к низу страницы футером. Да, чуть не забыл, ко всему прочему здесь еще и «кастомные контролы» присутствуют. Как ни убеждай дизанеров, что «кастомные контролы» – это зло, а клиент всегда прав.

макет главной страницы

макет главной страницы


типовая страница

типовая страница


личный кабинет

личный кабинет


книжная полка пользователя

книжная полка пользователя

Метки: , , , , ,
Написано в c0nstant.in, портфолио | Нет комментариев »

Как заставить ИЕ6 держать указанную ширину?

Четверг, 23 апреля 2009

Есть у ИЕ6 такая особенность: если какому-либо блоку задать ширину, то ИЕ6 воспринимает эту ширину, как минимально возможную и, если содержимое блока оказывается шире заданной ширины, то ИЕ6 растягивает блок до размеров содержимого. Тогда как другие браузеры, в полном соответствии стандартам сохранят указанную ширину, а содержимое просто покажут выступающим за пределы блока (если не указано свойство overflow, отличное от значения visible (значение по умолчанию)).

(далее…)

Метки: , ,
Написано в CSS | 1 комментарий »

Я бы сделал лучше 2)

Среда, 8 апреля 2009

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

Что же мне не понравилось в это раз? Ну, ни то, что не понравилось, но все же.

Приводится способ выравнивания блоков с картинками по центру родительского контейнера. Что ж, хороший способ применения нечасто используемого свойства inline-block. Но…

Так это выглядит в браузере демонстрация выравнивания блоков с картинками по центру

Рецепт основан на двойственной природе элемента INS. Как известно элементы INS и DEL могут быть как блочными (display: block), так и строчными (display: inline). При этом, будучи строчными, они могут быть контейнерами для блочных элементов, таких как DIV или P. Впервые подобный трюк я увидел около двух лет назад у Stuart Nicholls. Там была необходимость расположить по центру меню из табов при произвольной общей ширине меню. К сожалению, это пример был пересмотрен 24 января этого года)). Я сам использовал этот прием на своей народовской страничке (не смеяться!!!). Что забавно, в новом способе центрирования меню использован метод, который я впервые увидел у Лебедева. Но вернемся к нашим баранам.

(далее…)

Метки:
Написано в CSS | 5 комментариев »

Я бы сделал лучше)

Среда, 25 марта 2009

Студия Лебедева порадовала нас новым творением — обновился интернет-магазин Техносилы. Все мило и, как обычно в последнее время у Лебедева, лаконично, но…

Что мы видим на первой же странице:

technosila1

Названия товаров не помещаются и просто обрезаются свойством overflow: hidden
Не очень красиво, я бы сказал. Но ведь есть же замечательное, но крайне редко используемое (мне ни разу не попадалось на глаза его использование) свойство text-overflow: ellipsis. Что удивительно, его (это свойство) поддерживает дружное семейство браузеров по имени Internet Explorer. Это свойство имеет два (согласно с сайтом MS) значения: clip (по умолчанию) и   ellipsis, что в сочетании со свойством  overflow: hidden дает замечательный результат: текст, который не помещается в каком-либо элементе обрезается с заменой последних символов на многоточие!!! Получается очень аккуратно и симпатично.
А вот и примеры:

Без применения overflow и text-overflow

Съешь еще этих мягких французских булок

Теперь установим overflow: hidden и text-overflow:clip; (поведение по умолчанию)

Съешь еще этих мягких французских булок

И наконец требуемый результат в результате применения overflow: hidden и text-overflow:ellipsis;

Съешь еще этих мягких французских булок

Некоторые браузеры, в частности Opera, требуют своего префикса для этого свойства. MSDN рекомендует так же использовать префикс -ms для ИЕ8, но понимает это свойство и без него

Проверил, что Хром 2 и Сафари 4 понимают без префиксов, а ФайрФокс 3 не понимает вовсе

Но если не использовать это свойство, то хотя бы снабдить заголовок соответствующей всплывающей подсказкой, хотя бы в виде title

Метки: ,
Написано в CSS | 3 комментариев »

CSS Guru работает на WordPress. Локализация Lecactus.ru
Записи (RSS) и Комментарии (RSS).