Тянущийся div..?

Noraad · January 14, 2013

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

1) прозрачный див (black_div) это родительский див, в котором лого, ниже меню, а еще ниже див белого цвета (content), и должен растягиваться вниз в зависимости от своего содержимого. Тоесть чем выше белый див, тем больше опускается вниз прозрачный..

2) Див белого цвета (content) должен растягиваться по высоте в зависимости от своего содержимого, но всегда должен снизу отступать на 15-20 пикс. от прозрачного дива.

3) Див черного цвета это просто демо содержимого..как видно он не тянет ни белый, ни прозрачный див..а просто выходит за пределы..

Ниже структура HTML:

<body>

</div>

</body>

Ниже CSS код:

html, body {

margin: auto;

padding: 0px;

position: relative;

height: 100%

}

body {

height: 100%;

width: 1100px;

padding: 0 0;

margin: 0 auto;

background: #ffffff url(../image/bg.jpg) no-repeat 50% 0;

}

#wrapper {

display: block;

position: absolute;

text-align:left;

margin: 0 top;

width: 100%;

height: 100%;

}

#logo {

display: block;

position: relative;

background-image: url(../image/lady.png);

width: 294px;

height: 73px;

margin: 5px 25px;

}

#black_div { <--это прозрачный див

display: block;

position: relative;

overflow: hidden;

width: 1050px;

height: 100%;

background-color: rgba(0, 0, 0, 0.4);

margin: 10px 25px;

border-radius: 8px;

}

#niz {

min-height: 50px; /* для всех нормальных браузеров */

height: auto !important; /* для всех нормальных браузеров */

margin-bottom: -7em; /* отступ для футера */

margin-left: 25px;

margin-top: 20px;

}

#footer {

display: block;

position: relative;

width: 100%;

height: 100%;

font: arial regular 13pt;

}

#logo_j {

display: block;

position: relative;

width: 1014px;

height: 266px;

background-color: #ffffff;

border-radius: 8px 8px 0 0;

margin-top: 20px;

margin-left: 18px;

}

div.moduletablemain_menu {

display: block;

position: relative;

width: 1014px;

height: 30px;

padding: 16px 18px;

}

div.moduletablemain_menu ul {

padding: 0px;

margin: auto;

}

div.moduletablemain_menu li {

float: left;

list-style-type: none;

padding-right: 7px;

line-height: 30px;

}

div.moduletablemain_menu li:last-child {

padding-right: 0;

padding-left: 2px;

}

div.moduletablemain_menu li:first-child {

padding-right: 8px;

}

div.moduletablemain_menu a {

display:block;

line-height: 30px;

text-decoration: none;

color: #000000;

background-color: #ecf1eb;

border-radius: 5px;

padding-left: 5px;

padding-right: 5px;

padding-top: 4px;

padding-bottom: 4px;

font: 14px sans-serif;

}

div.moduletablemain_menu a:hover {

text-decoration: none;

background-color: #000000;

color: #ffffff;

}

#content { <-- это белый див

display: block;

position: relative;

width: 1014px;

height: 40%;

margin-top: 0;

margin-left: 18px;

background: #ffffff;

}

#mm { <--это черный див

width: 100px;

height: 300px;

background: #000000;

}

Помогите пожалуйста разобраться..

Vin · January 14, 2013

Для того, чтобы можно было нормально оценить вёрстку, она со всеми картинками должна быть выложена на хостинг или jsfiddle.net. Но по коду сразу бросается в глаза чрезмерное количество совершенно не нужных здесь position'ов.

Edited January 14, 2013 by Vin

Noraad · January 14, 2013

Вас понял, щас сделаю

Noraad · January 14, 2013

Вот ссылка http://jsfiddle.net/PALSe/

И так. нужно чтобы при изменении высоты блока черного цвета (mm) увеличивалась высота соответственно блока зеленого цвета (content) и соответственно серого блока (black_div). При этом зеленый блок должен не доставать 20px до низа прозрачного блока. Что-то вроде margin-bottom: 20px

Собственно на месте блока черного цвета будет модуль вывода статей joomla, разумеется чем больше статей будет выводиться тем больше должна быть высота дива

Вроде решил проблемму, поставив у блока height: auto; но подскажите, что значит много position? где они лишние и почему?

Edited January 14, 2013 by Noraad

Vin · January 14, 2013

Вроде решил проблемму, поставив у блока height: auto;

Конечно, высота же у Вас была фиксированной, неудивительно, что блок переполнялся. Вместо height: auto; высоты можно просто не задавать.

но подскажите, что значит много position? где они лишние и почему?

Position: absolute удаляет блок из нормального потока, он практически перестаёт взаимодействовать с соседними и родительскими элементами и его применение повсюду чревато развалом вёрстки. Целесообразнее строить макет на основе более гибких плавающих элементов, а тогда и position: relative где ни попадя тоже не нужен.

Настоятельно рекомендую ознакомиться: http://htmlbook.ru/samlayout/tipovye-makety

Edited January 14, 2013 by Vin

Noraad · January 14, 2013

Спасибо большое. Подскажите, а по модулям джумлы можно спросить у вас?

Vin · January 15, 2013

В джумле не разбираюсь. Насчёт неё вообще лучше всего спросить либо в соответствующем разделе у нас на форуме, либо на специализированном форуме, таком как этот http://joomlaforum.ru

Sign In

Тянущийся div..?

Question

Noraad

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Vin

Link to comment

Share on other sites

Noraad

Link to comment

Share on other sites

Noraad

Link to comment

Share on other sites

Vin

Link to comment

Share on other sites

Noraad

Link to comment

Share on other sites

Vin

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information