<MyRusakov.ru />

Создание Интернет-магазина на OpenCart 2.0

Создание Интернет-магазина на OpenCart 2.0

Видеокурс "Создание Интернет-магазина на OpenCart 2.0" обучит Вас созданию любых Интернет-магазинов на OpenCart 2. В первом разделе курса разбираются абсолютно все возможности данного движка с примерами.

Во втором разделе создаётся полноценный Интернет-магазин, где Вы уже всё увидите своими глазами.

И, наконец, в третьем разделе курса созданный Интернет-магазин будет размещён в Интернете.

К курсу так же идут бесплатные и очень ценные Бонусы сопоставимые с самим курсом: "Как сэкономить на Яндекс.Директ до 50%", "Дропшиппинг" и "Как раскрутить Интернет-магазин".

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

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

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

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

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

Каким движком Вы предпочитаете пользоваться?

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

Вёрстка на дивах со 100% высотой колонок
24.12.2011 23:19:15 Вёрстка на дивах со 100% высотой колонок Сообщение #1
brussens

brussens

Мега-мастер

Мега-мастер

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

Сообщений: 438

Вообщем проблема есть небольшая. Взялся за новый проект, решил сделать полупрозрачными блоки. Но вот почему то блокам не выставляется 100% высота. А вот футер прижимается родительским дивом, т.е. для родителя применяется 100% высота. Как возможно решить проблему? Буду признателен за корректный каркас фиксированного шаблона со 100% колонками и прижатым к низу футеру, хоть изучу, как что делается, ибо ничего толкового не нашёл в гугле, везде всё по разному.
Заранее благодарен
Профиль Ответить
24.12.2011 23:35:01 Вёрстка на дивах со 100% высотой колонок Сообщение #2
Admin

Admin

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

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

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

Сообщений: 3063

Вот таким способом можно это сделать:
* {
height: 100%;
}
div#block {
background-color: green;
width: 100px;
height: 100%;
}

И HTML:
<body>
<div id="block"></div>
</body>
Профиль Ответить
24.12.2011 23:37:45 Вёрстка на дивах со 100% высотой колонок Сообщение #3
brussens

brussens

Мега-мастер

Мега-мастер

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

Сообщений: 438

Спасибо, Михаил, пойду разбирать)))
Профиль Ответить
25.12.2011 14:03:10 Вёрстка на дивах со 100% высотой колонок Сообщение #4
brussens

brussens

Мега-мастер

Мега-мастер

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

Сообщений: 438

Михаил, а возможно каким нибудь образом отменять 100% высоту для дочерних блоков?
Профиль Ответить
25.12.2011 14:11:35 Вёрстка на дивах со 100% высотой колонок Сообщение #5
Admin

Admin

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

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

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

Сообщений: 3063

Да, можно. Для этого задавайте у дочернего блока либо height: auto;, либо конкретное значение, например, height: 100px;.
Профиль Ответить
25.12.2011 14:24:39 Вёрстка на дивах со 100% высотой колонок Сообщение #6
brussens

brussens

Мега-мастер

Мега-мастер

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

Сообщений: 438

Просто тут такое дело, что мне бы надо, что бы определённый блок растягивался по высоте соответственно количеству текста. Ставить на body пытался 100% высоту, но для дочерних блоков не помогает...Вот скрин примерной схемы, которая мне нужна
Профиль Ответить
25.12.2011 14:38:04 Вёрстка на дивах со 100% высотой колонок Сообщение #7
Admin

Admin

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

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

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

Сообщений: 3063

Как я и писал, height: auto; Тогда высота будет пропорциональна содержимому. А расположение можно задавать, например, через margin.
Профиль Ответить
25.12.2011 14:40:15 Вёрстка на дивах со 100% высотой колонок Сообщение #8
brussens

brussens

Мега-мастер

Мега-мастер

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

Сообщений: 438

Михаил, вот во всём разобрался, только вот не пойму, почему шаблон для кратких новостей на главной странице при большом их количестве начинает выходить за футер? Т.е. Блок main не тянется? Отмену позиционирования делал, не помогает
Профиль Ответить
25.12.2011 14:42:37 Вёрстка на дивах со 100% высотой колонок Сообщение #9
Admin

Admin

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

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

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

Сообщений: 3063

Возможно, Вы не там её делали. Также, на всякий случай, напомню базу блочной вёрстки:
header
content
left
right
center
clear
footer
Профиль Ответить
25.12.2011 14:47:59 Вёрстка на дивах со 100% высотой колонок Сообщение #10
brussens

brussens

Мега-мастер

Мега-мастер

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

Сообщений: 438

