Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В. Социальная инженерия и социальные хакеры. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В. MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. PHP. Практика создания Web-сайтов (второе издание). Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Закрепление футера при изменения высоты страницы
 
 автор: Aidaho   (19.10.2012 в 14:13)   письмо автору
 
 

Вроде бы банальная задача, но не получается оставить футер при увеличении высоты страницы. На странице есть скрытый текст, при его развертывании футер остается на месте при таких стилях. Точнее проблема не с самим футером, а с картинками, которые прекреплены рядышком:


    .part3 {
    background: url("/inc/img/part3.png") no-repeat scroll right bottom transparent;
    bottom: 0;
    height: 100%;
    position: fixed;
    right: -41px;
    width: 100%;
    z-index: -1;
    }
.part4 {
    background: url("/inc/img/part4.png") no-repeat scroll left bottom transparent;
    bottom: 0;
    height: 100%;
    left: -25px;
    position: fixed;
    width: 100%;
    z-index: -1;
    }


Если делать position releative, но они просто пропадают.

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

  Ответить  
 
 автор: DJ Paltus   (19.10.2012 в 15:28)   письмо автору
 
   для: Aidaho   (19.10.2012 в 14:13)
 

Если позиция fixed, то элемент позиционируется относительно окна браузера.
Чтобы содержимое было резиновым по вертикали, оно должно быть свободно позиционировано, с применением обтекания. Мой совет - возьмите каркас из стандартных шаблонов.

  Ответить  
 
 автор: Aidaho   (19.10.2012 в 15:36)   письмо автору
 
   для: DJ Paltus   (19.10.2012 в 15:28)
 

И как этого свободного позиционирования добиться? Я ж написал, что если ставить realetive, то картинки пропадают...

  Ответить  
 
 автор: DJ Paltus   (19.10.2012 в 15:42)   письмо автору
 
   для: Aidaho   (19.10.2012 в 15:36)
 

relative - это не свободное позиционирование. Это позиционирование относительно текущего положения элемента. Свободное - это когда объекты в потоке находятся и располагаются друг относительно друга исключительно в зависимости от собственных размеров и правил обтекания.

  Ответить  
 
 автор: Aidaho   (19.10.2012 в 15:52)   письмо автору
 
   для: DJ Paltus   (19.10.2012 в 15:42)
 

Я вас понял, но как это реализовать? Если я убираю позиционирование вообще, то картинки пропадают и нигде на странице их нет.

  Ответить  
 
 автор: DJ Paltus   (19.10.2012 в 16:00)   письмо автору
 
   для: Aidaho   (19.10.2012 в 15:52)
 

Значит, кто-то их закрыл собой. Надо верстать изначально правильно. А то контекст сильно влияет.

  Ответить  
 
 автор: Aidaho   (19.10.2012 в 16:22)   письмо автору
 
   для: DJ Paltus   (19.10.2012 в 16:00)
 

