VPF::высота слоев и футер - Форум программистов

dima_mak

Дата 26.7.2008, 13:51 (ссылка)

(нет голосов)

Загрузка ...

Программист любитель

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

Репутация: нет
Всего: нет

задание было сделать 4 вертикальных слоя и футер внизу который находится над остальными слоями и полупрозрачен.
реализовал так:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
<style type="text/css">
* {
 margin:0; padding:0;
 }
#all{
    min-width:1000px;
    min-height:700px;
    background: url(fon.gif) repeat;
    }
#left_col{
    position:relative;
    background: #ffffff url(shadow1px.gif) repeat-y right;
    padding-right: 1%;
    float:left;
       width:49%;
    height:700px;
    }
#middleleft_col{
    position:relative;
    float:left;
    width:12%;
    background: url(shadow1pxleft.gif) repeat-y right;
    padding-right: 1%;
    height:700px;
    }
#content{
        background: url(fon.gif) repeat;
        height:700px;
        padding-left: 0px;
}
#contentmain{
        background: url(fonmain.gif) repeat;
        height:560px;
        padding: 15px;
        padding-bottom:125px;
}
#contentright{
        background: url(fonmain.gif) repeat;
        height:560px;
        padding: 15px;
        padding-top:125px;
}
#contentimg{
        background: url(list.jpg) no-repeat;
        height:700px;
        padding-left: 0px;
}
#middleright_col{
    position:relative;
    width:15%;
    float:left;
    background: #ffffff url(shadow1px.gif) repeat-y right;
    padding-right: 1%;
    height:700px;
    }
#right_col{
    position:relative;
    float:left;
    width:20%;
    height:700px;
    }
#footer{
    position:relative;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    -moz-opacity: 0.7; /* Mozilla 1.6 и ниже */
    -khtml-opacity: 0.7; /* Konqueror 3.1, Safari 1.1 */
    background: url(bottomfon.gif) repeat;
    height: 110px;
    width: 100%;
    bottom:0px;
    margin-top:-110px;
    z-index:100;
    }
</style>
</head>

<body>
<div id="all">
<div id="left_col">
    <div id="contentmain">
    </div>
</div>
<div id="middleleft_col">
</div>
<div id="middleright_col">
    <div id="contentright">
    </div>
</div>
<div id="right_col">
    <div id="content">
    </div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>

ео есть пару проблемок:
1) если я пишу внутри слоя футер, то текст выводится не внутри слоя, а в самом низу после всех слоёв.
2) высоту приходится задавть ручками, а нужно, что бы левый слой растягивался в зависимости от количества текста в нем и всё остальные были по высоте как левый.

namra

Дата 26.7.2008, 14:03 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

Репутация: нет
Всего: нет

Чтобы растягивался левый взависимости от текста

min-height:700px;

dima_mak

Дата 26.7.2008, 14:15 (ссылка)

(нет голосов)

Загрузка ...

Программист любитель

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

Репутация: нет
Всего: нет

а, что бы все остальные по нему?

webster

Дата 26.7.2008, 14:26 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

Репутация: 34
Всего: 34

Чтобы "вернуть нормальную управляемость" страницей вам необходимо произвести "очистку" свойства float:

Код


#footer{
    clear: both;
    position:relative;
...
    top: -110px;
    }
</style>

позиционирование top используется вместо margin-top:-110px;

Это сообщение отредактировал(а) webster - 26.7.2008, 14:26

dima_mak

Дата 26.7.2008, 15:42 (ссылка)

(нет голосов)

Загрузка ...

Программист любитель

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

Репутация: нет
Всего: нет

webster, спасибо - так текст пишется где надо, но блок появляется пустое пространство в самом низу равное высоте футера...

webster

Дата 26.7.2008, 16:46 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

Репутация: 34
Всего: 34

Все правильно, так отрабатывает свойство position: relative; оно "оставляет за собой пространство" на странице, равное размерам этого блока и только смещается относительно него при помощи свойств top и left (bottom и right).

dima_mak

Дата 26.7.2008, 16:51 (ссылка)

(нет голосов)

Загрузка ...

Программист любитель

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

Репутация: нет
Всего: нет

webster, а как сделать, что бы не оставлял?

webster

Дата 26.7.2008, 16:59 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

Репутация: 34
Всего: 34

Можно использовать примерно такую конструкцию:

Код


<div id="all" style="position: relative;">

...
<div style="clear: both; height: 1px; font-size: 1px; line-height: 1px; overflow: hidden; margin-bottom: -1px;"></div>
<div id="footer" style="position: absolute; bottom: 0px;"></div>
</div>

Это сообщение отредактировал(а) webster - 26.7.2008, 17:13

dima_mak

Дата 26.7.2008, 18:20 (ссылка)

(нет голосов)

Загрузка ...

Программист любитель

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

Репутация: нет
Всего: нет

