Пример полурезиновой верстки сайта

Рассмотрим верстку на примере сайта из 5 основных частей:

шапка (header)
левая колонка меню (left menu)
контент (content)
правая колонка рекламы (right advertise)
нижняя часть сайта (footer)

HTML-верстка:

<html>
  <head>
    <link rel="stylesheet" href="style.css">
   </head>
   <body>
    <div class="wrapper">
        <div class="head">Sitename</div>
        <div class="column left">
            <a href="#">Menu #1</a><br>
            <a href="#">Menu #2</a><br>
            <a href="#">Menu #3</a><br>
            <a href="#">Menu #4</a><br>
        </div><div class="main-content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat.
            <img src="http://gohtml.ru/images/news/95-vehicles.jpeg" />
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
            dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
            sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div><div class="column right">
            <div class="<span>some-ads</span>">Advertise #1</div>
            <div class="<span>some-ads</span>">Advertise #2</div>
            <div class="<span>some-ads</span>">Advertise #3</div>
        </div><div class="footer">
            Firmname &copy; Year.Month.Date
        </div>
    </div>
  </body>
</html>

Интересное в предыдущем листинге: <a href="#"> - ссылка такого вида не будет вести на другие страницы. Это "ссылка-заглушка". Важно: следите, чтобы между закрывающим и открывающим тегом не было пробелов или других символов. Эти символы создадут пустое пространство между блоками. В таком случае, при верстке "пиксель в пиксель", ширину блоков придется урезать. Полезное место и красота верстки будут потеряны.

...
</div><div class="main-content">
    Между закрывающим и открывающим тегом нет пробелов/переносов строк и т.д.
</div><div class="column right">
...

Оформление style.css:

.head, .column, .main-content, .footer{
        padding:10px 3% 10px 3%;
        color:#777;
        vertical-align:top;
        text-align: left;
    }
    .wrapper{
         background:#fafafa; 
    }
    .wrapper div:hover{
        background:#f0f0f0; 
    }
    .head{
        font-weight:700;
    }
    .column{
        display:inline-block; 
        width:14%;
    }
    .main-content{
        display:inline-block; 
        width:54%;
    }
    .<span>some-ads</span>{
        padding:10px;
    }
    .<span>some-ads</span>:hover{
        background:#ddd !important;
    }
    img{
        display: block;
        width: 100%;
    }

Интересное выше: .head, .column, .main-content, .footer - перечисление элементов, к которым будет применено одни и теже свойства. .wrapper div:hover - вложенность элементов. Это свойство применится только к блокам div (к тому же только, если на них навели курсором) background:#ddd !important; - указывает на то, что нужно использовать именно это свойство(в целом использовать !important крайне нежелательно, т.к. потом это свойство переопределить намного сложнее обычных) Например:

div{
   background:#faa !important;
   background:#aaf;
 }

Не смотря на то, что цвет background:#aaf; переопределяет описанное до этого свойство background:#faa !important;, верхнее свойство будет использоваться при окрашивании фона блока (так как !important повышает его приоритет) Результат верстки:

Sitename

Menu #1
Menu #2
Menu #3
Menu #4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Advertise #1

Advertise #2

Advertise #3

Если изменять размеры этого блока, то будет видно, что верстка внутри резиновая. Теперь можно сделать основной блок частично резиновым. С этим нам помогут свойства max-width, min-width. Использовать их нужно так:

.wrapper{
    min-width:350px;
    max-width:850px;
 
    /* Необходимо задать % базовой ширины */
    width:80%;
 
    /* Расположит блок в центре элемента-родителя */
    margin: 0px auto;
}

В таком случае, при размере .wrapper'а от 350px до 850px ширина его будет равна 80% от ширины родителького. Если родительский элемент слишком большой или маленький, то ширина .wrapper'а не выйдет за эти границы. Поэтому такая верстка и является частично резиновой. Спасибо за внимание.

Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне e@gohtml.ru

Случайные уроки по этой теме:

Что такое теги HTML теги video, audio Плавная смена изображений Структура страницы. HTML, head, body Списки: ul, ol, li