Студопедия

Главная страница Случайная страница

КАТЕГОРИИ:

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






Страница с плавающей шириной




Страница с плавающей шириной (англ. flexible width) имеет динамически меняющуюся ширину контента, зависящую от размера окна браузера, см. Рисунок 7‑5. Среди разработчиков такая страница получила название «резиновая».

Рисунок 7‑5. Страница с плавающей шириной.

HTML

<div id="main">

<div id="header">

header

</div>

<div id="content">

content

</div>

<div id="footer">

footer

</div>

</div>

CSS

#main {

width: 100%;

}

#header {

width: 100%;

height: 50px;

}

#footer {

width: 100%;

height: 50px;

clear: both;

}

#content {

width: 100%;

float: left;

}

Такая страница может содержать одну или более колонок фиксированной ширины, см. Рисунок 7‑6.

Рисунок 7‑6. "Резиновая" страница с фиксированными колонками

HTML-структура "резиновой" страницы с фиксированными колонками

<div id="main">

<div id="header">

header

</div>

<div class="content-holder">

<div id="leftcolumn">

left column

</div>

<div id="rightcolumn">

right column

</div>

<div id="content">

content

</div>

</div>

<div id="footer">

footer

</div>

</div>

CSS "резиновой" страницы с фиксированными колонками

#main {

width: 100%;

}

#header {

width: 100%;

height: 50px;

}

#footer {

width: 100%;

height: 50px;

clear: both;

}

.content-holder {

padding: 0 110px 0 100px;

}

* html .content-holder {

height: 1%; /* решение проблемы в IE [1]*/

}

#leftcolumn {

width: 100px;

float: left;

display: inline; /* решение проблемы в IE [2]*/

position: relative;

margin-left: -100px;

}

#rightcolumn {
width: 110px;
float: right;
display: inline; /* решение проблемы в IE */
position: relative;
margin-right: -110px;
}

#content {

width: 100%;

float: left;

}

Замечание:Если ширина правой колонки меньше чем отведенное для нее в content-holder'е место и если между rightcolumn и content должен быть отступ (допустим в 5px), то для IE (как 6-й так и 7-й версий) надо указать левый отступ для rightcolumn.

CSS для отступа

* html #content {

margin-left: 5px;

}

*+html #content {

margin-left: 5px;

}

Замечание: Сокращать до * html .content,*+html .content нельзя.

Страница с нефиксированной шириной может содержать одну или более колонок плавающей ширины, см. Рисунок 7‑7.

Рисунок 7‑7. "Резиновая" страница с колонками нефиксированной ширины.



HTML-структура "резиновой" страницы с колонками нефиксированной ширины

<div id="main">

<div id="header">

header

</div>

<div id="leftcolumn">

left column

</div>

<div id="rightcolumn">

right column

</div>

<div class="content-holder">

<div id="content">

content

</div>

</div>

<div id="footer">

footer

</div>

</div>

CSS "резиновой" страницы с колонками нефиксированной ширины

#main {

width: 100%;

}

#header {

width: 100%;

height: 50px;

}

#footer {

width: 100%;

height: 50px;

clear: both;

}

.content-holder {

padding: 0 22% 0 20%;

}

#leftcolumn {

width: 20%;

float: left;

display: inline; /* решение проблемы в IE */

}

#rightcolumn {

width: 22%;

float: right;

display: inline; /* решение проблемы в IE */

}

#content {

width: 100%;

float: left;

}


mylektsii.ru - Мои Лекции - 2015-2019 год. (0.008 сек.)Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав Пожаловаться на материал