Фиксированный дизайн. Параметр float


Рассмотрим, как располагать рядом по горизонтали два и более слоя. По умолчанию, использование тега DIV для создания слоя, автоматически делает и перенос строки после него, поэтому несколько идущих подряд слоев выстраиваются по вертикали. Нас же интересует, а как сделать то же самое, но по горизонтали, чтобы можно было создать две колонки. Для решения данной задачи есть два подхода: первый основан на использовании параметра float, второй — на позиционировании элементов.

Использование параметра float

Здесь все просто, в стили совмещаемых слоев добавим параметр float: left. Этот элемент говорит, что слой необходимо выровнять по левому краю и обтекать его по правой стороне. Таким образом, рядом лежащий второй слой будет пристыкован к первому справа.

Теоретически, параметр float достаточно задавать лишь для одного слоя из двух. Однако браузер Internet Explorer в этом случае между слоями добавляет небольшой промежуток, что не всегда желательно. Чтобы все смотрелось именно так, как хочется, float следует указывать для всех слоев (пример 1).

Пример 1. Использование параметра float
<html>
<head>
<style type="text/css">

#menu { /* Навигация по сайту */

width: 200px;
float: left;
color: white;
padding: 10px;
background-color: #008000;

}

#content { /* Основное содержание страницы */

width: 550px;
float: left;
padding: 10px;
text-align: left;
background-color: #e0e0e0;

}

</style>
</head>

<body>

<div id=menu>...</div>
<div id=content>...</div>

</body>
</html>

Высота слоев определяется их содержимым, поэтому подход, показанный в примере 1, создаст две прямоугольной области разной высоты и цвета. Изменить эту ситуацию и сделать две колонки одинаковой высоты, независимо от содержимого слоев, можно, введя еще один дополнительный слой. У этого слоя, назовем его column, цвет фона должен совпадать с цветом фона левой колонки, а ширина равняться общей ширине двух колонок (пример 2).

Пример 2. Колонки равной высоты
<html>
<head>
<style type="text/css">

#column { /* Основа для меню и контента */

background: #008000;
width: 750px;

}

#menu { /* Навигация по сайту */

width: 200px;
float: left;
color: white;
padding: 0px;

}

#content { /* Основное содержание страницы */

background-color: #e0e0e0;
padding: 0px;
margin-left: 200px;

}

P { /* Стиль параграфа */

padding: 10px;
text-align: left;

}

</style>
</head>

<body>

<div id=column>
   <div id=menu> ... </div>
   <div id=content> ... </div>
</div>

</body>
</html>

