Позиционирование блоков div

DDX · June 8, 2010

Всем привет! Такой вопрос. Ниже я выложил код, хочу, чтобы блоки leftdown и centerdown распологались под leftmiddle и centermiddle соответственно, однако ничего не получается, со свойством position я уже возился, разные параметры ставил, однако никак не получается из за того что блоки leftmiddle и centermiddle эластичные.

Кто нибудь знает, вообще возможно такое сделать, что я хочу? Может подскажете какое нибудь свойство которое регулирует это действие.

Памагите!!!

<style type="text/css">
   BODY{ 
	   background-color:;
	   background-image:url();
	   background-repeat:repeat-y;
	   margin:0;
	   width:1024px;
   }
   .main{
	   width:1024px;
	   margin:0px;
   }
   .leftup{
	   position:absolute;
	   width:300px;
	   height:300px;
	   left:0px;
	   top:0px;
   }
   .centerup{
	   position:absolute;
	   width:724px;
	   height:300px;
	   left:300px;
	   top:0px;
	   background-color:#CCC;  
   }
   .leftmiddle{
	   position:absolute;
	   width:300px;
	   left:0px;
	   top:300px;
	   min-width:300px;
	   min-height:468px;
	   background-color:#333;
   }
   .centermiddle{
	   position:absolute;
	   width:724px;
	   left:300px;
	   top:300px;
	   min-width:724px;
	   min-height:468px;
	   background-color:#CCC;  
   }
   .leftdown{
	   position:absolute;
	   width:300px;
	   height:30px;
	   left:0px;
	   bottom:0px
	   background-color:#F00;
   }
   .centerdown{
	   position:absolute;
	   width:724px;
	   height:30px;
	   left:300px;
	   background-color:#F00;
   }
</style>

<body>
<div class="main">
<div class="leftup"></div>
<div class="centerup"></div>
<div class="leftmiddle"></div>
<div class="centermiddle"></div>
<div class="leftdown"></div>
<div class="centerdown"></div>
</div>
</body>

rus · June 8, 2010

лучше думаю без позиционирования решить, чисто на флоатах и клирингах.

klierik · June 8, 2010

а с какой целью используется Absolute ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Untitled Document</title>
</head>

	<style type="text/css">
		* {margin:0; padding:0;}

		/* layout */
		div.l-layout {width: 1000px;}
			div.l-case {overflow:hidden; zoom: 1;}
				div.l-left {float:left; width:300px; height:300px;}
				div.l-right {height:300px; margin-left:300px;}

			div.l-footer {}
				div.l-footer div.l-left, div.l-footer div.l-right {height:40px;}

	</style>

<body>

	<!-- layout -->
	<div class="l-layout">

		<div class="l-case">
			<div class="l-left" style="background:#f00;"></div>
			<div class="l-right"  style="background:#f0f;"></div>
		</div>

		<div class="l-case">
			<div class="l-left" style="background:#0f0;"></div>
			<div class="l-right"  style="background:#00f;"></div>
		</div>

		<div class="l-case l-footer">
			<div class="l-left" style="background:#ff0;"></div>
			<div class="l-right"  style="background:#f00;"></div>
		</div>

	</div>
	<!-- /layout -->

</body>
</html>

DDX · June 8, 2010

rus

Хотелось бы всё таки решить проблему в рамках только свойства position, да и просто интересно, почему не срабатывает свойство когда вроде всё правильно прописанно.

