Резиновая стредняя часть - HTML и CSS

A.N.R.I · 22.02.2012, 20:42

Есть дизайн с трех блоков. Левый и правый по 250px, а средняя резиновая, в зависимости от экрана. Как сделать это кроссплатформено?

pavelslap · 22.02.2012, 22:10

Привет. Вот код такого варианта, я думаю, что он кроссплатформеный, но проверить не помешает. В след. посте будет css код.

Код HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Блочная верстка</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="container">

<div id="header">
  <h1>Header</h1>
</div>
<div id="left">
  <h3>left Content</h3>
  <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a </p>
  <p>border on the left side of the #mainContent div if it will always contain more content. </p>
  <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend  sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
</div>
<div id="right">
  <h3>right Content</h3>
  <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the </p>
  <p>#mainContent div if it will always contain more content.</p>
  <p>&nbsp;</p>
</div>
<div id="content">
  <h1>Main Content </h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam.Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
  <h1>Cotent</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus.</p>
  <p>Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div id="clear"></div>
<div id="footer"> 
  <p><strong>Footer</strong></p>
</div>

</div>
</body>
</html>

pavelslap · 22.02.2012, 22:11

Код:

body, html {
margin:0px; /*Это хорошая практика обнулять поля и отсупы, т.к. различные браузеры их по разному воспринимают. */
padding:0px;
text-align:center; /*Выравниваем макет по центру в старых версиях браузеров */
}
#container{
margin:0 auto;  /*выравниваем макет по центру в современных браузерах */
text-align:left;  /*Отменяем tex-align:center заданное в Body. Делаем чтобы весь текст в макете выравнивался по левому краю */
min-width:550px;  /*задаем минимальную ширину макета в современных браузерах */
width:expression(   /*задаем минимальную ширину макета в старых версия браузера. Просто замените цифру на свою шиирину :) */
(document.compatMode && document.compatMode == 'CSS1Compat')
?
(
document.documentElement.clientWidth < 550
?
"550px"
:
"auto"
)
:
(
document.body.clientWidth < 550
?
"550px"
:
"auto"
)
);
}
/*Здесь пишем стили для шапки сайта */
#header{
background-color:#63b9da;
}
#header h1 {
	margin: 0; /* Обнуляем отсупы для заголовка первого уровня, находящегося в шапке. Это нужно обязательно делать, при использовании заголовков. Если используются параграфы, то тоже нужно обнулить отсупы для них. */
	padding: 10px 0; /* Задаем поля */
}
/*Здесь пишем стили для левой колонки сайта */
#left{
background-color:#a9d28c;
width:250px;  /*ширина колонки */
float:left;  /*обязательное выравнивание по левому краю,с включением обтекания*/
}
/*Здесь пишем стили для правой колонки сайта */
#right{
width:250px; /*ширина правой колонки */
background-color:#a9d28c;
float:right; /*обазятельное выравнивание колонки по правому краю с включением обтекания */
}
/*Здесь пишем стили для блока контента */
#content{
background-color:#d5d7b5;
margin:0px; /*обнуляем отступы сверху и снизу*/
margin-left:252px; /*обязательный отступ слева, должен быть немного больше ширины левой колонки */
margin-right:252px; /*Обязательный отступ справа, должен быть немного больше ширины правой колонки */
}
#content h1 {
margin:0px; /* Обнуляем отсупы для заголовка первого уровня, находящегося в блоке контента.*/
} 
#content p {
margin:0px; /* Обнуляем отсупы для параграфов я, находящегося в блоке контента.*/
padding:5px; /*задаем поля, т.е. чтобы был промежуток между строками, чтобы было понятно, что это параграф :)*/
}
/*атрибут, который опускает подвал сайта ниже всех блоков. Нужен для корректной работы макета. */
#clear{
height:0;
font-size:1px;
line-height:0px;
clear:both;
}
/*Здесь пишем стили для подвала сайта */
#footer{
background-color:#d292bc;
}
#footer p{
margin:0px;  /* обнуляем отступы*/
padding: 10px 0; /*  задаем поля */
}

22.02.2012, 20:42	#1
A.N.R.I Регистрация: 21.02.2012 Сообщений: 4	Резиновая стредняя часть Есть дизайн с трех блоков. Левый и правый по 250px, а средняя резиновая, в зависимости от экрана. Как сделать это кроссплатформено?

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Резиновая таблица	AndrejG	HTML и CSS	5	17.01.2013 11:59
Резиновая таблица	Vistar	HTML и CSS	2	14.11.2011 10:30
Резиновая блочная верстка	Viconte	HTML и CSS	2	18.03.2011 13:45
резиновая блочная верстка	cyclobe	HTML и CSS	8	01.02.2011 12:01
Резиновая шапка	acmilan	HTML и CSS	14	12.07.2009 00:31