Недавно коллега из соседнего отдела попросил меня помочь ему с версткой одного блока. Он хотел разобраться с основами семантической верстки и сверстать этот блок аккуратно и красиво. Однако блок оказался совсем не прост для верстки — в нем сочетались скругленные уголки и градиентные бордеры. Я отправил коллегу верстать таблицами, а сам предлагаю устроить мастер-классы, кто сможет предложить наиболее оптимальное решение данной задачи.
Под катом скриншот задачи и ссылки на .psd и мой вариант решения
Мой вариант решения содержит 10 контейнеров и 6 правил-исключений для IE 6 (не очень оптимально имхо)
UPD: Описываю ТЗ:
Итак, кажется идеи иссякли, и можно теперь объявить результаты.
Как я и говорил, мой вариант оказался нисколько не оптимальным, более того, требует дописания expression для IE 6.
Порадовало же то, что все-таки были представлены достойные варианты решения:
Спасибо вам за мастер-классы, постараюсь добавить вам кармы, если моих остатков хватит для этого=)
Под катом скриншот задачи и ссылки на .psd и мой вариант решения
Мой вариант решения содержит 10 контейнеров и 6 правил-исключений для IE 6 (не очень оптимально имхо)
UPD: Описываю ТЗ:
- Блок расширяемый как по ширине, так и по высоте (в зависимости от текста)
- Уголки и бордюры вставляются картинками
- В содержании блока заголовок и текст
Итоги
Итак, кажется идеи иссякли, и можно теперь объявить результаты.
Как я и говорил, мой вариант оказался нисколько не оптимальным, более того, требует дописания expression для IE 6.
Порадовало же то, что все-таки были представлены достойные варианты решения:
- rmaksim предложил такой вариант, а также два своих варианта, последний с использованием спрайтов, имхо очень элегантно
- dmitriykikkas сослался на Лебедева. У них конечно работающий везде код, но вот понять, как это сделано, на мой взгляд совсем непросто
- hlomzik предложил тоже красивый вариант, только меня смущает там нижний div с текстом, но его можно кажется просто заменить на пустые контейнеры безболезненно=)
- И последний вариант от gen
Спасибо вам за мастер-классы, постараюсь добавить вам кармы, если моих остатков хватит для этого=)