Возникла необходимость сверстать вот такой вот шаблон.
[Только зарегистрированные пользователи могут видеть ссылки. ]
Контентный блок(серые прямоугольники на белом фоне) фиксированной ширины, и расположен по центру.
На первый взгляд, все просто, если бы не одно НО.
Вертикально расположенный пунктир по бокам (на сером фоне).
Вне зависимости от ширины свободного места вокруг контентной части пунктирная линия должна идти по центру этого свободного пространства.
Единственное решение, которое мне на ум пришло, приведено ниже. Но увы, оно не подходит - нужно сделать пунктир графикой - 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" /> <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 content end *</div> </div> <div id="fg"></div> <div id="footer"></div> </body> </html>
Если устраивает вариант с JS, могу подсказать
