Рамка вокруг страницы. XHTML

Storm · January 21, 2008

Всем добрый день.

Возник вот такой вопрос.

Задача следующая: есть страница с контентом в 800px, вокруг страницы нужно сделать рамку, которая должна быть по

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

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

quot;-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Внимательно изучил форум, есть несколько вариантов решений, но на 100% ни одно не подходит.

Мои варианты решения:

1. Правая полоса рамки не растягивается на всю высоту окна.

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
 <title></title>
 <style type="text/css">
 /*<![CDATA[*/
 html {height:100%;}
 body {margin:0;padding:0;height:100%;}
 #header {position:absolute;height:7px;top:0;width:100%;background:#495778;font-size:1px;}
 #footer {position:absolute;height:7px;bottom:0;width:100%;background:#495778;font-size:1px;}
 #content {width:800px;background:gray;margin:0 auto;}
 /*]]>*/
 </style>
</head>

<body style="background:url(images/bg-line.gif) repeat-y 0 0;">
<div id="header"></div>
<div style="background:#495778;">
 <div style="background:#495778; margin-left:7px; padding-right:7px;">
 <div style="background:white;">
 <div style="background:gray;width:800px;margin:0 auto;">
 content
 </div>
 </div>
 </div>
</div>
<div id="footer"></div>
</body>
</html>

2. В ИЕ нет левой полосы рамки, в Мозилле правая полоса остается при любой ширине окна.

<!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" xml:lang="en" lang="en">

<head>
 <title></title>
 <style type="text/css">
 /*<![CDATA[*/
 html {background: url(images/bg-line.gif) left repeat-y;height:100%;}
 body {margin:0;padding:0;height:100%;background: url(images/bg-line.gif) right repeat-y;}
 #header {position:absolute;height:7px;top:0;width:100%;background:#495778;font-size:1px;}
 #footer {position:absolute;height:7px;bottom:0;width:100%;background:#495778;font-size:1px;}
 #main {padding:0 7px;}
 #content {width:800px;background:gray;margin:0 auto;}
 /*]]>*/
 </style>
</head>

<body>
<div id="header"></div>
<div id="footer"></div>
<div id="main">
<div id="content">content</div>
</div>
</body>

</html>

3. В Мозилле появляется вертикальный скролл, в ней же правая полоса рамки остается при любой ширине окна.

<!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" xml:lang="en" lang="en">

<head>
 <title></title>
 <style type="text/css">
 /*<![CDATA[*/
 html {height:100%;}
 body {margin:0;padding:0;height:100%;border:7px solid #495778;}
 #content {width:800px;background:gray;margin:0 auto;}
 /*]]>*/
 </style>
</head>

<body>
<div align="center" style="padding-right:7px;">
<div id="content">content</div>
</div>
</body>

</html>

Заранее благодарен за оказанную помощь.

klierik · January 21, 2008

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

это через js реализуйте

Если высота контента меньше, чем высота окна, то вертикального скролла быть не должно.

css

body {overflow:hidden;}

Storm · January 21, 2008

Вс? оказалось очень просто.

Вот код решения:

<!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" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
/*<![CDATA[*/
html {height:100%;}
body {height:100%;margin:0;padding:0}
table {border:0px;border-collapse:collapse;}
table td {padding:0px;}

#header {position:absolute;top:0;width:100%;height:7px;font-size:1px;background:#495778;}
#footer {position:absolute;bottom:0;width:100%;height:7px;font-size:1px;background:#495778;}
*html #footer {position:absolute;bottom:-1px;}

.main_tab {width:100%;height:100%;}
.vert_line {width:7px;background:#495778;}

.side {width:50%;height:100%;}
.side div {width:7px;height:100%;background:#495778;}
#content {width:800px;background:gray;}
/*]]>*/
</style>
</head>


<body>
<div id="header"></div>
<table class="main_tab">
<tr>
<td class="side"><div></div></td>
<td><div id="content">1</div></td>
<td class="side"><div style="margin:0 0 0 auto;"></div></td>
</tr>
</table>
<div id="footer"></div>
</body>
</html>

div'ы в классе side можно не писать, вместо них размножить картинку по вертикали в этом классе.

Если кто-то знает более простое решение, в частности, без использования таблицы, напишите, буду очень благодарен.

Dimitry Wolotko · January 21, 2008

Перемещено в раздел: "Проблемы с версткой"

Sign In

Рамка вокруг страницы. XHTML

Question

Storm

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

Storm

Link to comment

Share on other sites

Dimitry Wolotko

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information