Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Резиновая верстка, фон колонок до конца страницы

Автор: LuckyCat 15.6.2009, 14:04

Помогите найти решение smile

В дизайне слева и справа идут градиентные полосы (причем у одной полосы золотая граница справа, у другой - слева), сам макет - трехколоночный (см. в приложении). Обязательное требование - верстка должна быть резиновой.

Идей было много, самым оптимальным красивым вариантом без лишних блоков мне показался вот этот:
   1. взять обычный резиновый шаблон (col_center тянется, col_left и col_right - фиксированной ширины) и убрать шапку
   2. самой шапке присвоить абсолютную позицию, 100% ширину и высоту 120px;
   3. трем блокам прописать padding-bottom:32767px; margin-bottom:-32767px;, а вышестоящему - overflow: hidden;
   4. правому и левому блоку прописать путь к градиентному фону
   5. в трех блоках создать вспомогательные и опустить их вниз при помощи маргина на высоту шапки
   6. футер всегда остается внизу

То есть:
  footer всегда внизу
  резиновая верстка
  правый и левый блоки должны тянутся до конца страницы
  правый и левый блоки имеют разный фон

Более-менее затея получилась в IE6, то, что нужно. Опера и Firefox начинают применять фон тогда, когда у кого-нибудь из трех блоков увеличивается текст.

Вот код index.html:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Пример</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
        <div id="header">
            Text for header
        </div>
    <div id="page">
            
        <div id="text">
              <div id="col_center2">
                  <div id="col_center">                        
                      какой-то текст для центрального блока<br />
                  </div><!-- /col_center -->
              </div><!-- /col_center2 -->
              
              <div id="col_left">
                <div style="margin-top:120px;">
                  Начало левого блока
                  fkfjkf hjkfh jfhj hfj hjf<br>
                  fkfjkf hjkfh jfhj hfj hjf<br><br />
                  
                  Text для левой колонки
                 </div>
              </div><!-- /col_left -->
              <div id="col_right">
                <div style="margin-top:120px;">
                  fkfjkf hjkfh jfhj hfj hjf<br>
                  fkfjkf hjkfh jfhj hfj hjf<br>
                 </div>
              </div> <!-- /col_right -->
        </div><!-- /text -->

        <div id="footer_cleaner"></div> 
    </div><!-- /page -->
    <div id="footer">This is a footer</div>
</body>
</html>

Содержимое style.css:

Код


* html #page {
height: 100%;}
html, body {
height: 100%;
margin: 0;
padding: 0;}
body{
background: #fff;
color: #36393D;
font-family: "Trebuchet MS";
font-size: 18px;
line-height: 22px;}

#page {
min-height: 100%;
margin: 0 0 -80px 0;
background: green;
}

#header {
height: 120px;
background: transparent;
position: absolute;
width: 100%;
top: 0; left: 0;
z-index: 1;
}

#footer_cleaner {
height: 80px;
clear: both;}

#footer {
height: 80px;
background: transparent;}

#text{    
overflow: hidden;
}


#col_center2{
    width: 100%;
    float: left;
}
#col_center{
    background-color: #ffd700;    
    
    margin: 0 310px 0 210px; 
    margin-top:120px;
}

#col_left{
    background-color: olive;
    width: 200px;    
    float: left;
    
    margin-left: -100%;    
    padding-bottom:32767px; margin-bottom:-32767px;
}


#col_right{
    background-color: #32cd32;
    width: 300px;    
    float: left;    
    margin-left: -300px;
    padding-bottom:32767px; margin-bottom:-32767px;
}

Что должно получится в результате.... чтобы слева и справа страницы были разные фоны, один рисунок, похоже, не подходит
Были еще варианты, у блока page прописать отступ слева, для боди прописать рисунок слева, для page - справа... Опять же - в IE этот отступ двигает блок вправо + боди рисует градиент только для видимой части экрана...

Жду свежего взгляда smile

Может, где в коде затесался косяк, может, уже есть готовое решение...

Автор: bazzjr 15.6.2009, 17:39

ИМХО извращенный вариант smile

, тем более совершенно по разному работает в разных браузерах.

Добавлено через 1 минуту и 10 секунд
Я считаю все это можно реализовать совместно в таблицей, дабы не извращаться с дивами.

Автор: LuckyCat 16.6.2009, 22:00

Спасибо

А таблицы как-то и забылись... И решение было написано от силы минуты за три. А если вспомнить, сколько ушло на ту же реализацию на дивах smile

Может, кому то пригодится....

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
        <style type="text/css">
            *{
                padding: 0; margin: 0;
            }
            html,body{
                height:100%;
                margin:0px;
                padding:0px
            }
            body{
                font-family: "tahoma";
                font-size: 8pt;
                color: #ccc; 
                line-height: normal;
            }
        </style>
    </head>

    <body>
        <table cellpadding="0" cellspacing="0" style="background-color:#000;" width="100%" height="100%">
            <tr>
                <td style="background: url(../verst/images/bgallleft.png); width:35px;">&nbsp;</td>
                <td valign="top">
                    А тут уже может быть всё что угодно....... И шапка, и контент, и футер.....
                </td>
                <td style="background: url(../verst/images/bgallright.png); width:42px;">&nbsp;</td>
            </tr>
        </table>    
    </body>
</html>

Автор: p0zt3r 2.7.2009, 17:17

Господа, посмотрите как сделано здесь: http://www.gazprom.ru/
И не надо никаких таблиц! Это мещанство! smile

Автор: bars80080 2.7.2009, 18:10

делать таблицы не таблицами - это е**тость

Автор: p0zt3r 2.7.2009, 19:00

Какие таблицы? о чём ты? или у тебя всё это таблица?

Автор: bars80080 2.7.2009, 19:47

а ты о чём?

если конкретно газпромовский сайт? то его можно сверстать как угодно. слоями тоже.
но причём здесь газпромовский сайт?

если ты в общем, то в общем таблицы верстать не таблицами - это е**тость

Автор: trifler 3.7.2009, 18:33

Можно http://trifler.ru/blog/i/koncept/middle_border_lcr_h.htm

Автор: ksnk 3.7.2009, 18:51

trifler,

Цитата(LuckyCat @ 15.6.2009, 14:04

)

Обязательное требование - верстка должна быть резиновой.

Автор: trifler 3.7.2009, 19:00

В http://trifler.ru/blog/i/control/jsfont.htm