-
Возникла необходимость сверстать вот такой вот шаблон.
[Only registered and activated users can see links. Click Here To Register...]
Контентный блок(серые прямоугольники на белом фоне) фиксированной ширины, и расположен по центру.
На первый взгляд, все просто, если бы не одно НО.
Вертикально расположенный пунктир по бокам (на сером фоне).
Вне зависимости от ширины свободного места вокруг контентной части пунктирная линия должна идти по центру этого свободного пространства.
Единственное решение, которое мне на ум пришло, приведено ниже. Но увы, оно не подходит - нужно сделать пунктир графикой - 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>
-
Как вариант:
Код:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
**<tr>
****<td style="background:url(пунктир.jpg) center repeat-y;"></td>
****<td width="700"></td>
****<td style="background:url(пунктир.jpg) center repeat-y;"></td>
**</tr>
</table>
-
Цитата:
Как вариант:
Код:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
**<tr>
****<td style="background:url(пунктир.jpg) center repeat-y;"></td>
****<td width="700"></td>
****<td style="background:url(пунктир.jpg) center repeat-y;"></td>
**</tr>
</table>
Мне кажется либо тут без JS не обойтись либо без CSS3 [Only registered and activated users can see links. Click Here To Register...] Если устраивает вариант с JS, могу подсказать