По этой схеме и делаю, вот код
html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="/style/style.css">
</head>
<body>
<div id="header">
<a href="http://inflexing.ru"><img src="/images/inflexing.png" alt="inflexing.ru" /></a>
<div id="regauthhref">
<a href="#">Войти</a><br />
<a href="#">Регистрация</a>
</div>
</div>
<div id="container">

<ul id="nav">
<li id="selected"><a href="#">Главная</a></li>
<li><a href="#">Видео</a></li>
<li><a href="#">Музыка</a></li>
<li><a href="#">Фотоотчёты</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Даты</a></li>
<li><a href="#">Форум</a></li>
<li><a href="#">Поиск</a></li>
</ul>



</div>
<div id="main">
<div id="right"></div>
<div id="content">
<div id="newskr">
<div id="newsnamekr"><a href="#">Заголовок новости</a></div>
<div id="newsimagekr"><a href="#"><img src="/images/test.jpg"></a></div>
<div id="newstextkr">Часть новости</div>
<div id="newsfullread"><a href="#">Читать полностью</a></div>
</div>

<div id="newskr">
<div id="newsnamekr"><a href="#">Заголовок новости</a></div>
<div id="newsimagekr"><a href="#"><img src="/images/test.jpg"></a></div>
<div id="newstextkr">Часть новости</div>
<div id="newsfullread"><a href="#">Читать полностью</a></div>
</div>

<div id="newskr">
<div id="newsnamekr"><a href="#">Заголовок новости</a></div>
<div id="newsimagekr"><a href="#"><img src="/images/test.jpg"></a></div>
<div id="newstextkr">Часть новости</div>
<div id="newsfullread"><a href="#">Читать полностью</a></div>
</div>
</div>
</div>

<div id="clear"></div>

<div id="footer">
</div>
</body>
</html>


css* {
height: 100%;
}
body {
background-image: url("/images/5.gif";
}
#main {
margin-left:auto;
margin-right:auto;
width: 990px;
height: 100%;
}
#content {
background-image: url("/images/1.png";
width: 750px;
float:left;
height: 100%;
}
#right {
background-image: url("/images/1.png";
width: 230px;
float:right;
height: 100%;
}
#footer {
margin-top:10px;
margin-left:auto;
margin-right:auto;
width: 990px;
height:120px;
background-image: url("/images/1.png";
float:bottom;
position:absolute;
}
#header {
margin-left:auto;
margin-right:auto;
width:990px;
height:100px;
}
#header img{
margin-left:280px;
margin-top:10px;
width:419px;
height:auto;
}
#regauthhref {
float:right;
margin-top:5px;
margin-right:40px;
background-image: url("/images/1.png";
padding:10px;
text-align:center;
height:auto;
}
#regauthhref a{
color:#FFF;
font-size:14px;
text-decoration:none;
}
#regauthhref a:hover{
color:#FFF;
font-size:14px;
text-decoration:underline;
}
#container {
width: 990px;
text-align:center;
height:auto;
}

ul, li {
margin: 0;
padding: 0;
}

#blob {
background: #0b2b61;
border-right: 1px solid #0059ec;
border-left: 1px solid #0059ec;
position: absolute;
z-index: 1;
top: 0;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 10px #011331;
-webkit-box-shadow: 2px 3px 10px #011331;
}

#nav {
position: relative;
float: left;
}

#nav li {
float: left;
list-style: none;
}

#nav li a {
color: #e3e3e3;
z-index: 2;
position: relative;
cursor: pointer;
float: left;
font-size: 12px;
font-family: helvetica, arial, sans-serif;
text-decoration: none;
padding: 5px 40px;
}
#clear {
clear:both;
max-height:1px;
}
#newskr {
max-width:235px;
background-image: url("/images/1.png";
margin:20px;
height:auto;
}
#newsnamekr {
text-align:left;
padding:10px;
padding-left:20px;
background-image: url("/images/1.png";
height:auto;
}
#newsnamekr a{
color:#FFF;
font-weight:bold;
font-size:14px;
text-decoration:none;
}
#newsnamekr a:hover{
text-decoration:underline;
}
#newsimagekr img{
max-width:200px;
margin-left:auto;
margin-right:auto;
height:auto;
}
#newsimagekr{
margin:auto;
margin-top:10px;
margin-bottom:10px;
height:auto;
margin-left:auto;
margin-right:auto;
text-align:center;
}
#newstextkr {
color:#FFF;
font-size:14px;
padding:10px;
padding-left:20px;
height:auto;
}
#newsfullread {
padding-right:20px;
padding-bottom:10px;
text-align:right;
height:auto;
}
#newsfullread a{
color:#2996d7;
font-weight:bold;
font-size:14px;
text-decoration:none;
}
#newsfullread a:hover{
text-decoration:underline;
}
Профиль Ответить