Резиновые макеты (разметка) для вашего сайта

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

demo

Шаг 1. HTML

HTML


<div class="layout">
    <h1>Варианты</h1>
    <span id="var1"></span>
    <span id="var2"></span>
    <span id="var3"></span>
    <span id="var4"></span>
    <span id="var5"></span>
    <div class="variants">
        <a href="#var1" class="var1"></a>
        <a href="#var2" class="var2"></a>
        <a href="#var3" class="var3"></a>
        <a href="#var4" class="var4"></a>
        <a href="#var5" class="var5"></a>
    </div>

    <div class="columns">
    
        <div class="column" id="left"><img src="post.png" alt="" />
        Demo text content, nothing to read here.</div>
        
        <div class="column" id="right"><img src="post.png" alt="" />
        Demo text content, nothing to read here. </div>
        
        <div class="column" id="center">
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <hr style="clear:both" />
            Demo text content, nothing to read here. </div>
    </div>
</div>

Здесь вы можете увидеть небольшую панель с переключателями (предназначены для выбора варианта разметки), за которыми следуют три колонки с контентом. Что касается контента – то он может быть представлен в виде изображений, текста или других элементов.

Шаг 2. CSS

Теперь поработаем над дизайном нашей страницы. Сперва подготовим базовые стили для нашего трехколончатого макета.

box-sizing
Применяется для изменения алгоритма расчета ширины и высоты элемента.

значения:

content-box: Стандартное CSS: свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ.
border-box: Свойства width и height включают в себя значения отступов (padding) и границ (border), но не полей (margin).
padding-box: Свойства width и height включают в себя значения отступов (padding), но не полей (margin) и границ (border).

CSS

         
.columns {
    overflow: hidden;
    width: 100%;
}
.column {
    border: 1px dashed #CCCCCC;
    min-height: 150px;
    overflow: hidden;
    padding: 10px;
    position: relative;

    /* CSS3 Box sizing property */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;

    /* CSS3 transition */
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.column img {
    float: left;
    margin: 0 10px 10px 0;
}
.column div {
    background-color: #888888;
    float: left;
    height: 80px;
    margin: 0 10px 10px 0;
    width: 80px;
}
#left {
    background-color: #C8FC98;
    float: left;
    width: 25%;
}
#right {
    background-color: #FDE95E;
    float: right;
    width: 25%;
}
#center {
    margin: 0 25%;
}

Как вы можете увидеть – левая и правые колонки имеют определенную ширину (которая выражена в процентах), центральная же определенной ширины не имеет. В этом случае все колонки являются резиновыми. Вскоре я опишу другие варианты, пока же займемся дизайном кнопок; кнопки предназначены для выбора варианта разметки.

CSS

     
.variants {
    height: 32px;
    margin: 20px auto;
    width: 200px;
}
.variants a {
    cursor: pointer;
    float: left;
    height: 30px;
    margin: 0 5px;
    width: 30px;
}
.variants .var1 {
    background-color: red;
}
.variants .var2 {
    background-color: orange;
}
.variants .var3 {
    background-color: pink;
}
.variants .var4 {
    background-color: green;
}
.variants .var5 {
    background-color: blue;
}

Все предельно просто – простые цветные пиктограммы. И наконец – наши резиновые макеты:

Псевдокласс :target
применяется к идентификатору (например, #var1), который указан в адресной строке браузера.

Про Селектор X ~ Y

CSS

    
 /* вариант 1 */
#var1:target ~ .columns #left {
    width: 25%;
}
#var1:target ~ .columns #right {
    width: 25%;
}
#var1:target ~ .columns #center {
    margin: 0 25%;
}

/* вариант 2 */
#var2:target ~ .columns #left {
    width: 50%;
}
#var2:target ~ .columns #right {
    display: none;
}
#var2:target ~ .columns #center {
    margin: 0 0 0 50%;
}

/* вариант 3 */
#var3:target ~ .columns #left {
    width: 18em;
}
#var3:target ~ .columns #right {
    width: 18em;
}
#var3:target ~ .columns #center {
    margin: 0 18em;
}

/* вариант 4 */
#var4:target ~ .columns #left {
    width: 18em;
}
#var4:target ~ .columns #right {
    width: 20%;
}
#var4:target ~ .columns #center {
    margin: 0 20% 0 18em;
}

/* вариант 5 */
#var5:target ~ .columns #left {
    display: none;
}
#var5:target ~ .columns #right {
    width: 18em;
}
#var5:target ~ .columns #center {
    margin: 0 18em 0 0;
}

Заключение

demo

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

Источник

Резиновые макеты (разметка) для вашего сайта

Шаг 1. HTML

Шаг 2. CSS

Заключение

Комментарии к статье