Jump to content
  • 0

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

DDX

Asked by DDX,

 Share

Question

DDX Explorer

DDX

Posted
Posted

Всем привет! Такой вопрос. Ниже я выложил код, хочу, чтобы блоки 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>

Link to comment
Share on other sites

20 answers to this question

Recommended Posts

  • 0
klierik Middle Developer

klierik

Posted
Posted

а с какой целью используется 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>

Link to comment
Share on other sites
  • 0
DDX Explorer

DDX

Posted
  • Author
Posted

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>

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

Link to comment
Share on other sites
  • 0
DDX Explorer

DDX

Posted
  • Author
Posted

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 используется.

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

Link to comment
Share on other sites
  • 0
DDX Explorer

DDX

Posted
  • Author
Posted (edited)

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

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

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

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

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

4c680eeb1acc.gif

Edited by DDX
Link to comment
Share on other sites
  • 0
DDX Explorer

DDX

Posted
  • Author
Posted

psywalker

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

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

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

Link to comment
Share on other sites
  • 0
DDX Explorer

DDX

Posted
  • Author
Posted

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 можно прописывать одновременно два селектора и при этом код всё равно остаётся рабочим то буду крайне благодарен.

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

Link to comment
Share on other sites
  • 0
klierik Middle Developer

klierik

Posted
Posted

Вариант 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. Для него написал фик на скорую руку для растяжки высоты центральной колонки. в общем почва для раздумия есть ;)

Link to comment
Share on other sites
  • 0
DDX Explorer

DDX

Posted
  • Author
Posted

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 пикселей.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
psywalker

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

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

Link to comment
Share on other sites
  • 0
DDX Explorer

DDX

Posted
  • Author
Posted (edited)

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 by DDX
Link to comment
Share on other sites
  • 0
DDX Explorer

DDX

Posted
  • Author
Posted

psywalker

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

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

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
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • 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

  I accept