| |
|
|
| | Помогите сделать страницу по следующему формату:
HEADER
col1 | col2 | col3
FOOTER
Как сделать такого типа страницу? | |
| |
|
|
| |
|
|
| |
для: jeans1986
(05.06.2007 в 18:03)
| | | Вы про это?
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3">HEADER</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
<tr>
<td colspan="3">FOOTER</td>
</tr>
</table>
|
| |
| |
|
|
| |
|
|
| |
для: mr Bin
(05.06.2007 в 18:08)
| | | - | |
| |
|
|
| |
|
|
| |
для: jeans1986
(05.06.2007 в 18:03)
| | |
<body>
<div id="mainwrap">
<div id="header"><p>HEADER</p></div>
<div id="contentarea" class="clearfix">
<div id="contentarea2" class="clearfix">
<div id="column2" class="clearfix">
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</div>
<div id="column1">
<ul>
<li><a href="#">linr 1</a></li>
<li><a href="#">linr 2</a></li>
<li><a href="#">linr 3</a></li>
</ul>
<div id="column3">
Nbgf yjdjcnb dczrbt)
</div>
</div>
</div>
<div id="footer"> FOOTER </div>
</div>
</body>
|
| |
| |
|
|
| |
|
|
| |
для: Valick
(05.06.2007 в 18:30)
| | | - | |
| |
|
|
| |
|
|
| |
для: Valick
(05.06.2007 в 18:30)
| | |
body { font: 1.0em veranda, arial, sans-serif; /* общий шрифт и размер */
text-align: center; /* центрируем разметку в IE */
}
* { margin: 0; padding: 0; } /* удаляем поля и отступы всех элементов */
div#mainwrap {
min-width: 780px; max-width: 960px; /* минимальная и максимальная ширина */
margin-left: auto; margin-right: auto; /* центрируем разметку в современных браузерах */
text-align: left; /* удаляем наследование центрирования текста body */
}
div#header {
height: 32px; background-color: #CAF; text-align: center; } /* временный заменитель стиля заголовка */
div#contentarea {
background-color: #FFF; /* белый фон если фоновая графика колонок не загрузится */
/* background: url(fon.gif) repeat-y top left */
position: relative; /* указывает контекст позиционирования для div левой колонки */
}
div#contentarea2 {
background-color: #FFF; /* белый фон если фоновая графика колонок не загрузится */
/* background: url(fon.gif) repeat-y top left */
position: relative; /* указывает контекст позиционирования для div правой колонки */
}
div#column1 {
width: 150px; /* ширина левой колонки */
position: absolute; /* контекстное позиционирования в контейнере contentarea */
top: 0px; left: 0px; /* распологаем колонку внутри контейнера contentarea */
background-color: #DDD; /* фоновый цвет левой колонки */
overflow: hidden; /* предотвращает развал колонки из-за сверхкрупных элементов */
}
div#column2 {
background-color: #FFF;
margin: 0 170px 0 150px; /* правое и левое поле для создания пространства для боковых колонок */
}
div#column3 {
width: 170px; /* ширина правой колонки */
position: absolute; /* контекстное позиционирования в контейнере contentarea */
top: 0px; left: 0px; /* распологаем колонку внутри контейнера contentarea */
background-color: #CCC; /* фоновый цвет левой колонки */
overflow: hidden; /* предотвращает развал колонки из-за сверхкрупных элементов */
}
div#footer {
background-color: #FAC; text-align: center; padding-top: 6px }
div#column1 ul {margin: 20px 0 0 26px;}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
|
| |
| |
|
|
| |
|
|
| |
для: Valick
(05.06.2007 в 19:12)
| | | - | |
| |
|
|
| |
|
|
| |
для: Valick
(05.06.2007 в 19:12)
| | | Вот:
<body>
<div id="mainwrap">
<div id="header"><p>HEADER</p></div>
<div id="contentarea" class="clearfix">
<div id="contentarea2" class="clearfix">
<div id="column2" class="clearfix">
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</div>
<div id="column1">
<ul>
<li><a href="#">linr 1</a></li>
<li><a href="#">linr 2</a></li>
<li><a href="#">linr 3</a></li>
</ul>
</div>
<div id="column3">
Nbgf yjdjcnb dczrbt)
</div>
</div>
</div>
<div id="footer"> FOOTER </div>
</div>
</body>
|
body { font: 1.0em veranda, arial, sans-serif; /* общий шрифт и размер */
text-align: center; /* центрируем разметку в IE */
}
* { margin: 0; padding: 0; } /* удаляем поля и отступы всех элементов */
div#mainwrap {
min-width: 780px; max-width: 960px; /* минимальная и максимальная ширина */
margin-left: auto; margin-right: auto; /* центрируем разметку в современных браузерах */
text-align: left; /* удаляем наследование центрирования текста body */
}
div#header {
height: 32px; background-color: #CAF; text-align: center; } /* временный заменитель стиля заголовка */
div#contentarea {
background-color: #FFF; /* белый фон если фоновая графика колонок не загрузится */
/* background: url(fon.gif) repeat-y top left */
position: relative; /* указывает контекст позиционирования для div левой колонки */
}
div#contentarea2 {
background-color: #FFF; /* белый фон если фоновая графика колонок не загрузится */
/* background: url(fon.gif) repeat-y top left */
position: relative; /* указывает контекст позиционирования для div правой колонки */
}
div#column1 {
width: 150px; /* ширина левой колонки */
position: absolute; /* контекстное позиционирования в контейнере contentarea */
top: 0px; left: 0px; /* распологаем колонку внутри контейнера contentarea */
background-color: #DDD; /* фоновый цвет левой колонки */
overflow: hidden; /* предотвращает развал колонки из-за сверхкрупных элементов */
}
div#column2 {
background-color: #FFF;
margin: 0 170px 0 150px; /* правое и левое поле для создания пространства для боковых колонок */
}
div#column3 {
width: 170px; /* ширина правой колонки */
position: absolute; /* контекстное позиционирования в контейнере contentarea */
top: 0px; right: 0px; /* распологаем колонку внутри контейнера contentarea */
background-color: #DDD; /* фоновый цвет левой колонки */
overflow: hidden; /* предотвращает развал колонки из-за сверхкрупных элементов */
}
div#footer {
background-color: #FAC; text-align: center; padding-top: 6px }
div#column1 ul {margin: 20px 5px 5px 26px;}
div#column2 p {font-size:.8em; margin: 0px 30px 1em;}
div#column3 p {margin: 20px 10px 0px 10px;}
/* способ очистки Тони Олсетта */
/* просто добавте класс clearfix к контейнеру, который содержит плавающие элементы */
.clearfix:after {
content: "."; /* точка добавляется в конце перед самым закрытием div */
display: block; /* строчные элементы не реагируют на свойство clear */
height: 0; /* делаем точку невидимой */
clear: both; /* контейнер очищает точку */
visibility: hidden; /* гарантия невидимости точки */
}
.clearfix {display: inline-block;} /* трюк для IE Mac */
/* трюк для исправления ошибки IE6 *//* скрывает от IE Mac \*/ * html .clearfix {height: 1%;}
.clearfix {display: block;} /* конец скрытия для IE Mac *//* конец очистки Олсетта */
|
Единственный минус, высота средней колонки должна быть больше боковых. | |
| |
|
|
| |
|
|
| |
для: Valick
(05.06.2007 в 20:00)
| | | просьба к модераторам удалить мои сообщения 18.30 и 19.12 | |
| |
|
|
| |
|
|
| |
для: Valick
(05.06.2007 в 23:01)
| | | уточните нужли ли "резиновые" колонки и если да, то какие. | |
| |
|
|