klierik

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Анатомия Авто</title>
<style type="text/css">
   BODY{ 
	   background-color:;
	   background-image:url();
	   background-repeat:repeat-y;
	   margin:0;
	   width:1024px;
   }
   .main{
	   width:1024px;
	   margin:0px;
   }
   .leftup{
	   position:absolute;
	   width:300px;
	   height:300px;
	   left:0px;
	   top:0px;
   }
   .centerup{
	   position:absolute;
	   width:724px;
	   height:300px;
	   left:300px;
	   top:0px;
	   background-color:#CCC;  
   }
   .leftmiddle{
	   position:absolute;
	   width:300px;
	   left:0px;
	   top:300px;
	   min-width:300px;
	   min-height:468px;
	   background-color:#333;
   }
   .centermiddle{
	   position:absolute;
	   width:724px;
	   left:300px;
	   top:300px;
	   min-width:724px;
	   min-height:468px;
	   background-color:#CCC;  
   }
   .leftdown{
	   position:absolute;
	   width:300px;
	   height:30px;
	   left:0px;
	   bottom:0px;
	   background-color:#F00;
   }
   .centerdown{
	   position:absolute;
	   width:724px;
	   height:30px;
	   left:300px;
	   background-color:#F00;
   }
   .autologo{
	   top:170px;
	   left:300px;
	   position:absolute;
   }
   a.active{
	   color:#666;
   }
   a.link{
	   color:#666;
   }
   a.visited{
	   color:#666;
   }
   .headtext{
	   position:absolute;
	   top:11px;
	   left:450px;
	   right:90px;
	   width:534px;
	   font-style:normal;
	   font-variant:normal;
	   font-weight:bold;
	   font-size:44px;
	   font-family:Arial, Helvetica, sans-serif;
	   color:#F00;
   }
   .tel{
	   position:absolute;
	   top:55px;
	   left:530px;
	   right:225px;
	   width:309px;
	   font-style:normal;
	   font-variant:normal;
	   font-weight:bold;
	   font-size:36px;
	   font-family:Arial, Helvetica, sans-serif;
	   color:#F00;
   }
   .email{
	   position:absolute;
	   top:115px;
	   left:570px;
	   right:273px;
	   width:201px;
	   font-style:normal;
	   font-variant:normal;
	   font-weight:bold;
	   font-size:20px;
	   font-family:Arial, Helvetica, sans-serif;
   }
   .maintext{
	   position:absolute;
	   font-family:Arial, Helvetica, sans-serif;
	   font-size:15px;
	   font-style:normal;
	   font-variant:normal;
	   font-weight:normal;
	   top:335px;
	   left:350px;
	   right:50px;
	   width:624px;
   }
   .hmenu{
	   font-family:Arial, Helvetica, sans-serif;
	   font-size:16px;
	   width:724px;
	   height:20px;
	   position:absolute;
	   z-index:100;
	   left:300px;
	   top:300px;
   }
   .hmenu ul li a, .hmenu ul li a:visited{
	   display:block;
	   line-height:20px;
	   text-decoration:none;
	   width:101px;
	   height:20px;
	   text-align:center;
	   border:1px solid #FFF;
	   background:#1E56A1;
	   font-size:16px;
	   overflow:hidden;
	   color:#FFF;
   }
   .hmenu ul{
	   padding:0;
	   margin:0;
	   list-style:none;
   }
   .hmenu ul li{
	   float:left;
	   position:relative;
   }
   .hmenu ul li ul{
	   display:none;
   }
   .hmenu ul li:hover a{
	   background:#FFF;
	   color:#1E56A1;
   }
   .hmenu ul li:hover ul{
	   display:block;
	   position:absolute;
	   top:21;
	   left:0;
   }
   .hmenu ul li:hover ul li a{
	   display:block;
	   background:#1E56A1;
	   color:#FFF;
   }
   .hmenu ul li:hover ul li a:hover{
	   background:#FFF;
	   color:#1E56A1;
   }
   .vmenu {
	   font-family:Arial, Helvetica, sans-serif;
	   font-size:16px;
	   position:relative;
	   z-index:100;
	   left:50px;
	   top:320px;
	   width:200px;
	   height:25px;
   }
   .vmenu ul li a, .vmenu ul li a:visited{
	   display:block;
	   text-decoration:none;
	   width:200px;
	   height:25px;
	   text-align:center;
	   border:1px solid #FFF;
	   background:#1E56A1;
	   font-size:16px;
	   line-height:20px;
	   overflow:hidden;
	   color:#FFF;
   }
   .vmenu ul{
	   padding:0;
	   margin:0;
	   list-style:none;
   }
   .vmenu ul li{
	   position:relative;
   }
   .vmenu ul li ul{
	   display:none;
   }
   .vmenu ul li:hover a{
	   background:#FFF;
	   color:#1E56A1;
   }
   .vmenu ul li:hover ul{
	   display:block;
	   position:absolute;
	   top:0;
	   left:200px;
   }
   .vmenu ul li:hover ul li a{
	   display:block;
	   background:#1E56A1;
	   color:#FFF;
   }
   .vmenu ul li:hover ul li a:hover{
	   background:#FFF;
	   color:#1E56A1;
   }
  </style>
</head>

<body>
<div class="main">
<div class="aalogo"><img src="logo.jpg"></div>
<div class="leftup"></div>
<div class="centerup"></div>
<div class="leftmiddle"></div>
<div class="centermiddle"></div>
<div class="leftdown"></div>
<div class="centerdown"></div>
<div class="headtext">1234567890</div>
<div class="tel">+7 (495) 000-00-00</div>
<div class="email"><a href="mailto: info@mysite.ru" style="text-decoration:none; color:#F00" >info@mysite.ru</a></div>
<div class="hmenu">
<ul>
	<li><a class="hide" href="1.html">1</a></li>
	<li><a class="hide" href="2.html">2</a></li>
	<li><a class="hide" href="3.html">3</a>
		<ul>
			<li><a href="11.html" title="">1</a></li>
			<li><a href="22.html" title="">2</a></li>
			<li><a href="33.html" title="">3</a></li>
			<li><a href="44.html" title="">4</a></li>
			<li><a href="55.html" title="">5</a></li>
		</ul>
		</li>
	<li><a class="hide" href="4.html">4</a></li>
	<li><a class="hide" href="5.html">5</a></li>
	<li><a class="hide" href="6.html">6</a></li>
	<li><a class="hide" href="7.html">7</a></li>