Изменил z-index, но не помогло... (( Вот полностью все стили, может посмотрите? :) Я даже не знаю, куда копать....


body {
    color: #000;
    background: #DEEAF8;
    font-family: Century Gothic, serif;
    margin: 0;
    padding: 0;
    }
.menu-link, .menu-link:visited {
    color: #273176;
    font-weight: bold;
    position: relative;
    text-decoration: none;
    }
.content-menu, content-menu:visited {
    color: #273176;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    }
.content-menu:hover {border: 0; color: #7B94A8; text-decoration: underline;}
.dotted {
    border-bottom: 1px dotted #39429B;
}
nav {
    background: #8AB5E0;
    height: 60px;
}
.logo {padding-left: 6%;}
.logo img {border: 0; margin-top: 10px;}
.menu-nav {padding-right: 6%;}
.content {
    border-radius: 10px 10px 10px 10px;
    float: left;
    margin-bottom: 50px;
    margin-left: 26%;
    margin-top: -2px;
    width: 50%;
    z-index: 6;
}
.back { background: #DEEAF8; }

.part1 {
    background: url("/inc/img/part1.png") no-repeat scroll left top transparent;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
.part2 {
    background: url("/inc/img/part2.png") no-repeat scroll right top transparent;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
    }
.part3 {
    background: url("/inc/img/part3.png") no-repeat scroll right bottom transparent;
    bottom: 0;
    height: 100%;
    position: fixed;
    right: -41px;
    width: 100%;
    z-index: -1;
    }
.part4 {
    background: url("/inc/img/part4.png") no-repeat scroll left bottom transparent;
    bottom: 0;
    height: 100%;
    left: -25px;
    position: fixed;
    width: 100%;
    z-index: -1;
    }
.clear {background: #fff; height: 5px; }
header {font-size: 140%; text-align: center;}
article {
    background: rgba(211, 209, 231, 0.8);
    border: 2px solid #FFFFFF;
    padding: 10px 40px 20px;
    text-align: justify;
    }
article p:nth-child(even):first-letter { padding-left: 35px; }
#inputLink1 {
    background: #DADADA;
    border: 2px solid #FFFFFF;
    font-weight: bold;
    height: 24px;
    text-align: center;
    width: 450px;
    }
#inputLink1:focus { border: 2px solid #8AB5E0; box-shadow:0 1px 2px rgba(0,0,0,0.2) inset; text-align: center;}
.goodbutton {
    background: #DADADA;
    border: 2px solid #8AB5E0;
    font-family: Century Gothic,serif;
    font-weight: bold;
    padding: 4px;
    }
.hideCopy {
    opacity: 0;
    }
.button {margin-left: 20px;}
form { margin-left: -40%; }
.outShortLink { margin-left: 15%; width: 450px;}
.header { text-align: center; }
#h4 {
    display: none;
    font-size: 115%;
}
#click {
    background: #8AB5E0;
    border: 1px solid #7B94A8;
    border-radius: 50% 50% 50% 50%;
    padding: 5px 10px
    }
aside {
    float: left;
    height: 100%;
    margin-left: 25px;
    margin-top: 5px;
    width: 21%;
    }
#calendar {width: 96%;}
.link-nav {
    float: left;
    margin-left: -65%;
    margin-top: 110px;
    padding-left: 5px;
    z-index: 100;
}
.link-nav ul {
    border: 1px solid #FFFFFF;
    padding: 0;
    }
.link-nav li {
    background: #8AB5E0;
    border: 1px solid #FFFFFF;
    height: 40px;
    list-style-type: none;
    margin: 0;
    text-align: center;
    width: 150px;
}
.link-nav li:hover {background: #7B94A8;}
.link-nav-word {position: relative; top: 10px;}
footer {
    bottom: -100px;
    clear: both;
    font-size: 90%;
    position: relative;
    text-align: center;
    }


Ну и сама разметка:


<body>

<nav>
<div class="back"></div>
<div class="clear"></div>
<div class="part1"></div>
<div class="part2"></div>
<div id="content" class="content">
<div class="link-nav">
<aside>
<div class="part3"></div>
<div class="part4"></div>
<footer>
</body>

  Ответить  
 
 автор: DJ Paltus   (19.10.2012 в 17:23)   письмо автору
 
   для: Aidaho   (19.10.2012 в 16:22)
 

Ой, гевальт!
Вас не учили закрывать за собой </теги>?
Давайте так. Сначала делаете валидную разметку с доктайпом, со структуризацией кода (это минимальная вежливость, да и самому удобнее будет), потом на всякий случай проверяете, а вдруг заработало, и если нет - то обращаетесь, предварительно выложив страницу где-то на хостинге, пусть бесплатном.

А то не к добру вспоминается анекдот :

Практикант приносит ведущему программисту распечатку листинга своей программы на пяти метрах рулонной бумаги:
- Скажите, где у меня ошибка?
Програмист, не глядя, комкает распечатку:
- В ДНК!

  Ответить  
 
 автор: Aidaho   (22.10.2012 в 07:27)   письмо автору
 
   для: DJ Paltus   (19.10.2012 в 17:23)
 

))) Страница валидная и все тэги закрыты, это вывод с Firebug-a. )

  Ответить  
 
 автор: DJ Paltus   (22.10.2012 в 12:36)   письмо автору
 
   для: Aidaho   (22.10.2012 в 07:27)
 

Тогда переходим к п. 2 )
Выложите все это дело в доступе, надо пощупать.

  Ответить  
 
 автор: Deed   (22.10.2012 в 16:51)   письмо автору
 
   для: Aidaho   (22.10.2012 в 07:27)
 


body {
 position: relative;
}
 
#footer {
 position: absolute;
 bottom: 0;
}

Или: http://verstka.pro/notes/prizhatyy-k-nizu-futer.html - доходчиво и просто.

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования