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

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

Форум программистов > Вёрстка веб-сайтов > высота слоев и футер

Автор: dima_mak 26.7.2008, 13:51

задание было сделать 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

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

min-height:700px;

Автор: dima_mak 26.7.2008, 14:15

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

Автор: webster 26.7.2008, 14:26

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

Код


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

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

Автор: dima_mak 26.7.2008, 15:42

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

Автор: webster 26.7.2008, 16:46

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

Автор: dima_mak 26.7.2008, 16:51

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

Автор: webster 26.7.2008, 16:59

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

Код


<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>

Автор: dima_mak 26.7.2008, 18:20

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

Автор: webster 30.7.2008, 12:12

Цитата

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

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

Автор: dima_mak 2.8.2008, 12:19

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

Автор: webster 2.8.2008, 13:04

IE6 "не понимает" min-height, для него оно просто не существует, вместо него используется height, остальные же броузеры, вместе с IE7 уже поддерживают это свойство. Т.е. надо писать хаки, некоторые из хаков не отрабатывают без полного написания DOCTYPE, поэтому лучше все-таки использовать его http://w3schools.com/tags/tag_doctype.asp запись или http://www.javascriptkit.com/howto/doctype.shtml.

Автор: dima_mak 2.8.2008, 15:13

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

Автор: webster 2.8.2008, 15:34

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

Код


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

Последний стиль необходим для IE7, но для этого нужна полноценная запись http://w3schools.com/tags/tag_doctype.asp
Как пример можно использовать http://www.themaninblue.com/experiment/footerStickAlt/bad_example_short.htm.

Автор: dima_mak 2.8.2008, 16:13

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

Автор: webster 2.8.2008, 16:19

Код


#all {
padding-bottom: "на высоту футера";
}

Автор: dima_mak 2.8.2008, 16:23

тоже самое, только отступ от текста в высоту футера....

Автор: webster 2.8.2008, 16:24

Нужна картинка, что вы хотите получить и что сейчас есть.

Автор: dima_mak 2.8.2008, 16:30

получилось http://www.4kdesign.co.il/dima/
а надо футер внизу и фон левой и средней колонки растянут на 100% или если текста больше видимой части, то растянуты на длину текста.

Автор: webster 2.8.2008, 18:02

Ну так вы и прикрепите к левой колонке весь фон (shadow1px.gif и fonmain.gif), сделайте его полоской в 1-2 пиксела и выровняйте по правому краю id="left_col", при этом ширина фона значения не имеет и чем больше-тем лучше для большей гибкости макета (виден он все-равно будет только внутри элемента в котором он определен), повторение надо сделать по оси Y.
Да, и лучше вместо padding-bottom: 110px; у #all (который прибавляется к 100% высоте #all и из-за этого страница уже становится больше 100% высоты) использовать margin-bottom: 110px; у:

Код


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

Автор: dima_mak 2.8.2008, 21:09

на счет фона получилось, а вот футер прижиматься к низу не хочет в упор.(смотри прошлую ссылку)

Автор: webster 2.8.2008, 22:06

Прочитайте внимательно мой предыдущий пост.