Резиновые вкладки на css
Задача: реализовать вкладки. Предположим вкладок должно быть 2. Ширина вкладок заранее неизвестна и формируется в зависимости от содержащегося в них текста. Текст должен отображаться полностью. При сжатии окна браузера, вкладки должны одновременно уменьшаться, обрезая текст, который находится в них. Сжиматься вкладки должны до минимально-возможных размеров. Оставаться должны всегда рядом (одна слева, другая справа). Визуально так:
И теперь как они должны отображаться при сжатии окна браузера:
Без лирики, код целиком:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <style> .tabs { margin:10px; } .tabs div { height:20px; padding:10px 3px; border:1px solid #333; border-radius:5px 5px 0 0; margin-right:10px; float:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:39%; } </style> </head> <body style="margin:0; padding:0; height:100%;"> <div class="tabs"> <div class="first-tab">Содержимое первой вкладки</div> <div class="second-tab">Содержимое второй вкладки + что-то еще</div> </div> </body> </html>
Теперь отдельно html:
<div class="tabs"> <div class="first-tab">Содержимое первой вкладки</div> <div class="second-tab">Содержимое второй вкладки + что-то еще</div> </div>
Здесь все просто. 3 блока. 1 родительский с классом tabs, 2 дочерних внутри. Каждый дочерний представляет 1 вкладку.
Теперь css:
.tabs { margin:10px; } .tabs div { height:20px; padding:10px 3px; border:1px solid #333; border-radius:5px 5px 0 0; margin-right:10px; float:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:39%; }
Вот это надо разобрать
margin:10px;
Добавляем внешний отступ в 10 пикселей со всех сторон от наших вкладок (от родительского элемента, который обертывает наши вкладки)
height:20px;
Высота вкладок - 20 пикселей
padding:10px 3px;
Внутренние отступы в каждой из вкладок - сверху и снизу - по 10 пикселей, справа и слева по 3 пикселя
border:1px solid #333;
Свойство добавляет сплошную рамочку толщиной в 1 пиксель
border-radius:5px 5px 0 0;
Это скругление углов нашей рамочки для вкладок (добавим немного красивости)
margin-right:10px;
Отступ справа, чтобы вкладки не прижимались друг к другу
float:left;
Обтекание слева, чтобы наши вкладки встали рядом друг с другом (параллельно задает нужное нам свойство - это ширина вкладки зависит от содержимого в нем контента, так как блочные элементы без обтекания автоматически растягиваются на всю ширину родителя)
white-space:nowrap;
Запрет переноса строк на другую строку. Нужно для того, чтобы при сжатии окна браузера слова не падали вниз (хоть они и не будут видны), а уходили за край блока
overflow:hidden;
Это свойство позволяет скрывать слова, которые начинают выходить за край вкладки
text-overflow:ellipsis;
Это новое свойство css3 которое позволяет при скрытии контента, который не влазит в нашу вкладку, красиво обрезать его и добавлять многоточие (...)
max-width:39%;
Вот это интересно - эта максимальная ширина блоков (до которой они могут растягиваться при заполнении текстом - потом не влезающий текст будет обрезаться). Она подбирается вручную путем тестирования в сжатом состоянии окна браузера (чтобы блоки не падали друг под друга). В моем случае это 39%. Если поставить 40, то при сжатии окна браузера почти в самом конце блоки будут падать друг под друга и условие не будет выполнено. А этого допускать нельзя. Вот и все) Ловите демку.