Веб-студия или digital-агентство Funcky Studio. Разработка сайтов и фирменного стиля, продвижение и сопровождение, 3d-дизайн.

  • Увеличить размер шрифта
  • Размер шрифта по умолчанию
  • Уменьшить размер шрифта
Главная Статьи Резиновая шапка сайта: CSS-трюк: IE, таблица и "резиновые" изображения

Резиновая шапка сайта: CSS-трюк: IE, таблица и "резиновые" изображения

Рассмотрим пример. Суть заключается в следующем:
У нас имеется “резиновая” страница, которая растягивается на всю ширину окна браузера.
Имеем таблицу с шириной 100%.
В таблице имеем ряд из 5-ти изображений (в нашем примере их реальная ширина – 250 пикселей), и необходимо, чтобы при изменении ширины окна браузера эти изображения растягивались или сужались пропорционально, заполняя всю ширину таблицы. Реализуется это следующим простым способом:
HTML:

<table>
<tr>
<td><img src="/1.jpg" alt="" /></td>
<td><img src="/2.jpg" alt="" /></td>
<td><img src="/3.jpg" alt="" /></td>
<td><img src="/4.jpg" alt="" /></td>
<td><img src="/5.jpg" alt="" /></td>
</tr>
</table>

CSS:

table {
width: 100%; /* растягиваем таблицу на всю ширину контента */
border-collapse: collapse; /* схлопываем границы ячеек */
}
table td {
padding: 0 10px; /* для красоты добавляем отступы в ячейках */
}
table img {
width: 100%; /* растягиваем изображение на всю ширину ячейки */
}

Все замечательно, за исключением одного “но” – если смотреть этот пример в браузере IE6 или IE7, вы заметите, что при сужении окна браузера ширина изображений в определенный момент “застревает” и не они не сужаются дальше, в результате чего таблица вылазит за пределы контента.
Это не что иное, как очередной баг всеми “любимого” браузера – изображения не сужаются дальше их фактического размера. В нашем случае это 250 пикселей.
Ну а трюк, который позволяет исправить это недоразумение, заключается всего в одной строчке CSS-кода, который нужно применить к таблице, в которой расположены наши изображения:

table {
width: 100%;
border-collapse: collapse;
table-layout: fixed; /* вот оно, лекарство от недуга IE6 и IE7 */
}

 

Интересное

Рады Вам сообщить, что теперь в разработке Вашего логотипа или фирменного стиля в Кирове может принять участие до 30-50 опытных дизайнера, что позволит на выходе получить до 50-60 вариантов Вашего логотипа и фирменного стиля, а также полного брендбука под любые цели! Это позволит получить уникальную концепцию Вашего бренда и стать яркой компанией на фоне блеклых конкурентов! Помните, что любой успех начинается с деталей, а логотип и фирменный стиль - это наиболее важная деталь любого долгоиграющего бренда. Помните это, и не разрабатывайте дешевые и плохо выполненные логотипы, ведь это отражается не только на Вашей компании, но и на облике Вашего города, так как логотип и фирменный стиль могут стать украшением города, а могут и не только не украсить, но и мозолить глаза, что негативно отразиться на лояльности Ваших будущих клиентов!