Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Резиновая верстка, фон колонок до конца страницы, разминка для мозгов 
:(
    Опции темы
LuckyCat
Дата 15.6.2009, 14:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 32
Регистрация: 15.6.2008

Репутация: нет
Всего: нет
Помогите найти решение 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 
Может, где в коде затесался косяк, может, уже есть готовое решение...

Присоединённый файл ( Кол-во скачиваний: 27 )
Присоединённый файл  ex.jpg 23,84 Kb
PM MAIL   Вверх
bazzjr
Дата 15.6.2009, 17:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 460
Регистрация: 27.12.2007
Где: Россия, Пермь

Репутация: 2
Всего: 6
ИМХО извращенный вариант  smile , тем более совершенно по разному работает в разных браузерах.

Добавлено через 1 минуту и 10 секунд
Я считаю все это можно реализовать совместно в таблицей, дабы не извращаться с дивами.
PM MAIL ICQ   Вверх
LuckyCat
Дата 16.6.2009, 22:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 32
Регистрация: 15.6.2008

Репутация: нет
Всего: нет
Спасибо  smile  А таблицы как-то и забылись...  И решение было написано от силы минуты за три. А если вспомнить, сколько ушло на ту же реализацию на дивах  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>
PM MAIL   Вверх
p0zt3r
Дата 2.7.2009, 17:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 128
Регистрация: 4.2.2007
Где: Самара

Репутация: 1
Всего: 6
Господа, посмотрите как сделано здесь: Сайт Газпрома от "Студии Лебедева"
И не надо никаких таблиц! Это мещанство!  smile 
--------------------
24*7*365*геморой*зарплата=0
PM MAIL ICQ   Вверх
bars80080
Дата 2.7.2009, 18:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315
делать таблицы не таблицами - это е**тость
PM MAIL WWW   Вверх
p0zt3r
Дата 2.7.2009, 19:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 128
Регистрация: 4.2.2007
Где: Самара

Репутация: 1
Всего: 6
Какие таблицы? о чём ты? или у тебя всё это таблица?
--------------------
24*7*365*геморой*зарплата=0
PM MAIL ICQ   Вверх
bars80080
Дата 2.7.2009, 19:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315
а ты о чём?

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

если ты в общем, то в общем таблицы верстать не таблицами - это е**тость
PM MAIL WWW   Вверх
trifler
Дата 3.7.2009, 18:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 11
Регистрация: 15.3.2009
Где: г.Калуга

Репутация: нет
Всего: нет
Можно так
PM MAIL WWW   Вверх
ksnk
Дата 3.7.2009, 18:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386
trifler, 
Цитата(LuckyCat @  15.6.2009,  14:04 Найти цитируемый пост)
Обязательное требование - верстка должна быть резиновой.




--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
trifler
Дата 3.7.2009, 19:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 11
Регистрация: 15.3.2009
Где: г.Калуга

Репутация: нет
Всего: нет
В процентах
PM MAIL WWW   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.2137 ]   [ Использовано запросов: 20 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.