| |
|
|
| | как сделать две колонки используя списки...макет резина...
-aaaaaaaaa ййй
-ss ssssssssssssss
-xxxxxxxxxxxxxxxx ggggggg
|
| |
| |
|
|
| |
|
|
| |
для: serjinio
(07.03.2009 в 18:07)
| | | что значит "используя списки"?
Колонки делаются таблицей, дивами или флоатом. | |
| |
|
|
| |
|
|
| |
для: Qiao
(08.03.2009 в 17:46)
| | | Это значить UL ..LI | |
| |
|
|
| |
|
|
| |
для: serjinio
(07.03.2009 в 18:07)
| | | - | |
| |
|
|
| |
|
|
| |
для: ddhvvn
(08.03.2009 в 19:58)
| | |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Пример</title>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif; /* Рубленый шрифт текста */
margin: 0; /* Отступы для браузера IE */
padding: 0; /* Отступы для браузера Firefox */
}
h1 {
font-size: 36px; /* Размер шрифта */
font-weight: bold; /* Жирное начертание */
margin: 0; /* Убираем отступы */
color: #fc6; /* Цвет текста */
}
h2 {
margin-top: 0; /* Убираем отступ сверху */
}
#head { /* Верхний блок */
background: #0080c0; /* Цвет фона */
padding: 10px; /* Поля вокруг */
}
#menu { /* Левая колонка */
float: left; /* Обтекание справа */
border: 1px solid #333; /* Параметры рамки вокруг */
width: 200px; /* Ширина колонки */
padding: 5px; /* Поля вокруг текста */
margin: 10px 10px 20px 5px; /* Значения отступов */
}
#menu div {
padding: 2px; /* Поля вокруг ссылок */
}
#menu a {
display: block; /* Отображать ссылку как блок */
width: 190px; /* Ширина ссылки для браузера IE */
padding: 2px; /* Поля вокруг ссылок */
margin: 1px; /* Отступы вокруг */
font-size: 90%; /* Размер текста */
text-decoration: none; /* Убираем подчеркивание текста */
}
#menu a:hover {
background: #faf3d2; /* Цвет фона */
border: 1px dashed #634f36; /* Добавление пунктирной рамки */
margin: 0; /* Убираем поля */
}
#content { /* Правая колонка */
margin: 10px 5px 20px 225px; /* Значения отступов */
padding: 5px; /* Поля вокруг текста */
border: 1px solid #333; /* Параметры рамки */
}
#line {
border-bottom: 1px groove #333; /* Линия между ссылками */
}
#foot { /* Нижний блок */
background: #333; /* Цвет фона */
padding: 5px; /* Поля вокруг текста */
color: #fff; /* Цвет текста */
clear: both; /* Отменяем обтекание */
}
</style>
</head>
<body>
<div id="head">
</div>
<div id="menu">
</div>
<div id="content">
</div>
<div id="foot">
</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: serjinio
(07.03.2009 в 18:07)
| | |
<html>
<head>
<style>
#col li {
display: block;
float: left;
width: 45%;
border: 1px solid #ccc;
}
#col {
margin: 0;
padding: 0;
list-style-type: none;
}
</style>
</head>
<body>
<ul id="col">
<li>Колонка 1</li>
<li>Колонка2</li>
</ul>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Саня
(09.03.2009 в 11:12)
| | | супер..просто и со вкусом... | |
| |
|
|
| |
 2.7 Мб |
|
| |
для: Саня
(09.03.2009 в 11:12)
| | | А что если список длиииииный ? расползется все. Пример во вложении
1 - Задача, сделать список в 2 колонки под каждой картинкой.
2 - Результат применения в случае с коротким списком
3 - Увеличиваем список. | |
| |
|
|
|
