Jump to content
  • 0

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


Noraad
 Share

Question

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

5fcab11c6507.jpg

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

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

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

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

<body>

<div id="wrapper">

<div id="logo"></div>

<div id="black_div">

<div id="logo_j"><img src="/joomla8/templates/krasota/image/logo.jpg" width="998" height="251" hspace="8" vspace="8" /></div>

<div id=main_menu><jdoc:include type="modules" name="main_menu" style="xhtml" /></div>

<div id="content"><div id="mm"></div></div>

</div>

<div id="niz"><footer>ladyplus.com.ua - все о женской красоте. © 2013 Все права защищены. Копирование материала возможно только при наличии прямой гиперссылки на сайт.</footer></div>

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

}

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

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

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

Edited by Vin
Link to comment
Share on other sites

  • 0

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

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

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

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

Edited by Noraad
Link to comment
Share on other sites

  • 0

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

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

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

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

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

Edited by Vin
Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy