Реально ли так сверстать?

skatadov · July 10, 2009

Возникла необходимость сверстать вот такой вот шаблон.

Контентный блок(серые прямоугольники на белом фоне) фиксированной ширины, и расположен по центру.

На первый взгляд, все просто, если бы не одно НО.

Вертикально расположенный пунктир по бокам (на сером фоне).

Вне зависимости от ширины свободного места вокруг контентной части пунктирная линия должна идти по центру этого свободного пространства.

Единственное решение, которое мне на ум пришло, приведено ниже. Но увы, оно не подходит - нужно сделать пунктир графикой - dashed-ы имеют существенно меньшую длину, чем черточки в PSD.

А вот как сделать с графическим пуктиром выполняя все поставленные условия, я додуматься не могу...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<!--[if IE 6]><script type="text/javascript" src="minmax.js"></script><![endif]-->

<style type="text/css">

*	{
	margin: 0;
	padding: 0;
	}
html	{
	height: 100%;
	width: 100%;
	background: #9CA7B0;
	}
body	{
	position: relative;
	min-height: 100%;
	margin: 0 5%;
	border-left: 3px dashed #fff;
	border-right: 3px dashed #fff;
	padding: 0 5%;
	min-width: 994px;
	max-width: 1280px;
	}
#content	{
	position: relative;
	}
#content_1{
	background: #c0ddff;
	width: 994px;
	margin: 0 auto;
	}

#fg	{
	height: 100px;
	background: black;
	clear: both;
	}
#footer	{
	position: absolute;
	bottom: 0;
	width: 988px;
	height: 100px;
	background: brown;
	}



</style>

</head>

<body>

<div id="content">
	<div id="content_1">
		home<br />content<br />end
	</div>
</div>

<div id="fg"></div>
<div id="footer"></div>



</body>

</html>

Edited July 10, 2009 by skatadov

psywalker · July 10, 2009

Сделай так: вот эта конструкция будет твоими вертикальными полосками. Возьми полоску шириной чуть больше твоего сайта и сделай ей фон по бокам(твой бордер), растяни его по оси-y, а в нём уже делай сайт и не парься

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
<style type="text/css">
*{ margin: 0; padding: 0;}
	html { height: 100%; }
	body { height: 100%;}
	div{ 
		min-height: 100%; 
		background: url(../min-height-border/logo.jpg) repeat-y;
		width: 1024px; 
		margin: 0 auto;
	}
</style>
</head>

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

Edited July 10, 2009 by psywalker

Glebr · July 10, 2009

реально. используй "-" в отступах

Может поможет

Azadi · July 10, 2009

Если совсем отчаяшься, то можно пойти на компромисс с совестью и сделать каркас с помощью таблицы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml"> 
  <head>  
  <title>[TITLE]</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	html {
		height: 100%;
		width: 100%;
		background: #9CA7B0;
   }
	body {
		position: relative;
		height:100%;
		min-width: 760px;
		max-width: 1280px;
   }
	.wrap {
		position: relative;
		background:#fff;
		width:760px;
		height:auto !important;
		min-height:100%;
		height:100%;
		margin:0 auto;
   }
	.leftborder, .rightborder {
		position:absolute;
		right:760px;
		left:0;
		height:100%;
		top:0;
		bottom:0;
	}
		.leftborder I, .rightborder I {
			width:50%;
			position:absolute;
			display:block;
			height:100%;
			background:#f00;
		}
	.rightborder {
		left:760px;
		right:0;
	}
		.rightborder I {
			left:50%;
		}
  </style>
  <body>
		<div class="leftborder">
			<i></i>
		</div>
		<div class="rightborder">
			<i></i>
		</div>
	<div class="wrap">
		<div class="content">
				content
		</div>
	</div>
  </body>
 </html>

Я бы, наверное, сверстал на таблицах и не мучился.

Edited July 10, 2009 by Azadi

psywalker · July 10, 2009

Azadi

Я бы, наверное, сверстал на таблицах и не мучился.

А мой способ чем хреновый?

Azadi · July 11, 2009

Azadi
А мой способ чем хреновый?

Не знаю, я не понял ни из кода, ни из объяснений, что ты имел в виду :blink:

psywalker · July 11, 2009

Не знаю, я не понял ни из кода, ни из объяснений, что ты имел в виду smile.gif

А чё непонятного-то, вот допустим берёшь полоску Шириной 1200 пикселов и высотой 20 пикселов допустим. Она состоит из прозрачной середины и из рисунков по бокам - как раз эти чёрточки. Тянется эта полоска до низа, вот и всё!

rash · July 11, 2009

А чё непонятного-то, вот допустим берёшь полоску Шириной 1200 пикселов и высотой 20 пикселов допустим. Она состоит из прозрачной середины и из рисунков по бокам - как раз эти чёрточки. Тянется эта полоска до низа, вот и всё!

А при растяжении по горизонтали что делать?

psywalker · July 11, 2009

А при растяжении по горизонтали что делать?

А ничего не делать, сайт ведь Фиксированной ширины и выровненный по середине, как я понимаю

Контентный блок(серые прямоугольники на белом фоне) фиксированной ширины, и расположен по центру.

Edited July 11, 2009 by psywalker

rash · July 11, 2009

А ничего не делать, сайт ведь Фиксированной ширины и выровненный по середине, как я понимаю

Вне зависимости от ширины свободного места вокруг контентной части пунктирная линия должна идти по центру этого свободного пространства.

Значит, как минимум, ширина этого свободного места может меняться.

Zippovich · July 11, 2009

я бы попробовал сделать резиновый макет:

