Вопрос по DIV

kolob204 · August 28, 2012

1-й вопрос: хочу сделать DIV-ми некое подобие разбиения страницы на блоки.

Цель: Понять, какими свойствами пользоваться, для верного представления - как будут расположены блоки DIV.

Вот сначала разбиваю, всё норм:

Код:

<html>
<head>
<style>

#body
{min-width:8000px;
}

/*Заголовок*/
.header
{
 width:100%;
 text-align:center;
 border: 1px dotted gray;

}


/*Левая колонка*/
.block_1_1                                /*   1.1   */
{
float:left;
width: 20%;
border: 1px dotted #ccc;
overflow:hidden;

}
/*центр - контент*/
.block_1_2
{
margin: auto;                             /*Выравниваем между девой и правой колонкой*/
width: 60%;
border: 1px dotted #ccc;
text-align: center;
background:orange;

}
/*Правая колонка*/
.block_1_3                                 /*   1.3  */
{
float:right;
width: 20%;
border: 1px dotted #ccc;

}


/*Левая колонка */
.block_2_1                                /*   2.1   */
{
float:left;
width: 20%;
border: 1px dotted #ccc;
overflow:hidden;
}

/*центр - 2*/
.block_2_2                                /*   2.2   */
{
margin: auto;                             /*Выравниваем между девой и правой колонкой*/
width: 60%;
border: 1px dotted #ccc;
text-align: center;
background:orange;
}

/*Правая колонка 2*/
.block_2_3                                 /*   2.3  */
{
float:right;
width: 20%;
border: 1px dotted #ccc;
}



/*Подвал*/
.block_3_1
{
width: 100%;
height: 50px;
background: #ccc;
border: 1px dotted #ccc;
clear:both;

}

</style>


</head>

<body>

<div class="header">   
</div>

<div class="block_1_1"> 1.1</div> 
<div class="block_1_3"> 1.3 </div> 
<div class="block_1_2"> 1.2 </div> 

<div class="block_2_1"> 2.1</div> 
<div class="block_2_3"> 2.3 </div> 
<div class="block_2_2"> 2.2 </div> 

<div class="block_3_1"> 3.1 </div> 

</body>
</html>

Результат:

А затем, если что нибудь пишу например в блоке 1.1, то блок 2.1 съезжает Вправо,

а хотелось бы, чтобы он оставался внизу, под 1.1! То есть сохранялась структура!

Как этого добиться??

Вот, посмотрите:

http://elastic.narod.ru/ScreenShot029.jpg

=====================================================

Задача номер Два:

Хочу сделать Заголовок таким образом:

Основной слой (Header) - растягиваю на всю ширину.

Внутрь него помешаю ещё Пять DIV для разных целей, разного размера, и использую FLOAT для расстановки блоков.

Что не получается:

Последний блок (в коде он зовется <div class="h_02">i5</div>) выезжает за нижнюю границу основного блока!

Код HTML+CSS и принтскрин ниже.

Вопрос:

Как разместить эти Пять Div-oв так, чтобы 3 первые были слева, 4-й посередине, а 5-й справа (см. рисунок ниже).

Вот код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<style>

#body
{min-width:8000px;
}

/*Заголовок*/
.header
{
 width:100%;
 text-align:center;
 border: 1px dotted gray;

}

.icon1{width: 15px;height:15px;border:1px dotted gray;float:left;}
.icon2{width: 15px;height:15px;border:1px dotted gray;float:left;}
.icon3{width: 15px;height:15px;border:1px dotted gray;float:left;}

.h_01 {width:80%;height:150px;margin:0 auto;border:3px dotted;}

.h_02 {width:10px;height:100px;border:3px double;float:right;}
</style>


</head>

                              <!--        ТЕЛО                     -->

<body>

<div class="header" align="center">   

<div class="icon1">i1</div>
<div class="icon2">i2</div>
<div class="icon3">i3</div>

<div class="h_01">i4</div>

<div class="h_02">i5</div>

</div>

</body>

</html>

Результат:

Edited August 28, 2012 by alexriz
Для кода используйте тег CODE

Yazon_Nile · August 28, 2012

1 - используй инлаин блоки. Если важны борделы и тд - не мучайся и делай таблицей.

2 - сори. не понял

kolob204 · August 28, 2012

1 - используй инлаин блоки. Если важны борделы и тд - не мучайся и делай таблицей.
2 - сори. не понял

1 - понял эхх, жаль. Хотел Понять как DiV-aми это сделать. ну ладно, буду таблицы клепать.

2 - Ну вот на картнке Серый Сплошной бордер на всю ширину экрана, это HEADER.

Внутри него DIV"ы : i1, i2,i3 маленькие слева. i4 - посередине с точечным бордюром , и i5 - который НИЖЕ задуманного места, за границей HEADER (на ПринтСкрине - на этом блоке

мышка наведена)

Дык я не понимаю, - почему этот блок уехал вниз, а не находится в пределах блока <div class="header"> (в пределах бордюра).

Yazon_Nile · August 28, 2012

1. Хоть эх, хоть не эх. Но то, что ты хочешь сделать делается таблицей. Может ты неверно выражаешься. Ещё раз говорю, если бордеры и заливка непринципильна - пробуй инлайнблоками.

2. А с чего ему быть на линии?) Поставь его по потому ПЕРЕД i4 и флотни вправо.

kolob204 · August 28, 2012

Спасибо за ответы.

Не знал, что порядок должен был быть таким: сначала i5,а потом i4. А FlOAT был уже. Получилось!

Sign In

Вопрос по DIV

Question

kolob204

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Yazon_Nile

Link to comment

Share on other sites

kolob204

Link to comment

Share on other sites

Yazon_Nile

Link to comment

Share on other sites

kolob204

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information