<MyRusakov.ru />

Создание и продвижение лендинга под ключ

Создание и продвижение лендинга под ключ

Данный курс научит Вас создавать профессиональные лендинги на любую тематику с нуля и под ключ. Помимо теории Вы так же своими глазами будете видеть, как создаётся лендинг: заказывается дизайн, верстаются страницы, программируется клиентская часть и Admin-панель, а после лендинг размещается в Интернете. Так же Вы узнаете, как продвигаются лендинги и, самое главное, Вы увидите, как это делается на примере созданного лендинга до первых клиентов.

И, наконец, к курсу идут 4 очень полезных и актуальных Бонуса для лендингов: "Подключение онлайн-консультанта", "Система уведомлений по SMS", "Автоматизация управления Яндекс.Директом" и "Продажа товаров с AliExpress.com".

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

Подписавшись по 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;
}

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