div'ы, 3 колоники, проблема

Regnum · June 19, 2008

Столкнулся с такой проблемой (вроде все элементарно, но...):

index.html

 <html>
 <head>
 <META HTTP-EQUIV="Page-Enter" CONTENT="BlendTrans(Duration=1.0)">
 <meta http-equiv="content-type" content="text/html; charset=1251" />
 <title>{$title}</title>
 <link href='style.css' rel='stylesheet' type='text/css' />
 </head>
 <body bgcolor='#000000' text='#ffffff'> 
 <div id='tbl_head'>
 <div id='tbl_td_head_l'>l</div>
 <div id='tbl_td_head_c'>c</div>
 <div id='tbl_td_head_r'>r</div>
 </div>
 </body>
 </html>

style.css

#tbl_head {
 background-color: #000000;
 background-image: url('column_wing_bg.png');

}
#tbl_td_head_l {
 background-image: url('column_l_wing.png');
 background-position: right;
 float: left;
 height: 95px;
 width: 25%;
 background-repeat: no-repeat;
}
#tbl_td_head_c {
 background-image: url('column_c_bg.png');
 width: 631px;
 float: left;
 height: 95px;
}
#tbl_td_head_r {
 background-image: url('column_r_wing.png');
 background-position: left;
 float: left;
 height: 95px;
 width: 25%;
 background-repeat: no-repeat;
}

Такой вариант меня при полностью развернутом окне вполне устраивает, НО при изменении размера правая и левая колонка, которые должны изменять свой размер вместе с окном (то бишь уменьшаться, если окно подрезают), вместо этого просто переходят на новую строку. Каким образом можно сцепить их (3 колонки) вместе так, чтобы то, что сказано выше не происходило?

klierik · June 19, 2008

1. покажите графически как должно быть, пожалуйста

2. пиши используя доктайп, так как QuirksMode не актуален

Regnum · June 20, 2008

По первому:

Версия, если браузер полностью раскрыт:

Версия, если окно браузера уменьшено, при этом скрол не образуется:

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

dyadya · June 20, 2008

Задайте среднему блоку width: 50%; (а лучше 49% для ИЕ)

Regnum · June 21, 2008

Задайте среднему блоку width: 50%; (а лучше 49% для ИЕ)

Лучше не стало - хотя теперь блоки не смещаются на следующую строку, но теперь при изменении размера окна уменьшается средний блок, что собственно не нужно.

dyadya · June 21, 2008

Я так понял, Вас волнует только фоновое изображение (судя по приведенному выше рисунку). Тогда объедините колонки в один блок и задайте для него фон одной картинкой.

Regnum · June 22, 2008

Я так понял, Вас волнует только фоновое изображение (судя по приведенному выше рисунку). Тогда объедините колонки в один блок и задайте для него фон одной картинкой.

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

dyadya · June 22, 2008

Бог в помощь и вот еще: http://xhtml.ru/forum/index.php?showtopic=235

Regnum · June 23, 2008

Спасибо, dyadya, конечно ты сказал не совсем то, что является решением (хотя и очень близко), но сподвигло меня на идею. Проблему эту я решил и очень доволен результатом. Спасибо всем, кто хотел помочь.

Sign In

div'ы, 3 колоники, проблема

Question

Regnum

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

Regnum

Link to comment

Share on other sites

dyadya

Link to comment

Share on other sites

Regnum

Link to comment

Share on other sites

dyadya

Link to comment

Share on other sites

Regnum

Link to comment

Share on other sites

dyadya

Link to comment

Share on other sites

Regnum

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information