проблема с фоном

vr201 · October 10, 2007

постановка задачи следующая:

есть такой макет.

необходимо реализовать для

доктайпа

quot;-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

чтобы div.one и div.two растягивались на всю высоту окна браузера.

Буду благодарен за любую идею по реализации.

Совершенно не имеет различия таблицами или дивами. Главное, чтобы работало.

klierik · October 10, 2007

очень просто

html

 <!-- button -->
 <div class="button">
 <div class="l"><div class="r"><div class="c">

<!-- CONTENT -->
</div></div></div>
 </div>
 <!-- /button -->

css

/*** button ***/
.button, .button * {
 margin: 0px;
 padding: 0px;
 font-size: 0px;
}
.button .top .l {
 background: url(../dev/img/round-shadow_tl.png) left top no-repeat;
}
.button .top .r {
 margin-left: 10px;/*ширина левой колонки */
 padding-right: 10px;/* ширина правой колонки*/
 background: url(../dev/img/round-shadow_tr.png) right top no-repeat;
}
.button .top .c {
 /* контент */
}

зы: брал за основу код с кнопки... но логика едентична!!!

vr201 · October 10, 2007

извините, может я неправильно объяснил?

Надо чтобы подвал был внизу, - это я знаю как реализовать.

Не получается два фоновых изображения повторить на всю высоту окна браузера.

А вышеприведенный код никак не помог.

klierik · October 10, 2007

да.... хм... а если так:

<div style="background:red;"><!-- left colum -->
 <div style="background:red; margin-left:10px; padding-right:10px;"><!-- right colum -->
 <div style="background:green; height:1024px;"><!-- content--></div>
 </div>
</div>

если и ето не то. тогда вы некорректно огвариваете что именно вам нужно!!!!!!

зы: в ваше указаном коде стоит удалить класс .top так как он не нужен в даном случае.

сорри, провтыкал удалить.

vr201 · October 10, 2007

по-моему, задачу я описал понятно.

ключевые слова: подвал внизу, два дива с фоном на всю высоту окна браузера.

извините, но то, что приводите вы, в качестве примера, к теме никак не относится.

klierik · October 10, 2007

вы хотите что б высота контента с футером == высоте окна??!

что б футер всегда был виден?!

в общем я кажется понял что именно вам надо.

высота так выставляеться через js -> offsetHeight (вроде так можно узнать высоту окна)

и полученное значение просто довавить в стайл соотв дивов

vr201 · October 10, 2007

Давайте вообще отбросим футер, я его привел для наглядности.

Оставим только одно - две фоновые картинки, которые вертикально повторяются на всю высоту окна браузера.

Одна картинка слева, вторая справа.

div.one {height 100%}

div.two {height: 100%}

Вот так не работает.

И похоже задать высоту диву 100% при таком доктайпе (см. выше) невозможно.

Для одного дива работает прекрасно следующее

* {margin: 0; padding: 0;}

html, body {height: 100%;}

div.one {
height: auto !important;
height: 100%;
min-height: 100%;
background: url('image-fixed-width.gif') left top repeat-y;
}

А вот такая конструкция уже не работает

* {margin: 0; padding: 0;}

html, body {height: 100%}

div.one {
height: 100%;
background: url('image1.gif') left top repeat-y;
}


div.two {
height: auto !important;
height: 100%;
min-height: 100%;
background: url('image2.gif') right top repeat-y;
}

Ищу другое решение. Может как-то на таблицах можно сделать?

вы хотите что б высота контента с футером == высоте окна??!

нет.

klierik · October 10, 2007

так код

div.one {

height: 100%;

}

должен сработать для таблицы с 3мя колонками =)

для боковых указываеться соответствующий бекграунд

vr201 · October 10, 2007

для такого доктайпа, по-моему, не работает.

a.e.koshelev · October 10, 2007

попробуй так:

HTML

<table id="content_table" cellpadding="0" cellspacing="0">
 <tr>
 <td class="one"></td>
 <td>контент</td>
 <td class="two"></td>
 </tr>
</table>

CSS

*{margin:0; padding:0;}
html{height:100%;}
body{height:100%;}
#content_table{height:100%; width:100%;}
.one{background:#FFF url(bg_vertical.gif) repeat-y 0 0; width:3px;}
.two{background:#FFF url(bg_vertical.gif) repeat-y 100% 0;width:3px;}

вместо width:3px; поставь нужную ширину и в урл свою картинку запихай

Scrum · October 10, 2007

<!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(new1.png) left repeat-y;
 height: 100%;
 }
 body {
 margin: 0;
 padding: 0;
 height: 100%;
 background: url(new1.png) right repeat-y;
 }
 /*]]>*/
 </style>
</head>

<body>

</body>

</html>

vr201 · October 10, 2007

почти, но не то.

<!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 name="description" content="description" />
 <meta name="keywords" content="keywords" />
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
 <title>
 mens
 </title>

 <style type="text/css">
 *{margin:0; padding:0;}
 html{height:100%;}
 body{height:100%; position: relative;}
 #content_table{height:100%; width:100%; background: red;}
 #content_table td {vertical-align: top; padding-bottom: 400px;}
 .one{background: url(test/test1.gif) repeat-y 0 0; width:26px;}
 .two{background: url(test/test2.gif) repeat-y 100% 0;width:26px;}

 .podval {
 position: absolute;
 left: 0;
 bottom: 0;
 background: green;
 height: 114px;
 width: 100%;
 }
 </style>


 </head>

 <body>

 <table id="content_table" cellpadding="0" cellspacing="0">
 <tr>
 <td class="one"></td>
 <td>контент</td>
 <td class="two"></td>
 </tr>
 </table>

 <div class="podval"></div>



 </body>
</html>

смотри, что с подвалом происходит.

vr201 · October 10, 2007

2scrum

к html нежелательно.

с шириной потом не пооперируешь

yopopt · October 10, 2007

Честно говоря не понятно в ч?м проблема и из-за чего такой длинный топик. Неужто никто из вас не умеет верстать? Задача простейшая:

<!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>
 <style type="text/css">
 *{margin:0; padding:0;}
 html{height:100%;}
 body{height:100%;}
 .column, .left{background:red;width:100px;height:100%;float:right;}
 .left{float:left;}
 .content{background:yellow; margin:0 100px;height:100%;}
 .footer{position:absolute;left:0;bottom:0;background:green;height:100px;width:100%;}
 </style>
 </head>

<body>
<div class="column"><!-- right column --></div>
<div class="left"><!-- left column --></div>
<div class="content"><!-- content --></div>
<div class="footer"><!-- footer --></div>
</body>
</html>

P.S. Написал сходу за пару минут, ничего не проверял и к реальному использованию подобный код мало приспособлен.

vr201 · October 10, 2007

2yopopt

Да, согласен, этот код мало приспособлен.

Чтобы в этом убедиться стоит всего лишь добавить в .content

<div style="height: 500px;"></div>

Подвал становится не внизу страницы.

vr201 · October 10, 2007

пока работает только первый вариант из поста ?7

но работает для одного дива.

источник http://webtest.chebykin.ru/articles/footer/

как сделать, чтобы работало для двух - пока неясно.

подскажите, может вообще не в ту сторону смотрю и этот метод не подходит?

vr201 · October 10, 2007

нашел то, что искал.

тему можно закрывать. спасибо всем откликнувшимся на помощь.

<!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 name="description" content="description" />
 <meta name="keywords" content="keywords" />
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
 <title>
 mens
 </title>
<style type="text/css">
 * {margin: 0; padding: 0;}
 html, body, #all, #name {height: 100%;}

 #all2 {
 position: relative;
 height: 100%;
 min-height: 100%;
 }

 html>body #all2 {height: auto;}

 #footer {
 position: absolute;
 left: 0;
 bottom: 0;
 width: 100%;
 }




 #footer {background: green;}



 #footer, #empty {height: 50px;}

/* украшательства */
 body {
 background-color: #BBD9C1;
 }
 #content {
 background: yellow;
 }

</style>
</head>
<body>
<div id="name"><div id="all"><div id="all2">


 <div id="content">
 1
 <div style="height: 500px; background: red;"></div>

 </div>

 <div id="empty"> </div>

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


</div></div></div>

</body>
</html>

yopopt · October 10, 2007

Ужас. Тему в треш.

{...добавлено kiD}

пусть повисит... быть может, кому-то интересно...

vr201 · October 11, 2007

Ужас. Тему в треш.

Что именно ужас? Код в последнем посте?

Sign In

проблема с фоном

Question

Link to comment

Share on other sites

18 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

Join the conversation

Обсуждения

Important Information