</ul>
</div>
<div class="vmenu">
<ul>
	<li><a class="hide" href="1.html">1</a></li>
	<li><a class="hide" href="2.html">2</a></li>
	<li><a class="hide" href="3.html">3</a>
		<ul>
			<li><a href="11.html" title="">1</a></li>
			<li><a href="22.html" title="">2</a></li>
			<li><a href="33.html" title="">3</a></li>
			<li><a href="44.html" title="">4</a></li>
			<li><a href="55.html" title="">5</a></li>
		</ul>
		</li>
	<li><a class="hide" href="4.html">4</a></li>
	<li><a class="hide" href="5.html">5</a></li>
	<li><a class="hide" href="6.html">6</a></li>
	<li><a class="hide" href="7.html">7</a></li>
</ul>
</div>
<div class="maintext">
<p>1111111111111111111111111111111111111111111<br>
1111111111111111111111111111111111111111111<br>
1111111111111111111111111111111111111111111<br>
1111111111111111111111111111111111111111111<br>
1111111111111111111111111111111111111111111<br></p>
</div>
</div>
</body>
</html>

За свой пример спасибо, разбираюсь.

psywalker · June 8, 2010

А покажи скриншот того, что хочешь получить с объяснениями.

DDX · June 9, 2010

psywalker

Я не могу этого сделать, потому что блоки то не становятся туда куда мне нужно, как я скриншот то сделаю?

klierik

