brussens
Мега-мастер
Дата регистрации:
11.10.2011 22:50:07
Сообщений: 438
Михаил,вот есть такой каркас для страницы в html
<!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>
<title>sitename</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles/userpage.css" />
</head>
<body>
<div id="header"></div>
<div id="main">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
<div class="space"></div>
<div id="footer"></div>
</body>
</html>
как правильно написать начальный стиль, что бы высота #main была 100%, и при увеличении количества написанного в контейнерах #left #center #right
контейнер #main тянулся, а не стопорился на определённой высоте, которую он вроде как считает 100%?
Имеется вот такой css код, может что то я не так в css выставил?
html {
height:100%;
}
body {
background:#000;
min-height:100%;
position:relative;
}
html body {
height:100%;
}
div#main {
height:100%;
min-height:100%;
width:990px;
background:#FFF;
margin-left:auto;
margin-right:auto;
}
div#left {
float:left;
width:220px;
height:auto;
background-color:red;
}
div#center {
float:left;
width:550px;
height:auto;
background-color:yellow;
}
div#right {
float:right;
width:220px;
height:auto;
background-color:green;
}
div.space {
clear:both;
}
div#footer {
margin-left:auto;
margin-right:auto;
height:150px;
width:990px;
background-color:#FFF;
}
Заранее очень благодарен))
Admin
Администратор
Дата регистрации:
27.05.2010 21:23:42
Сообщений: 3063
Здесь 2 ошибки:
1. Не надо писать в #main, в общем-то, 2 противоречащих друг другу свойства. Уберите height: 100%;, а min-height: 100% оставьте.
2. Отмену позиционирования поставьте внутрь #main, сразу после #center.
После этого всё должно нормально работать.
brussens
Мега-мастер
Дата регистрации:
11.10.2011 22:50:07
Сообщений: 438
Спасибо, Михаил) Всё работает прекрасно) Не сочтите за оффтоп, просто есть ещё один вопрос. Правильно ли тогда будет свёрстана такая страница? Или есть всё таки какие нибудь замечания? И есть ли существенная разница между стандартом 1.0 stick и 1.1 stick??
Заранее спасибо)))
Admin
Администратор
Дата регистрации:
27.05.2010 21:23:42
Сообщений: 3063
Всё свёрстано хорошо.
Особой разницы между этими двумя стандартами нет. Отличие только в том, что в 1.1 удалён атрибут name у тега a.
brussens
Мега-мастер
Дата регистрации:
11.10.2011 22:50:07
Сообщений: 438
А, да, читал про это))) Спасибо ещё раз))) И как будет время, загляните пожалуйста в контакт, там есть у меня к вам вопрос
brussens
Мега-мастер
Дата регистрации:
11.10.2011 22:50:07
Сообщений: 438
Михаил, вот решил взять этот каркас для разработки шаблона для Joomla для друга, но вот проблемы появились небольшие.
1. Как можно при фиксированной ширине сделать резиновый центральный блок? Причём, что бы он имел цвет.
2. Как в блоке main сделать так, что бы блоки были со 100% высотой? А то они не растягиваются, если к блоку main не добавить height:100%;
Admin
Администратор
Дата регистрации:
27.05.2010 21:23:42
Сообщений: 3063
1. Поставьте родительский контейнер в процентах. Сделайте фиксированные размеры у левого и правого блока, а центральный поставьте в процентах. Тогда он и будет резиновый.
2. Добавить надо обязательно 100% в main. Не может дочерний блок быть больше родительского.
brussens
Мега-мастер
Дата регистрации:
11.10.2011 22:50:07
Сообщений: 438
Всмысле поставить в % родительский? У меня щаблон фиксированной ширины, мне просто надо, что бы при исчезании левого или правого блока центральный тянулся.
А что косается main, то у него стоит min-height:100%;
Admin
Администратор
Дата регистрации:
27.05.2010 21:23:42
Сообщений: 3063
Ставьте и height: 100% в main.
Тогда просто ставьте у центрального блока ширину в процентах.
brussens
Мега-мастер
Дата регистрации:
11.10.2011 22:50:07
Сообщений: 438
Ну получилось примерно следующее:
<div id="header"></div>
<div id="main">
<div id="left">sdgfsdffffff fffffffffffffffffffffffffffffffffffffffg<jdoc:include type="modules" name="left" style="xhtml" /></div>
<div id="right"><jdoc:include type="modules" name="right" style="xhtml" /></div>
<div id="center"><div><jdoc:include type="component" /></div></div>
<div class="space"></div>
</div>
<div id="footer"></div>
html {
height:100%;
}
body {
background:#000;
min-height:100%;
position:relative;
}
html body {
height:100%;
}
div#header {
height:150px;
width:990px;
background:red;
margin-left:auto;
margin-right:auto;
}
div#main {
height:100%;
width:990px;
background:#FFF;
margin-left:auto;
margin-right:auto;
}
div#left {
float:left;
width:220px;
height:100%;
background-color:grey;
}
div#center {
float:none;
width:100%;
background-color:yellow;
height:100%;
}
div#right {
float:right;
width:220px;
min-height:100%;
background-color:green;
}
div.space {
clear:both;
}
div#footer {
margin-left:auto;
margin-right:auto;
height:150px;
width:990px;
background-color:blue;
position:absolute;
bottom:0;
}
Только вот не могу понять, почему выносит информацию ниже центрального блока и футер к низу не прилегает