webster, но так футер будет в самом низу видимой части экрана, а не в конце всего контента.
а что по поводу второго вопроса? не можешь подсказать?

webster

Дата 30.7.2008, 12:12 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

Репутация: 34
Всего: 34

Цитата

webster, но так футер будет в самом низу видимой части экрана

скорее всего вы просто не пробовали так делать.
Всевозможные виды "делания" одинаковой высоты колонок как визуальные, так и физические (как например с отрицательным margin):
http://www.ejeliot.com/blog/61

Это сообщение отредактировал(а) webster - 2.8.2008, 12:54

dima_mak

Дата 2.8.2008, 12:19 (ссылка)

(нет голосов)

Загрузка ...

Программист любитель

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

Репутация: нет
Всего: нет

webster, спасибо за все, вроде нашел решения для обоих проблемм, но появилась ещё одна - сделать минимальную высоту у сайта 100%, если ставлю height или min-height равными 100%, то в експлорере работает, а в ФФ нет.
вот код:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
<style type="text/css">
* {
 margin:0; padding:0;
 } 

#all{
    position:relative;
    overflow: hidden;
    min-width:1000px;
        height:100%;
    background: url(fon.gif) repeat;
    }
#left_col{
    position:relative;
    background: #ffffff url(shadow1px.gif) repeat-y right;
    padding-right: 1%;
    float:left;
    width:49%;
    margin-bottom: -1000px; padding-bottom: 1000px;
    }
#middleleft_col{
    position:relative;
    float:left;
    width:12%;
    background: url(shadow1pxleft.gif) repeat-y right;
    padding-right: 1%;
    margin-bottom: -1000px; padding-bottom: 1000px;
    }
#content{
        background: url(fon.gif) repeat;
        padding-left: 0px;
}
#contentmain{
        background: url(fonmain.gif) repeat;
        padding: 15px;
}
#contentright{
        background: url(fonmain.gif) repeat;
        padding: 15px;
        padding-top:125px;
}
#contentimg{
        background: url(list.jpg) no-repeat;
        padding-left: 0px;
}
#middleright_col{
    position:relative;
    width:15%;
    float:left;
    background: #ffffff url(shadow1px.gif) repeat-y right;
    padding-right: 1%;
    margin-bottom: -1000px; padding-bottom: 1000px;
    }
#right_col{
    position:relative;
    float:left;
    width:20%;
    margin-bottom: -1000px; padding-bottom: 1000px;
    }
#footer{
    position:absolute;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    -moz-opacity: 0.7; /* Mozilla 1.6 и ниже */
    -khtml-opacity: 0.7; /* Konqueror 3.1, Safari 1.1 */
    background: url(bottomfon.gif) repeat;
    height: 110px;
    width: 100%;
    bottom:0px;
    }
</style>
</head>

<body>
<div id="all">
<div id="left_col">
    <div id="contentmain">

    </div>
</div>
<div id="middleleft_col">
</div>
<div id="middleright_col">
    <div id="contentright">
    </div>
</div>
<div id="right_col">
    <div id="content">
        <div id="contentimg">

        </div>
    </div>
</div>
<div style="clear: both; height: 1px; font-size: 1px; line-height: 1px; overflow: hidden; margin-bottom: -1px;"></div>
<div id="footer">
ghjghj
</div>
</div>
</body>

</html>

З.Ы
И ещё я понял, что я полный чайник и надо почитать литературу... smile

Это сообщение отредактировал(а) dima_mak - 2.8.2008, 12:19

webster

Дата 2.8.2008, 13:04 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

Репутация: 34
Всего: 34

IE6 "не понимает" min-height, для него оно просто не существует, вместо него используется height, остальные же броузеры, вместе с IE7 уже поддерживают это свойство. Т.е. надо писать хаки, некоторые из хаков не отрабатывают без полного написания DOCTYPE, поэтому лучше все-таки использовать его полноценную запись или здесь.

Это сообщение отредактировал(а) webster - 2.8.2008, 15:24

dima_mak

Дата 2.8.2008, 15:13 (ссылка)

(нет голосов)

Загрузка ...

Программист любитель

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

Репутация: нет
Всего: нет

так, что самое интересное у меня НЕ работает в ФФ...

webster

Дата 2.8.2008, 15:34 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

Репутация: 34
Всего: 34

Для решения подобной задачи необходимо добавить следующие стили:

Код


html, body {
    height: 100%;
}
#all{
...
    min-height:100%;
....
    }
* html #all {
    height: 100%;
}
*+html #all {
    height: auto;
    min-height: 100%;
}

Последний стиль необходим для IE7, но для этого нужна полноценная запись DOCTYPE
Как пример можно использовать это.

dima_mak

Дата 2.8.2008, 16:13 (ссылка)

(нет голосов)

Загрузка ...

Программист любитель

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

Репутация: нет
Всего: нет

webster, помогло, но футер на большом расширении не прижимается к низу, а прижимается к концу текста.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »