Доброго дня уважаемые.
на картинке изображена структура сайта который я пытаюсь сделать. (это мой первый сайт в жизни, поэтому вопросов много).
На данный момент имею 5 блоков. блок шапка (сам по себе, его не трогаю).
Под шапкой находится родительский блок 1
внутри него четыре блока:
1 - родительский блок,
2 - блок меню
3 - второй родит блок для текста
4 - div текст
5 - див IMG
Смысл в том, что при наполнении блока 4-div текст, он расширяется вниз, и должен расширять родительский блок 1. при этом, что бы блок меню не висел огрызком, он должен растягиваться на 100% по высоте за родительским блоком. т.е. меню должно всегда быть одной высоты с блоком текст, даже когда блок текст растягивается в длину. то же самое и с блоком img должно быть. Все три блока должны тянуться вниз за блоком "текст".
помогите, сам не осилил.
Честно говоря, я запутался. и тот код, который получился.. возможно ли что то понять? ...
<style>
body {background: #696969; font-family: Verdana, Helvetica, Arial, sans-serif;}
#d1{
max-width: 1240px;
margin: 0px 0px 0 0px;
height: 320px;
background: #c8c5c6;
}
#d1 img {
max-width: 200px;
max-height: 200px;
margin: 60px 0 60px 60px;}
#p1
{float: right;
font-family: Verdana, Helvetica, Arial, sans-serif;
text-align:center;
color: #fff;
margin: 150px 210px 30px 0;
font-size: 24px;
text-shadow: 2px 2px 3px #000;
}
#wrapper {
width: 1240px; /* ширина основного блока */
height: 100%; /* высота для наглядности */
margin: 0 auto ; /* задаем отступ слева и справа auto чтобы сработало выравнивание по центру */
padding: 0px;
}
#centerblock
{
width: 100%; /* ширина */
max-height: 100%; /* высота */
margin: 0;
padding: 0px;
overflow: inherit;
}
#d2{
margin: 0px;
width: 300px;
min-height: 800px;
height: 100%;
background: #D3D3D3; /* Цвет фона */
float: left; /*сделали плавающим и закинули в левый угол. */
overflow: auto /*отвечает за отображение содержимого блока, если оно вых-т за его пределы.
(visible- значение по умолчанию) (hidden- все что за пределами блока, скрывается)
(scroll- полоса прокрутки но добавляет две полосы справа и внизу) (auto- добавляет плолсу прокрутки только там где надо) */
}
#portal {margin-left: 10%; color: #0000FF; }
#d3 {text-align: left;}
#d3 {
width: 940px;
min-height: 800px;
max-height: 100%;
margin-left: 300px;
background: #FFFFFF; /* Цвет фона */
overflow: inherit
}
#txtmain {
background: #c1c2c3;
max-width: 640px;
height: 100%
margin: 0 0px 0 0px; /* Значение отступов */
padding: 0px; /* Поля вокруг текста */
border: 0px solid #0a0; /* рамка */
float: left;
margin: 0px;
}
#txtsecondary {
background: #f00;
max-width: 300px;
height: 100%;
margin: 0 0px 0 0px; /* Значение отступов */
padding: 0px; /* Поля вокруг текста */
border: 0px solid #0a0; /* рамка */
margin: 0 0 0 0px ;
overflow: auto
}
#d4{
max-width: 1200px;
margin: 0px 30px 30px 30px;
border: 0 solid #090;
height: 150px;
}
#d21 {
float: left; /*сделали плавающим и закинули в левый угол. */
padding: 20px 10px 10px 5px; /*задали отступ для меню сверху слева и справа, и дополнительный отступ будет в меню ul*/
color: #789; /*перекрасили текст заголовка в меню*/
width: 270px; /*задали ширину для блочного жлемента (кнопки в меню)*/
}
#d21 ul {padding-left: 20px; /*задали отступ для меню слева в меню ul*/
list-style: none; /*убрал курсорную точку в списке перед ссылкой.*/
}
#d21 h2 {
color: black;
text-align: center;
margin: 10px 0; /*отступы снизу и сверху у заголовка в меню*/
}
/*форматируем текст, в меню, который выглядет как ссылка, мы ему задаем свой шрифт и цвет и оформление*/
#ul21 a {
border: 1px solid #C0C0C0; /* рамка для ссылок в меню */
padding: 10px 0 10px 35px ; /*у строчных элементов отступы работают только горизонтальные, поэтому надо переводить в блок и задавать блочные отступы*/
display: block; /*перевели в блочный элемент*/
margin-bottom: 5px; /*сделали отступ между блоками кнопками*/
border-radius: 10px; /*закруглики уголки у кнопок*/
color: black;
background: #fff; /*фон кнопок*/
font-weight: bolder;
text-decoration: none; /*убрали подчеркивание, которое обычно есть у ссылок*/
font-family: arial, sans-serif; /*задали другой шрифт тексту*/
}
#ul21 a:hover {background: #F8F8FF;}
#contacts a{
border: 1px solid #C0C0C0; /* рамка для ссылок в меню */
padding: 10px 0 10px 15px ; /*у строчных элементов отступы работают только горизонтальные, поэтому надо переводить в блок и задавать блочные отступы*/
display: block; /*перевели в блочный элемент*/
margin-bottom: 0; /*сделали отступ между блоками кнопками*/
border-radius: 10px; /*закруглики уголки у кнопок*/
color: black;
background: #808080; /*фон кнопок*/
font-weight: bolder;
text-decoration: none; /*убрали подчеркивание, которое обычно есть у ссылок*/
font-family: arial, sans-serif; /*задали другой шрифт тексту*/
}
#ul22 a {
padding: 5px 0 5px 15px ; /*у строчных элементов отступы работают только горизонтальные, поэтому надо переводить в блок и задавать блочные отступы*/
color: black;
text-decoration: none; /*убрали подчеркивание, которое обычно есть у ссылок*/
font-family: arial, sans-serif; /*задали другой шрифт тексту*/
}
.paragraph {
text-align: left;
font-size: 18px;
font-weight: bold;
}
p {
text-align: left;
margin: 10px 0; /*отступы снизу и сверху у заголовка в меню*/
}
ul {text-align: left;
font-size: 14px;
}
caption {
color: #000;
padding: 10px 0;
font: 14pt Arial, sans-serif;}
table {text-align: center;
}
</style>
<div id="wrapper"><!--делаем обертку, что бы сайт сжимался и разжимался вместе с окном-->
<div id="d1"> <!--верхний блок-->
<p id="p1">Контакты:<br>
Тел: 8 (916) 580-30-77 <br>
Тел: 8 (916) 502-26-67 <br>
E-mail: [email protected]</p>
<a href="index.html" ><img src="img/proofprint.png" alt="logo proofprint" title="На главную страницу"></a>
</div><!--верхний блок-->
<div id='centerblock'>
<div id="d2"> <!--левый блок-->
<div id="d21">
<h2>Услуги</h2>
<ul id="ul21">
<li><a href="vizitka.html" title="Печать визиток".>Визитки</a></li>
<li><a href="Listovki.html" title="Напечатать листовки".>Листовки</a></li>
<li><a href="buklet.html" title="Печать буклетов".>Буклеты</a></li>
<li><a href="broshure.html" title="Печать брошюр".>Брошюры / Каталоги</a></li>
<li><a href="fotolumen.html" title="Печать на пленке".>Пленка </a></li>
<li><a href="dezigner.html" title="Верстка".>Верстка и дизайн</a></li>
<li><a href="montaz.html" title="Монтаж рекламы".>Монтаж / демонтаж</a></li>
<li><a href="dostavka.html" title="Доставка полиграфии".>Доставка</a></li>
</ul>
</ul>
</div>
<div id='portal'>
<h3>Мы есть на портале поставщиков</h3>
<img src="img/Postavshikov.gif" alt="logo portal postavshikov" title="Мы есть на портале поставщиков"></a>
</div>
</div><!--левый блок-->
<div id="d3"> <!--текстовый блок-->
<div id="txtmain">
<h1> Печать визиток:</h1>
<table border='1' bordercolor='#ffffff' cellpadding='10' cellspacing='0' bgcolor='#cccccc' width='100%'>
<caption>Стоимость изготовления стандартных* односторонних визиток:</caption>
<tbody>
<tr bgcolor='#ffcc66'>
<th>Тираж
<th>Цена
</tr>
<tr>
<td>100 шт
<td>400 руб
</tr>
<tr>
<td>1000 шт
<td>1700 руб
</tr>
</tbody>
</table>
<h5>*Стандартная визитка: размер 90х50 мм на мелованной бумаге 150 грамм.
</h5>
<p> Визитная карточка (визитка) является неотъемлемой частью представителя любой компании.<br>
Для печати визиток используется абсолютно разная Бумага, в большинстве случаев это стандартный картон 300 гр с нанесением информации и логотипа компании.<br>
<p>Обратитесь к нашим специалистам и они помогут подобрать бумагу для визитки, соответствующую вашим пожеланиям и фирменному стилю.</p>
<p>Принято считать, что визитка должна быть односторонней, т.к. вторая сторона предназначена для заметок.
Но с точки зрения продвижения, вторую сторону визитки можно использовать, для указания основного вида деятельности вашей компании. </p>
Укажите там самые популярные услуги или товары. Но традиционно, большинство компаний, на обратной стороне визитки дублируют контактные данные на английском, или другом иностранном языке.
</p>
<p>Принято считать, что визитка должна быть односторонней, т.к. вторая сторона предназначена для заметок.
Но с точки зрения продвижения, вторую сторону визитки можно использовать, для указания основного вида деятельности вашей компании. </p>
Укажите там самые популярные услуги или товары. Но традиционно, большинство компаний, на обратной стороне визитки дублируют контактные данные на английском, или другом иностранном языке.
</p>
<p>Так же мы можем изготовить визитки от 1000 шт и более, для промо - раздачи, или если все сотрудники вашей компании используют общую обезличенную визитную карточку.
</p>
<h4> Наши дизайнеры с удовольствием разработают для Вас несколько вариантов <a href="dezigner.html" title="Верстка и дизайн макетов быстро и не дорого">дизайна</a> визитки
</h4>
</div> <!-- txtmain -->
<div id="txtsecondary">
</div>
</div> <!--текстовый блок-->
</div> <!-- centerblock-->
<div id="d4"> <!--подвал-->
</div> <!--Подвал закрыт-->
</div> <!--wrapper закрыли обертку-->