центральная колонка фиксированная, 2 боковые тянутся до минимально ширины пунктирной картинки и до максимальной бесконечной. В боковых колонках по центру горизинтали повторяющийся по y бэкграунд. Должно работать.

psywalker · July 11, 2009

Значит, как минимум, ширина этого свободного места может меняться.

Ааа, так бы сразу и сказали)), тогда не вопрос, хоть меняется, хоть нет:

http://psywalker.ru/Forum/l-r-bg/main.html

p.s. - можно сделать вариант и без height: expression(document.body.clientHeight+'px'); в ИЕ6, но тогда нужно подольше посидеть, но и так вроде-бы Задача выполнена и полный Кросс включая ИЕ6 :blink:

Azadi · July 11, 2009

psywalker

По-моему ты опять не понял :blink: Пунктирная линия слева должна центрироваться внутри серых областей фона, ширина которых меняется динамически в зависимости от ширины окна браузера.

skatadov

Если мой вариант на дивах попилить напильником, то всё у тебя будет хорошо. Правда для IE6 придется понавешать expression'ы для эмуляции position:right; (хотя тут можно обойтись и CSS, читаем Чикуенка) и position:bottom;

psywalker · July 11, 2009

psywalker
По-моему ты опять не понял smile.gif Пунктирная линия слева должна центрироваться внутри серых областей фона, ширина которых меняется динамически в зависимости от ширины окна браузера.

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

http://psywalker.ru/Forum/l-r-bg/main2.html

Правда это при раскладах, что ширина контента 70%, а если другая, то тогда надо под неё ширину div поправить!

Azadi

А твой вариант походу надо ещё пилить и пилить и то не факт, что выпилишь что нибудь, темболее что-бы ещё в ИЕ6 работало :blink:

Edited July 11, 2009 by psywalker

rash · July 11, 2009

Правда это при раскладах, что ширина контента 70%, а если другая, то тогда надо под неё ширину div поправить!

Ширина контента, по условию, фиксированная.

Azadi · July 11, 2009

Azadi
А твой вариант походу надо ещё пилить и пилить и то не факт, что выпилишь что нибудь, темболее что-бы ещё в ИЕ6 работало

В IE6 заработает, и я уже сказал что нужно для этого сделать :blink: И хватит уже письками тут мериться, все равно автор либо проблему уже решил, либо на нас забил Игра не стоит свечь, а результат труда.

psywalker · July 11, 2009

И хватит уже письками тут мериться, все равно автор либо проблему уже решил, либо на нас забил smile.gif Игра не стоит свечь, а результат труда.

А я кстати ничем не мериюсь, да и потом мне уже самому всё равно на автора, :blink: потому что уже появился спортивный интерес, самому уже хочется узнать как это делается для опыта и вообще!

Edited July 11, 2009 by psywalker

skatadov · July 12, 2009

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

Нее, автор ни на вас не забил, ни проблемы не решил )

Несмотря на то, что заказчик уже принял работу, так как пребывает в уверенности, что это технически нереализуемо, у меня тоже появился спортивный интерес в решении данной задачки ) Найти бы еще время...

Zippovich, тоже думаю о таком решении.

В принципе, рабочая реализация резина|фикс|резина мне известна, теперь думаю над тем, как все это дело корректно растянуть по высоте.

Justnewone · July 14, 2009

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

Great Rash · July 14, 2009

Всю ночь блин снилось как я эту байду верстаю...

Чтобы отвязаться сделал. Интересная задачка конечно. Проверил во всех браузерах (Опера 9.63 - а то с ее версиями обычно глюны бывают), работает даже (!) в ИЕ6:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Menu</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			zoom: 1; /* IE hack */
			font: 12px "Trebuchet MS", Verdana, Tahoma, sans-serif;
			color: #000;
		}

		body {
			margin: 10px;
		}

		.wrapper {
			position: relative;
			overflow: hidden;
		}

		.left,
		.center,
		.right,
		.left-inner,
		.right-inner {
			padding-bottom: 32767px;
			margin-bottom: -32767px;
		}

		.left {
			float: left;
			width: 50%;
			//margin-left: -1px;
			background: #ccc;
		}

		.left-inner {
			margin-right: 375px;
			background: #cee;
		}

		.right {
			float: right;
			width: 50%;
			margin-left: -375px;
			background: #ccc;
		}

		.right-inner {
			margin-left: 375px;
			background: #cee;
		}

		.center {
			float: left;
			position: relative;
			z-index: 2;
			width: 750px;
			margin-left: -375px;
			background: #ccc;
		}
	</style>

	<script type="text/javascript">

	</script>
</head>

<body>

	<div class="wrapper">
		<div class="left">
			<div class="left-inner">left</div>
		</div>
		<div class="center">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus purus tellus. Aliquam leo enim, hendrerit non cursus non, 
			pellentesque id sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus vehicula 
			vulputate dui, at scelerisque mauris cursus eu. Integer nec elit vitae ipsum varius volutpat nec vel dolor. <a href="#">Duis</a> tincidunt augue 
			quis nisl consequat condimentum. Nulla facilisi. Vestibulum ornare feugiat mollis. Aliquam vel nunc a sem hendrerit pretium. Morbi 
			convallis posuere hmollis.
		</div>
		<div class="right">
			<div class="right-inner">right</div>
		</div>
	</div>

</body>
</html>

Edited July 15, 2009 by Great Rash

psywalker · July 14, 2009

Слушай, ну мастер, а Я офигел, када увидел, супер Great Rash - Молодчина!

Great Rash · July 14, 2009

Краснею

Sign In

Реально ли так сверстать?

Question

Link to comment

Share on other sites

21 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

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information