Различие между двумя подходами к созданию колонок (пример 1 и 2) кроется не только в разном представлении слоев, но и в нюансах, пренебрежение которыми приведет к тому, что браузер покажет результат совсем не так, как ожидалось.

  • Ширина слоя content в данном случае не указывается, она вычисляется автоматически исходя из общей ширины, которая определяется шириной слоя column за вычетом ширины слоя menu.
  • Обязательно следует добавить параметр margin-left, без него колонок просто не получится. Этот атрибут смещает наш слой вправо на величину, равную ширине левой колонки, в данном случае, это 200 пикселей.
  • Следующая особенность связана с параметром padding, который задает поля от края слоя до его содержимого. Без него текст будет располагаться слишком близко от края цветного прямоугольника, образуемого слоем, что некрасиво и снижает читабельность текста. Но и добавление параметра padding в браузерах Opera и Netscape может привести к смещению текста в некоторых местах и вместо того, чтобы быть выровненным по левому краю, текст будет располагаться «лесенкой». Правильный выход из этой ситуации — вообще убрать параметр padding из стиля слоев и добавить нужное значение полей к стилю параграфа, который будет использоваться внутри колонок.
  • К сожалению, приведенный способ имеет один недостаток, который не позволяет использовать его как универсальный метод. Колонки будут показаны корректно и одинаковой высоты только в том случае, если содержимое правой колонки (слой content) превышает по объему содержимое левой колонки (слой menu). Другими словами, правая колонка всегда должна быть больше по высоте.

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

    Пример 3. Окончательный код
    <html>
    <head>
    <style type="text/css">

    BODY { /* Стиль основных элементов веб-страницы */

    text-align: center; /* 1 */
    margin: 0px;
    margin-top: 10px;
    padding: 0px;
    font-family: Verdana, Arial, sans-serif;

    }


    #container { /* Основной каркас страницы */

    width:750px;
    margin-right:auto; /* 1 */
    margin-left:auto; /* 1 */

    }


    #column { /* Основа для меню и контента */

    background: #008000;
    width: 750px;

    }


    #top { /* Верхняя часть с заголовком страницы */

    text-align: left;
    width: 750px;
    background-color: #800000;
    padding: 0px;
    height: 50px;

    }


    #menu { /* Навигация по сайту */

    width: 200px;
    float: left;
    color: white;
    padding: 0px;

    }


    #content { /* Основное содержание страницы */

    background-color: #e0e0e0;
    padding: 0px;
    margin-left: 200px;

    }


    #bottom { /* Нижняя часть */

    width: 750px;
    background-color: #000080;

    }


    #contact { /* Контактная информация */

    float: left;
    padding: 0px;
    width: 500px;
    text-align: left;

    }


    #button { /* Всякие кнопочки */

    padding: 0px;
    text-align: right;

    }


    H1 { /* Заголовок страницы */

    text-align: center;
    font-size: 220%;
    font-family: "Times New Roman", Times, serif;
    font-weight: normal;
    color: black;
    padding: 0px;
    margin: 0px;

    }


    #menu P { /* Разделы меню */

    font-size: 100%;
    font-weight: bold;
    text-align: left;
    padding: 10px;
    margin: 0px;

    }


    #menu A { /* Ссылки в меню */

    color: #ccffcc;
    font-size: 90%;
    font-weight: normal;

    }

    #menu A:visited { /* Ссылки в меню */

    color: #c0c0c0;

    }


    #menu A:hover { /* Ссылки в меню */

    background-color: #ffffc0;
    width: 150px;
    color: black;

    }


    #content P { /* Стиль основного текста */

    font-size: 90%;
    text-align: justify;
    padding: 10px;
    margin: 0px;

    }


    #contact P { /* Стиль контактов */

    font-size: 80%;
    padding: 5px;
    color: #fffff0;
    margin-top: 0px

    }


    #button P { /* Стиль размещения кнопочек */

    text-align: right;
    padding: 5px;
    margin: 0px;

    }


    .title { /* Заголовок сайта */

    font-size: 24px;
    font-weight: bold;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;

    }

    </style>
    </head>

    <body>

    <div id=container>
    <div id=top><span class=title>Заголовок сайта</span></div>

    <div id=column>
    <div id=menu>
    <p>Раздел 1<br>
    <a href=#>Ссылка 1</a><br>
    <a href=#>Ссылка 2</a><br>
    <a href=#>Ссылка 3</a><br>
    </p>

    <p>Раздел 2<br>
    <a href=#>Ссылка 1</a><br>
    <a href=#>Ссылка 2</a><br>
    <a href=#>Ссылка 3</a><br>
    </p>

    <p>Раздел 3<br>
    <a href=#>Ссылка 1</a><br>
    <a href=#>Ссылка 2</a><br>
    <a href=#>Ссылка 3</a><br>
    </p>

    </div>

    <div id=content>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
    volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla
    facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
    </div>
    </div>

    <div id=bottom>
    <div id=contact><p><b>Контактная информация</b><br>E-mail: <u>vasya@pupkin.ru</u></div>
    <div id=button><p><img src=images/sample.gif width=88 height=31 vspace=5> <img src=images/sample.gif width=88 height=31 vspace=5></p></div>
    </div>

    </div>

    </body>
    </html>


    Предыдущая статья     Следующая статья     Список статей