Посмотрел код, всё равно тяжко, пытаюсь его для себя приспособить, упростить. Тем более что мне нужно, чтобы документ был <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> , а не <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
<style type="text/css">
		* {margin:0; padding:0;}

		/* layout */
		div.l-layout {}
			div.l-case {}
				div.l-left {float:left; width:300px; height:300px;}
				div.l-right {height:300px; min-width:724px;}
				div.1-colup {height:300px; background-color:#0F3}

				div.l-left1 {float:left; width:300px; min-height:468px;}
				div.l-right1 {min-height:468px; min-width:724px;}
				div.1-colmiddle {min-height:468px; background-color:#0F3}

				div.1-left2 {float:left; width:300px; height:30px;}
				div.1-right2 {height:30px; width:724px;}
				div.1-coldown {height:30px; background-color:#0F3}

</style>
</head>

<body>
 <!-- layout -->
	<div class="l-layout">

		<div class="l-case">
			<div class="l-left" style="background:#f00;"></div>
			<div class="l-right"  style="background:#f0f;"></div>
			<div class="1-colup"></div>
		</div>

		<div class="l-case">
			<div class="l-left1" style="background:#0f0;"></div>
			<div class="l-right1"  style="background:#00f;"></div>
			<div class="1-colmiddle"></div>
		</div>

		<div class="l-case">
			<div class="1-left2" style="background:#ff0;"></div>
			<div class="1-right2" style="background:#f00;"></div>
			<div class="1-coldown"></div>
		</div>

	</div>
<!-- /layout -->

</body>
</html>

Я там добавил ещё одну колонку справа, она будет появлятся когда размер экрана будет больше чем 1024 пикселя, но почему то она помещается под два других блока и выравнивание float не помогает вообще, хоть плач. А нижняя строка тоже почему то не выравнивается хотя свойство float используется.

Пожалуйста помогите.

klierik · June 9, 2010

нарисуй и выложи схему в фотошопе, к примеру, что бы было понятно что именно должно быть в конечном итоге

DDX · June 9, 2010

1 и 2 фиксированные размеры

3 и 4 фиксированно по горизонтали и эластично по вертикали

5 и 6 фиксированные размеры

7 и 9 фиксированно по вертикали и эластично по горизонтали

8 эластично по вертикали и горизонтали

Edited June 9, 2010 by DDX

psywalker · June 9, 2010

Полагаю тут без позиционирования не обойтись.

DDX · June 9, 2010

psywalker

То есть надо оставлять свой код и добавлять float как подсказывает klierik? Или ещё что то надо?

Самое дурацкое что нижняя строка не хочет выравниваться да и колонка правая плывёт хотя везде этот float стоит.

И ещё почему то нельзя указывать у центрального столбика нормально ширину, а только минимальную, если указать нормально ширину то блоки сужаются.

psywalker · June 9, 2010

Это сложно объяснить. Тут нужно абсолютами растягивать нужные блоки, а в них уже делать каркас основной на флоатах. Задача не простая, поэтому нужен опыт.

DDX · June 9, 2010

psywalker

А тогда может хотя бы сможешь объяснить почему свойства, bottom, margin-bottom, padding-bottom не дают эфекта когда им ставить значение 0 пикселей для блоков 5, 6, ведь вроде должно быть всё нормально и они должны держаться внизу постоянно. Я максимум чего смог добиться это что они внизу держаться за счёт position:fixed , но они внизу только экрана браузера, а не сайта. Да и фиг с правой колонкой блоков 5, 7, 9. Мне бы только 5 и 6 прикрутить нормально, а то невозможно ведь получается ничего в блоках 3 и 4 разместить так, чтобы всё время контент внизу страницы сайта был, а не только экрана браузера.

Код который я получил от klierik я разбираю, чтобы его понять, а не тупо скопировать. Получилось, что можно некоторые вещи удалить безболезнено. Вроде работает. Или он считается кривым?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
<style type="text/css">
		* {margin:0; padding:0;}

		div.l-layout {width: 1024px;}
			div.l-case {}
				.leftup {float:left; width:300px; height:300px;}
				.centerup {height:300px; margin-left:300px;}

				.leftmiddle {float:left; width:300px; min-height:468px;}
				.centermiddle {min-height:468px; margin-left:300px;}

				.dawn .leftup, .dawn .centerup {height:30px;}  
</style>
</head>

<body>
	<div class="l-layout">

		<div class="l-case">
			<div class="leftup" style="background:#f00;"></div>
			<div class="centerup" style="background:#f0f;"></div>
		</div>

		<div class="l-case">
			<div class="leftmiddle" style="background:#0f0;"></div>
			<div class="centermiddle" style="background:#00f;"></div>
		</div>

		<div class="dawn">
			<div class="leftup" style="background:#ff0;"></div>
			<div class="centerup" style="background:#f00;"></div>
		</div>

	</div>
</body>
</html>

Если найдёшь в себе силы рассказать каким образом блок l-case узнаёт каким образом ему позиционироваться друг за другом без указания margin, padding, left(right/top/bottom) и не сыпаться, а так же зачем, почему и для чего в блоке div можно прописывать одновременно два селектора и при этом код всё равно остаётся рабочим то буду крайне благодарен.

Читаю всё время что на сайте пишут, но там таких примеров к сожалению нет.

psywalker · June 10, 2010

А тебе нужно чтобы подвал был всегда внизу?

Середина вся (три колонки) должна тянуться от шапки до подвала, даже когда в ней нет контента?

DDX · June 10, 2010

psywalker

Да, подвал должен быть всегда внизу.

Да, середина должна вытягиваться на весь экран как минимум даже когда контента нет.

klierik · June 10, 2010

Вариант 1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Untitled Document</title>

	<style type="text/css">

		* {margin:0; padding:0}

		html, body {height:100%;}

		/* layout */
		div.l-lay {height:100%; position:relative;}

			div.l-tl, div.l-tc, div.l-tr,
			div.l-ml, div.l-mc, div.l-mr,
			div.l-bl, div.l-bc, div.l-br { position:absolute; }

			div.l-tl { top:0; left:0; width: 200px; height:300px; background:#f00; }
			div.l-tc { top:0; left: 200px; width:300px; height:300px; background:#0f0; }
			div.l-tr { top: 0; left: 500px; right: 0; height:300px; background:#00f; }

			div.l-ml { left: 0; top: 300px; bottom: 200px; width:200px; background:#0c0; }
			div.l-mc { left: 200px; top: 300px; bottom: 200px; width:300px; background:#0cc; }
			div.l-mr { left: 500px; top: 300px; bottom: 200px; right: 0; background:#f0f; }

			div.l-bl { left: 0; bottom: 0; height: 200px; width: 200px; background:#93c; }
			div.l-bc { left: 200px; bottom: 0; height: 200px; width: 300px; background:#00c; }
			div.l-br { left: 500px; right: 0; bottom: 0; height: 200px; background:#0ce; }

	</style>

</head>

<body>

	<!-- layout -->
	<div class="l-lay">

		<!-- top -->
		<div class="l-tl"></div>
		<div class="l-tc"></div>
		<div class="l-tr"></div>
		<!-- /top -->

		<!-- middle -->
		<div class="l-ml"></div>
		<div class="l-mc"></div>
		<div class="l-mr"></div>
		<!-- /middle -->

		<!-- bottom -->
		<div class="l-bl"></div>
		<div class="l-bc"></div>
		<div class="l-br"></div>
		<!-- /bottom -->

	</div>
	<!-- /layout -->

</body>
</html>

под ИЕ6 нужно написать експрешн

вариант 2:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Untitled Document</title>

	<style type="text/css">

		* {margin:0; padding:0}

		html, body {height:100%;}

		/* layout */
		table.l-lay { width: 100%; height:100%; table-layout:fixed; border-collapse:collapse; }
			table.l-lay tr.top {}
				table.l-lay tr.top td {height: 200px;}
				table.l-lay tr.top td.l {width:200px; background:#f00;}
				table.l-lay tr.top td.c {width:500px; background:#0f0;}
				table.l-lay tr.top td.r {background:#00f;}

			table.l-lay tr.mdl {}
				table.l-lay tr.mdl td {}
				table.l-lay tr.mdl td.l {background:#00f;}
				table.l-lay tr.mdl td.c {background:#0ff;}
					div.ie6-wifth-fix {_height:expression(this.height = document.body.clientHeight-300 + 'px');}
				table.l-lay tr.mdl td.r {background:#f0f;}

			table.l-lay tr.btm {}
				table.l-lay tr.btm td {height:100px;}
					table.l-lay tr.btm td.l {background:#ff0;}
					table.l-lay tr.btm td.c {background:#00f;}
					table.l-lay tr.btm td.r {background:#0f0;}

	</style>

</head>

<body>

	<!-- layout -->
	<table class="l-lay"><col><col><col>
		<tr class="top">
			<td class="l"> </td><td class="c"> </td><td class="r"> </td>
		</tr>
		<tr class="mdl">
			<td class="l"> </td><td class="c"><div class="ie6-wifth-fix"></div></td><td class="r"> </td>
		</tr>
		<tr class="btm">
			<td class="l"> </td><td class="c"> </td><td class="r"> </td>
		</tr>
	</table>
	<!-- /layout -->

</body>
</html>

Так же траблы ИЕ6. Для него написал фик на скорую руку для растяжки высоты центральной колонки. в общем почва для раздумия есть

psywalker · June 10, 2010

Присоединяюсь к klierik, почва точно хорошая

DDX · June 11, 2010

klierik

Спасибо за два варианта, я решил попробовать сделать на таблицах, но потом позже обязательно переделаю на блоки.

Если експресион это строка как во втором примере div.ie6-wifth-fix {_height:expression(this.height = document.body.clientHeight-300 + 'px');} , то я вроде нашёл на этом сайте упоминание об этом, что это и как работает, читаю, и пытаюсь разобраться. Хотя странно почему этот способ написания стилей не поместили в общем списке свойств и параметров CSS.

Кстати ошибка с шириной таблицы если не указать свойство и параметр в стилях table-layout:fixed появляется даже в IE7, я проверял. При этом начинает плыть весь левый столбик.

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

Вот мой код на данный момент.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
<style type="text/css">
		   BODY{
			   margin:0px;
			   padding:0px;
		   }
		   .maintable{
			   table-layout:fixed;
			   width:100%;
			   height:100%;
		   }
		   .blocklefttop{
			   width:300px;
			   max-width:300px;
			   height:300px;
		   }
		   .blockcentertop{
			   width:724px;

			   height:300px;
		   }
		   .blockrighttop{
			   height:300px;
		   }
		   .blockleftmiddle{
			   width:300px;
			   max-width:300px;

			   min-height:468px;
		   }
		   .blockcentermiddle{
			   width:724px;

			   min-height:468px;
		   }
		   .blockrightmiddle{
			   min-height:468px;
		   }
		   .blockleftbottom{
			   width:300px;
			   max-width:300px;
			   height:70px;
		   }
		   .blockcenterbottom{
			   width:724px;

			   height:70px;
		   }
		   .blockrightbottom{
			   height:70px;
		   }
		   .aalogo{
		   }
		   .headtext{
			   position:absolute;
			   top:11px;
			   left:450px;
			   right:90px;
			   width:534px;
			   font-style:normal;
			   font-variant:normal;
			   font-weight:bold;
			   font-size:44px;
			   font-family:Arial, Helvetica, sans-serif;
			   color:#9DB8FD;
		   }
		   .tel{
			   position:absolute;
			   top:55px;
			   left:530px;
			   right:225px;
			   width:309px;
			   font-style:normal;
			   font-variant:normal;
			   font-weight:bold;
			   font-size:36px;
			   font-family:Arial, Helvetica, sans-serif;
			   color:#9DB8FD;
		   }
		   .email{
			   position:absolute;
			   top:115px;
			   left:570px;
			   right:273px;
			   width:201px;
			   font-style:normal;
			   font-variant:normal;
			   font-weight:bold;
			   font-size:20px;
			   font-family:Arial, Helvetica, sans-serif;
		   }
		   .maincontent{
			   width:724px;
			   min-height:468px;
			   margin-left:0px;
			   margin-top:20px;
		   }

		.hmenu{
	   font-family:Arial, Helvetica, sans-serif;
	   font-size:16px;
	   width:724px;
	   height:20px;
	   position:absolute;
	   z-index:100;
	   left:300px;
	   top:300px;
   }
   .hmenu ul li a, .hmenu ul li a:visited{
	   display:block;
	   line-height:20px;
	   text-decoration:none;
	   width:101px;
	   height:20px;
	   text-align:center;
	   border:1px solid #FFF;
	   background:#7A6CDB;
	   font-size:16px;
	   overflow:hidden;
	   color:#FFF;
   }
   .hmenu ul{
	   padding:0;
	   margin:0;
	   list-style:none;
   }
   .hmenu ul li{
	   float:left;
	   position:relative;
   }
   .hmenu ul li ul{
	   display:none;
   }
   .hmenu ul li:hover a{
	   background:#FFF;
	   color:#1E56A1;
   }
   .hmenu ul li:hover ul{
	   display:block;
	   position:absolute;
	   top:21;
	   left:0;
   }
   .hmenu ul li:hover ul li a{
	   display:block;
	   background:#1E56A1;
	   color:#FFF;
   }
   .hmenu ul li:hover ul li a:hover{
	   background:#FFF;
	   color:#1E56A1;
   }
   .vmenu {
	   font-family:Arial, Helvetica, sans-serif;
	   font-size:16px;
	   position:absolute;
	   z-index:100;
	   left:50px;
	   top:320px;
	   width:200px;
	   height:25px;
   }
   .vmenu ul li a, .vmenu ul li a:visited{
	   display:block;
	   text-decoration:none;
	   width:200px;
	   height:25px;
	   text-align:center;
	   border:1px solid #FFF;
	   background:#7A6CDB;
	   font-size:16px;
	   line-height:20px;
	   overflow:hidden;
	   color:#FFF;
   }
   .vmenu ul{
	   padding:0;
	   margin:0;
	   list-style:none;
   }
   .vmenu ul li{
	   position:relative;
   }
   .vmenu ul li ul{
	   display:none;
   }
   .vmenu ul li:hover a{
	   background:#FFF;
	   color:#1E56A1;
   }
   .vmenu ul li:hover ul{
	   display:block;
	   position:absolute;
	   top:0;
	   left:200px;
   }
   .vmenu ul li:hover ul li a{
	   display:block;
	   background:#1E56A1;
	   color:#FFF;
   }
   .vmenu ul li:hover ul li a:hover{
	   background:#FFF;
	   color:#1E56A1;
   }		   
</style>
</head>

<body>
<table border="0" cellpadding="0" cellspacing="0" class="maintable">
 <col><col><col>
 <tr>
	 <td class="blocklefttop" style="background-color:#333">
	   <div class="aalogo"><img src="logo.png"></div>
	 </td>
	 <td class="blockcentertop" style="background-color:#CCC">
	   <div class="headtext">Заголовок сайта.....</div>
	   <div class="tel">+7 (495) 123-45-67</div>
	   <div class="email"><a href="mailto: info@mysite.ru" style="text-decoration:none; color:#9DB8FD" >info@mysite.ru</a></div>
	 </td>
	 <td class="blockrighttop" style="background-color:#9DB8FD"></td>
 </tr>
 <tr>
	 <td class="blockleftmiddle" style="background-color:#333">
	   <div class="vmenu">
		   <ul>
				<li><a class="hide" href="11.html">1</a></li>
				<li><a class="hide" href="22.html">2</a></li>
				<li><a class="hide" href="33.html">3</a>
					<ul>
						<li><a href="1.html" title="">1</a></li>
						<li><a href="2.html" title="">2</a></li>
						<li><a href="3.html" title="">3</a></li>
						<li><a href="4.html" title="">4</a></li>
						<li><a href="5.html" title="">5</a></li>
					</ul>
				</li>
				<li><a class="hide" href="44.html">4</a></li>
				<li><a class="hide" href="55.html">5</a></li>
				<li><a class="hide" href="66.html">6</a></li>
				<li><a class="hide" href="77.html">7</a></li>
		   </ul>
	   </div>
	 </td>
	 <td class="blockcentermiddle" style="background-color:#CCC">
		<div class="hmenu">
			<ul>
				<li><a class="hide" href="11.html">1</a></li>
				<li><a class="hide" href="22.html">2</a></li>
				<li><a class="hide" href="33.html">3</a>
					<ul>
						<li><a href="1.html" title="">1</a></li>
						<li><a href="2.html" title="">2</a></li>
						<li><a href="3.html" title="">3</a></li>
						<li><a href="4.html" title="">4</a></li>
						<li><a href="5.html" title="">5</a></li>
					</ul>
				</li>
				<li><a class="hide" href="44.html">4</a></li>
				<li><a class="hide" href="55.html">5</a></li>
				<li><a class="hide" href="66.html">6</a></li>
				<li><a class="hide" href="77.html">7</a></li>
		   </ul>
		 </div>
		 <div class="maincontent">11111111111111111111<br>
		 11111111111111111111<br>
		 11111111111111111111<br>
		 11111111111111111111<br>
		 11111111111111111111<br>
		 </div>
	  </td>
	  <td class="blockrightmiddle" style="background-color:#9DB8FD"></td>
 </tr>
 <tr>
	  <td class="blockleftbottom" style="background-color:#333"></td>
	  <td class="blockcenterbottom" style="background-color:#CCC"></td>
	  <td class="blockrightbottom" style="background-color:#9DB8FD"></td>
 </tr>
</table>
</body>
</html>

psywalker

Да вот во всю уже раздумываю. А ты как считаешь какой способ было бы правильнее использовать для сайта?

P.S. А вообще это ужас конечно когда приходится прописывать кучу ненужных свойств вроде table-layout, одновременного указания width и max-width как это пришлось делать в левой колонке, а иначе вёрстка плыла, ещё експресион. Потому что смотришь, вроде как всё правильно написал, а появляются ошибки. И главное ну никакой логики в этом нет, потому что какие могут быть ещё уточнения если заданы жёсткие размеры. Пишешь ширину одну для ячейки, а потом ещё будь любезен прописать максимальную ширину, потому что разработчикам браузеров закон не писан, вот ты хоть тресни, хоть весь мир там развались, и то что у ячейки указана жёсткая ширина 300 пикселей это ещё не повод обрабатывать её, как 300 пикселей.

psywalker · June 11, 2010

psywalker
Да вот во всю уже раздумываю. А ты как считаешь какой способ было бы правильнее использовать для сайта?

Я если честно, такое никогда не верстал. Т.е. задачи мне никогда такой не попадалось. Видно не часто такое требуется. Но если будет нужно, я так и буду делать, с учётом того, чтобы каркас при этом был крепкий, т.е. делать буду с умом. Так что почему бы и нет, если этого требует задача.

DDX · June 14, 2010

klierik, psywalker

Не могу не поделиться радостной вестью. Удалось разобраться с вертикальной эластичностью ячеек. Пытался разобраться с указанным фиксом div.ie6-wifth-fix {_height:expression(this.height = document.body.clientHeight-300 + 'px');}, но поскольку до конца не понял, как образуется такое выражение, а статей толковых на этом сайте нашёл только одну да то не совсем к моему случаю относящуюся (http://www.htmlbook.ru/faq/?a=61), то начал искать на других сайтах и нашёл весьма интересное решение в плане упрощении кода.

Вместо {_height:expression(this.height = document.body.clientHeight-300 + 'px');} можно прописать {height:expression(468 + "px");} , что даёт равнозначный результат.

Хорошо бы если кто нибудь столь важные вещи по оптимизации кода в IE6 и IE7 вывел в отдельную статью на сайте, с множеством разных примеров, способов написания и объяснением откуда, что следует, это было бы полезно в ряде случаев.

Вот мой код сейчас:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
<style type="text/css">
		   BODY{
			   margin:0px;
			   padding:0px;
		   }
		   .maintable{
			   table-layout:fixed;
			   width:100%;
			   height:100%;
		   }
		   .blocklefttop{
			   width:300px;
			   max-width:300px;
			   height:300px;
		   }
		   .blockcentertop{
			   width:724px;

			   height:300px;
		   }
		   .blockrighttop{
			   height:300px;
		   }
		   .blockleftmiddle{
			   width:300px;

			   min-height:468px;
		   }
		   .blockcentermiddle{
			   width:724px;

			   min-height:468px;
		   }
		   .blockrightmiddle{
			   min-height:468px;

		   }
		   .blockmiddletr{
			   height:expression(468 + "px");
		   }
		   .blockleftbottom{
			   width:300px;
			   max-width:300px;
			   height:70px;
		   }
		   .blockcenterbottom{
			   width:724px;

			   height:70px;
		   }
		   .blockrightbottom{
			   height:70px;
		   }
		   .aalogo{
		   }
		   .headtext{
			   position:absolute;
			   top:11px;
			   left:450px;
			   right:90px;
			   width:534px;
			   font-style:normal;
			   font-variant:normal;
			   font-weight:bold;
			   font-size:44px;
			   font-family:Arial, Helvetica, sans-serif;
			   color:#9DB8FD;
		   }
		   .tel{
			   position:absolute;
			   top:55px;
			   left:530px;
			   right:225px;
			   width:309px;
			   font-style:normal;
			   font-variant:normal;
			   font-weight:bold;
			   font-size:36px;
			   font-family:Arial, Helvetica, sans-serif;
			   color:#9DB8FD;
		   }
		   .email{
			   position:absolute;
			   top:115px;
			   left:570px;
			   right:273px;
			   width:201px;
			   font-style:normal;
			   font-variant:normal;
			   font-weight:bold;
			   font-size:20px;
			   font-family:Arial, Helvetica, sans-serif;
		   }
		   .maincontent{
			   width:724px;
			   min-height:468px;
			   margin-left:0px;
			   margin-top:20px;
		   }

		.hmenu{
	   font-family:Arial, Helvetica, sans-serif;
	   font-size:16px;
	   width:724px;
	   height:20px;
	   position:absolute;
	   z-index:100;
	   left:300px;
	   top:300px;
   }
   .hmenu ul li a, .hmenu ul li a:visited{
	   display:block;
	   line-height:20px;
	   text-decoration:none;
	   width:101px;
	   height:20px;
	   text-align:center;
	   border:1px solid #FFF;
	   background:#7A6CDB;
	   font-size:16px;
	   overflow:hidden;
	   color:#FFF;
   }
   .hmenu ul{
	   padding:0;
	   margin:0;
	   list-style:none;
   }
   .hmenu ul li{
	   float:left;
	   position:relative;
   }
   .hmenu ul li ul{
	   display:none;
   }
   .hmenu ul li:hover a{
	   background:#FFF;
	   color:#1E56A1;
   }
   .hmenu ul li:hover ul{
	   display:block;
	   position:absolute;
	   top:21px;
	   left:0;
   }
   .hmenu ul li:hover ul li a{
	   display:block;
	   background:#1E56A1;
	   color:#FFF;
   }
   .hmenu ul li:hover ul li a:hover{
	   background:#FFF;
	   color:#1E56A1;
   }
   .vmenu {
	   font-family:Arial, Helvetica, sans-serif;
	   font-size:16px;
	   position:absolute;
	   z-index:100;
	   left:50px;
	   top:320px;
	   width:200px;
	   height:25px;
   }
   .vmenu ul li a, .vmenu ul li a:visited{
	   display:block;
	   text-decoration:none;
	   width:200px;
	   height:25px;
	   text-align:center;
	   border:1px solid #FFF;
	   background:#7A6CDB;
	   font-size:16px;
	   line-height:20px;
	   overflow:hidden;
	   color:#FFF;
   }
   .vmenu ul{
	   padding:0;
	   margin:0;
	   list-style:none;
   }
   .vmenu ul li{
	   position:relative;
   }
   .vmenu ul li ul{
	   display:none;
   }
   .vmenu ul li:hover a{
	   background:#FFF;
	   color:#1E56A1;
   }
   .vmenu ul li:hover ul{
	   display:block;
	   position:absolute;
	   top:0;
	   left:200px;
   }
   .vmenu ul li:hover ul li a{
	   display:block;
	   background:#1E56A1;
	   color:#FFF;
   }
   .vmenu ul li:hover ul li a:hover{
	   background:#FFF;
	   color:#1E56A1;
   }		   
</style>
</head>

<body>
<table border="0" cellpadding="0" cellspacing="0" class="maintable">
 <col><col><col>
 <tr>
	 <td class="blocklefttop" style="background-color:#333">
	   <div class="aalogo"><img src="logo.png" alt="logo"></div>
	 </td>
	 <td class="blockcentertop" style="background-color:#CCC">
	   <div class="headtext">Заголовок сайта.....</div>
	   <div class="tel">+7 (495) 123-45-67</div>
	   <div class="email"><a href="mailto: info@mysite.ru" style="text-decoration:none; color:#9DB8FD" >info@mysite.ru</a></div>
	 </td>
	 <td class="blockrighttop" style="background-color:#9DB8FD"></td>
 </tr>
 <tr class="blockmiddletr">
	 <td class="blockleftmiddle" style="background-color:#333">
	   <div class="vmenu">
		   <ul>
				<li><a class="hide" href="11.html">1</a></li>
				<li><a class="hide" href="22.html">2</a></li>
				<li><a class="hide" href="33.html">3</a>
					<ul>
						<li><a href="1.html" title="">1</a></li>
						<li><a href="2.html" title="">2</a></li>
						<li><a href="3.html" title="">3</a></li>
						<li><a href="4.html" title="">4</a></li>
						<li><a href="5.html" title="">5</a></li>
					</ul>
				</li>
				<li><a class="hide" href="44.html">4</a></li>
				<li><a class="hide" href="55.html">5</a></li>
				<li><a class="hide" href="66.html">6</a></li>
				<li><a class="hide" href="77.html">7</a></li>
		   </ul>
	   </div>
	 </td>
	 <td class="blockcentermiddle" style="background-color:#CCC">
		<div class="hmenu">
			<ul>
				<li><a class="hide" href="11.html">1</a></li>
				<li><a class="hide" href="22.html">2</a></li>
				<li><a class="hide" href="33.html">3</a>
					<ul>
						<li><a href="1.html" title="">1</a></li>
						<li><a href="2.html" title="">2</a></li>
						<li><a href="3.html" title="">3</a></li>
						<li><a href="4.html" title="">4</a></li>
						<li><a href="5.html" title="">5</a></li>
					</ul>
				</li>
				<li><a class="hide" href="44.html">4</a></li>
				<li><a class="hide" href="55.html">5</a></li>
				<li><a class="hide" href="66.html">6</a></li>
				<li><a class="hide" href="77.html">7</a></li>
		   </ul>
		 </div>
		 <div class="maincontent">11111111111111111111<br>
		 11111111111111111111<br>
		 11111111111111111111<br>
		 11111111111111111111<br>
		 11111111111111111111<br>
		 </div>
	  </td>
	  <td class="blockrightmiddle" style="background-color:#9DB8FD"></td>
 </tr>
 <tr>
	  <td class="blockleftbottom" style="background-color:#333"></td>
	  <td class="blockcenterbottom" style="background-color:#CCC"></td>
	  <td class="blockrightbottom" style="background-color:#9DB8FD"></td>
 </tr>
</table>
</body>
</html>

P.S. Так же есть вариант замены {_height:expression(this.height = document.body.clientHeight-300 + 'px');} на {height:expression(this.height < 468? "468px":"auto");}.

Edited June 14, 2010 by DDX

psywalker · June 14, 2010

Воо, молодца, совсем другое дело.

Да, и конечноже, спасибо за идеи. Некоторые украл у тебя, с экспрешанами которые. :lol:

DDX · June 14, 2010

psywalker

В свою очередь я эти идеи нашёл на разных сайтах, в том числе англоязычных, в том числе и на http://msdn.microsoft.com/en-us/library/ms537634.aspx откуда собственно, как я понял ноги то и ростут, а называется эта штука Dynamic Properties (динамическое свойство).

Способ {height:expression(this.height < 468? "468px":"auto");} найден путём простого тыка в попытке найти где код перестанет работать, если из него что то удалить.

Sign In

Позиционирование блоков div

Question

Link to comment

Share on other sites

20 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information