<MyRusakov.ru />

Финансовая грамотность от А до Я

Финансовая грамотность от А до Я

Данный курс в кратчайшие сроки обучит Вас финансовой грамотности. Эти знания позволят Вам получить, как минимум, серьёзную финансовую стабильность, а, как максимум, финансовую независимость.

В рамках курса даётся большое количество практических заданий, благодаря которым Вы не просто посмотрите курс, а действительно выполните ряд важнейших шагов, о которых в нём говорится.

Помимо самого курса Вас ждёт ещё бесплатный ценный Бонус: «Ранний выход на пенсию». В рамках этого Бонуса Вы узнаете, какой должен быть капитал конкретно в Вашем случае, варианты его получения, а также какие есть стратегии вывода капитала на пенсии и где их можно протестировать.

Подробнее
Подписка

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

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Форум сайта MyRusakov.ru

Правильный css для каркаса с 3 колонками
13.01.2012 04:17:16 Правильный css для каркаса с 3 колонками Сообщение #1
brussens

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;
}



Заранее очень благодарен))
Профиль
13.01.2012 13:37:15 Правильный css для каркаса с 3 колонками Сообщение #2
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Здесь 2 ошибки:
1. Не надо писать в #main, в общем-то, 2 противоречащих друг другу свойства. Уберите height: 100%;, а min-height: 100% оставьте.
2. Отмену позиционирования поставьте внутрь #main, сразу после #center.
После этого всё должно нормально работать.
Профиль
13.01.2012 14:07:38 Правильный css для каркаса с 3 колонками Сообщение #3
brussens

brussens

Мега-мастер

Мега-мастер

Дата регистрации:
11.10.2011 22:50:07

Сообщений: 438

Спасибо, Михаил) Всё работает прекрасно) Не сочтите за оффтоп, просто есть ещё один вопрос. Правильно ли тогда будет свёрстана такая страница? Или есть всё таки какие нибудь замечания? И есть ли существенная разница между стандартом 1.0 stick и 1.1 stick??
Заранее спасибо)))
Профиль
13.01.2012 14:12:52 Правильный css для каркаса с 3 колонками Сообщение #4
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Всё свёрстано хорошо.
Особой разницы между этими двумя стандартами нет. Отличие только в том, что в 1.1 удалён атрибут name у тега a.
Профиль
13.01.2012 14:15:44 Правильный css для каркаса с 3 колонками Сообщение #5
brussens

brussens

Мега-мастер

Мега-мастер

Дата регистрации:
11.10.2011 22:50:07

Сообщений: 438

А, да, читал про это))) Спасибо ещё раз))) И как будет время, загляните пожалуйста в контакт, там есть у меня к вам вопрос
Профиль
28.03.2012 15:11:51 Правильный css для каркаса с 3 колонками Сообщение #6
brussens

brussens

Мега-мастер

Мега-мастер

Дата регистрации:
11.10.2011 22:50:07

Сообщений: 438

Михаил, вот решил взять этот каркас для разработки шаблона для Joomla для друга, но вот проблемы появились небольшие.
1. Как можно при фиксированной ширине сделать резиновый центральный блок? Причём, что бы он имел цвет.
2. Как в блоке main сделать так, что бы блоки были со 100% высотой? А то они не растягиваются, если к блоку main не добавить height:100%;
Профиль
28.03.2012 15:21:34 Правильный css для каркаса с 3 колонками Сообщение #7
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

1. Поставьте родительский контейнер в процентах. Сделайте фиксированные размеры у левого и правого блока, а центральный поставьте в процентах. Тогда он и будет резиновый.
2. Добавить надо обязательно 100% в main. Не может дочерний блок быть больше родительского.
Профиль
28.03.2012 15:30:53 Правильный css для каркаса с 3 колонками Сообщение #8
brussens

brussens

Мега-мастер

Мега-мастер

Дата регистрации:
11.10.2011 22:50:07

Сообщений: 438

Всмысле поставить в % родительский? У меня щаблон фиксированной ширины, мне просто надо, что бы при исчезании левого или правого блока центральный тянулся.
А что косается main, то у него стоит min-height:100%;
Профиль
28.03.2012 15:32:48 Правильный css для каркаса с 3 колонками Сообщение #9
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Ставьте и height: 100% в main.
Тогда просто ставьте у центрального блока ширину в процентах.
Профиль
28.03.2012 15:42:49 Правильный css для каркаса с 3 колонками Сообщение #10
brussens

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;
}

Только вот не могу понять, почему выносит информацию ниже центрального блока и футер к низу не прилегает
Профиль