Добрый день, столкнулся с проблеммой, перепробывал много решений, зашел в тупик..Подскажите, как реализовать следующее..
1) прозрачный див (black_div) это родительский див, в котором лого, ниже меню, а еще ниже див белого цвета (content), и должен растягиваться вниз в зависимости от своего содержимого. Тоесть чем выше белый див, тем больше опускается вниз прозрачный..
2) Див белого цвета (content) должен растягиваться по высоте в зависимости от своего содержимого, но всегда должен снизу отступать на 15-20 пикс. от прозрачного дива.
3) Див черного цвета это просто демо содержимого..как видно он не тянет ни белый, ни прозрачный див..а просто выходит за пределы..
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.
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке.
Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
Question
Noraad
Добрый день, столкнулся с проблеммой, перепробывал много решений, зашел в тупик..Подскажите, как реализовать следующее..
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
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.