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

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

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

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

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

.someclass{
    display: inline-block;
}

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

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

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%.

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) справа и слева непонятные отступы, причем, чем длиннее была надпись на кнопке, тем боль�?е отступы. Вот как-то так:

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

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

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

�? что же делать? Как привести в чувство этот загадочный �?Е? Ответ как всегда прост и непостижим, как и любое �?аманство, касающееся �?Е. Задайте в ва�?их стилях для кнопок простое свойство overflow: visible. Вуаля, и теперь уже для �?Е придется добавить несколько пикселей справа и слева, чтобы по бокам были отступы

�?так, чтобы убрать ли�?ние отступы в кнопках в браузерах семейства �?нтернет Екслорер версий 6 и 7 надо добавить в стили для этих кнопок свойство overflow: visible и поправить отступы, которые теперь нам полностью подвластны.

На живом примере разницу увидят только обладатели �?Е6-�?Е7 (на �?Е5 не проверял ибо нех (написал это и проверил-таки — �?Е 5.01 — сакс, �?Е 5.5 подобен �?Е6 — но все равно нех уже))
button

button — ли�?ние отступы чудесным образом пропали

submit type submit

submit type submit

На сайте я немного необычно, как мне кажется, сделал меню (первый его уровень). Как обычно, я старался умень�?ить количество картинок, используемых для создания меню. �? делая это меню, я еще не использовал 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 отнюдь нет.

Выглядит это как-то так

Поместим второй DIV внутрь первого

Если ва�? браузер поддерживает стандарты в полной мере, то вы увидите

Если же нет и вы пользуетесь �?Е6 или даже еще более ранней версией �?нернет Експлорера , то ва�?им глазам предстанет следущая картина

Как видите �?Е6 растянул родительский контейнер по �?ирине содержимого.

Чтобы этого не происходило добавим внутрь контейнера еще один блок.

HTML

<div class="parent">
На�? контейнер
    <div class="wie6">
        <div class="child">
        Вложенный элемент
        (пусть тоже будет DIV)
        �?ириной в 250 пикселей</div>
    </div>
�?ириной в 200 пикселей
</div>

�? зададим указанным классам следущие свойства

CSS

<style type="text/css">
.parent {
	background:#afa;
	border:1px solid #000;
	width:200px;
}
.child {
	background:#aff;
	border:1px solid #f00;
	width:250px;
}
/* trick */
.wie6 {
	margin-right:-999px;
	position:relative;
	width:100%;
}

Откроем пример в �?Е6 и о чудо. Родительский контейнер сохранил свою �?ирину в целости, а вложенный блок не обрезался и никуда не пропал

Предлагаемый способ не идеален (а есть ли другой?) и требует дополнительной разметки. Но на что не пойде�?ь, чтобы уважить пользователей �?Е6.

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

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

Так это выглядит в браузере

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

Для чего в рецепте элементы DIV оборачиваются в INS? Дело в том, что применяемое свойство display: inline-block в Internet Explorer не действует на блочные элементы, такие как DIV, а только на строчные. INS же элемент строчный, но может быть контейнером для блочных, не нару�?ая стандартов (что нельзя помещать блочные элементы внутрь строчных). Эта особенность INS плюс особенность поведения display: inline-block-элементов — вот и весь трюк)

�? опять но. А зачем, собственно, использовать DIV, если картинки с описаниями можно поместить в SPAN, который элемент строчный и на, него соотвественно действует display: inline-block. Ведь для чего предназначен INS? Теги INS и DEL предназначены для выделения добавленных или удаленных частей документа, соотвественно. Обычно, INS выделяют подчеркиванием текста, а DEL выглядит как зачеркнутый текст. Оба элемента имеют особые атрибуты cite (URI, отсылающий к документу, объясняющему причину изменения) и datetime (дата внесения изменения). �? использование INS таким образом, как описано в техногрете, существенно нару�?ает семантику документа. �? при этом добавляет ли�?ний код в HTML.

Но предположим, что для описание картинки нам необходимо использовать заголовок (любого уровня). Тогда, соблюдая требования стандарта, что нельзя помещать блочные элементы внутрь строчных, нам придется использовать DIV вместо SPAN. Получается, что display: inline-block работать не будет и нам придется использовать трюк с INS? Вовсе нет. Вместо того, чтобы портить HTML мы воспользуемся неболь�?им трюком в CSS. Трюк простой и забавный, как все, что касается Internet Explorer, но эффективный. Напи�?ем в на�?ем файле стилей следущее:

.some_class {
    display: -moz-inline-stack;
/*на мой взгляд малонужное правило для файрфокса 2
*/
    display: inline-block;
/*для браузеров, которые понимают, в том числе �?Е8*/
}
/** и вот трюк (можно написать в файле стилей для �?Е,
*  подключаемом через условные комментарии
*  или же используя хаки)
*/
/*стили для �?Е6 и �?Е7 */
.some_class {
    display: inline;
}

�? все чудесным образом заработает.

Что неприятно удивило, так использование BR, чтобы картинка и подпись к ней располагались на разных строках. Ведь и так уже обернули картинку и текст в ссылки по отдельности. Так почему бы не задать одной из ссылок, или обеим, display: block. Зачем плодить мусор в коде в виде BR. А еще луч�?е задать display: block; картинке и обернуть и картинку, и текст в одну ссылку

В итоге можем получить короткий и кроссбраузерный код

Вариант без учета ФФ2

HTML:

<a href="#someURI" class="thumbnail">
    <img src="someImage" />
    описание картинки
</a>

CSS

.thumbnail {
    display: inline-block;
	}
    .thumbnail img {
    	dispaly: block;
        }

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

Если же нам понадобится добавить поддержку ФФ2 и в качестве контейнера использовать DIV, то пример немного усложниться, но все равно останется компактнее.

Inline-block с поддержкой Файрфокс 2

HTML

<div class="thumbnail">
	<a href="#someURI">
    	<img src="someImage" />
        описание картинки
	</a>
</div>

CSS

.thumbnail {
	display: -moz-inline-stack;/*ФФ2*/
    display: inline-block;
	margin:2em  0 0 2em;
	}
    .thumbnail img {
    	display: block;
        }
	/* hack section )*/
	/** с некоторых  пор я предпочитаю хаки в стилях
	  * условным комментариям для подключения стилей
	  * почему? будет время - будет пост
	 */
@-moz-document url-prefix() {
    .thumbnail a {
        display: block;
/*нужно для ФФ2, чтобы привести в чувство -moz-inline-stack*/
    }
    .thumbnail a {
        position:relative;
/* фигасе, это нужно для ФФ2, чтобы он увидел ссылку */
    }
}
/*IE 7*/
*+html .thumbnail {
    display:inline;
    }
/*IE 6*/
* html .thumbnail {
    display:inline;
    }

хотя можно и проще

.thumbnail {
    //display:inline;
    }

эту запись поймут только �?Е7 и �?Е6

А вот и неболь�?ой пример, по максимуму приближенный к техногретному. За одним исключением — я не задал �?ирину для .thumbnail.

Когда уже заканчивал редактировать, наткнулся на вот такой вот пост. Более подробно, луч�?е оформлено, но по аглицки. Зуб даю), что все изложенное вы�?е добыто потом и кровью, а не скопипастено.

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

Названия товаров не помещаются и просто обрезаются свойством 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