Студопедия
Случайная страница | ТОМ-1 | ТОМ-2 | ТОМ-3
АрхитектураБиологияГеографияДругоеИностранные языки
ИнформатикаИсторияКультураЛитератураМатематика
МедицинаМеханикаОбразованиеОхрана трудаПедагогика
ПолитикаПравоПрограммированиеПсихологияРелигия
СоциологияСпортСтроительствоФизикаФилософия
ФинансыХимияЭкологияЭкономикаЭлектроника

Пример 1. Добавление свойства float

Пример 3. Применение свойства clear | Описание | Пример 3. Создание макета с двумя колонками | Пример 4. Код HTML 5 | Пример 2. Создание макета с двумя колонками | Пример 3. Код HTML 5 | Фиксированная ширина, навигация слева | Пример 1. Создание двух колонок | Резиновая ширина, навигация слева |


Читайте также:
  1. Adding initializers to a class Добавление инициализаторами к классу
  2. Adding property observers Добавление наблюдателей собственности
  3. Defining lazy properties Определение ленивых свойства
  4. I) Эффективность военных преобразований 1860-1870-х годов на примере Русско-японской войны.
  5. I. Примерный перечень вопросов рубежного контроля.
  6. II. Примерный перечень вопросов к зачету (экзамену) по всему курсу.
  7. III. Основные эксплуатационные свойства топлив

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

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

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

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

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

Пример 1. Добавление свойства float

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

<title> Две колонки </title>

<style type="text/css" >

#leftcol { /* Левая колонка*/

width: 200px; /* Ширина слоя */

float: left; /* Состыковка с соседним слоем */

color: white; /* Цвет текста*/

padding: 10px; /* Поля вокруг текста */

background: #008000; /* Цвет фона левой колонки */

}

#rightcol { /* Правая колонка*/

width: 550px; /* Ширина слоя */

float: left; /* Состыковка с соседним слоем */

padding: 10px; /* Поля вокруг содержимого */

background: #e0e0e0; /* Цвет фона правой колонки */

}

</style>

</head>

<body>

<div id="leftcol" >... </div>

<div id="rightcol" >... </div>

</body>

</html>

Высота слоев определяется их содержимым, поэтому подход, показанный в данном примере, создаст две прямоугольные области разной высоты и цвета.

Главной особенностью приведенного подхода является тот момент, что при уменьшении окна браузера до 750 пикселов и меньше, слои располагаются по вертикали друг под другом (рис. 1). Иными словами, макет «рассыпается» на отдельные блоки.

Рис. 1. Вид макета при уменьшении размера окна браузера

Чтобы подобная ситуация не происходила, следует воспользоваться свойством margin.


Дата добавления: 2015-08-20; просмотров: 54 | Нарушение авторских прав


<== предыдущая страница | следующая страница ==>
На чем?| Пример 2. Двухколонный макет

mybiblioteka.su - 2015-2024 год. (0.006 сек.)