<MyRusakov.ru />

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

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

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

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

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

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

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

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

Подписавшись по 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% высоту, но для дочерних блоков не помогает...Вот скрин примерной схемы, которая мне нужна http://radikal.ru/F/i052.radikal.ru/1112/61/60b15e8a5f24.jpg.html
Профиль
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;
}
Профиль