| |
|
|
| | Вроде бы банальная задача, но не получается оставить футер при увеличении высоты страницы. На странице есть скрытый текст, при его развертывании футер остается на месте при таких стилях. Точнее проблема не с самим футером, а с картинками, которые прекреплены рядышком:
.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, но они просто пропадают.
Но хотелось бы, чтобы они опускался вместе с контектом вниз страницы. Подскажите пожалуйста, как это можно реализовать? | |
| |
|
|
| |
|
|
| |
для: Aidaho
(19.10.2012 в 14:13)
| | | Если позиция fixed, то элемент позиционируется относительно окна браузера.
Чтобы содержимое было резиновым по вертикали, оно должно быть свободно позиционировано, с применением обтекания. Мой совет - возьмите каркас из стандартных шаблонов. | |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(19.10.2012 в 15:28)
| | | И как этого свободного позиционирования добиться? Я ж написал, что если ставить realetive, то картинки пропадают... | |
| |
|
|
| |
|
|
| |
для: Aidaho
(19.10.2012 в 15:36)
| | | relative - это не свободное позиционирование. Это позиционирование относительно текущего положения элемента. Свободное - это когда объекты в потоке находятся и располагаются друг относительно друга исключительно в зависимости от собственных размеров и правил обтекания. | |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(19.10.2012 в 15:42)
| | | Я вас понял, но как это реализовать? Если я убираю позиционирование вообще, то картинки пропадают и нигде на странице их нет. | |
| |
|
|
| |
|
|
| |
для: Aidaho
(19.10.2012 в 15:52)
| | | Значит, кто-то их закрыл собой. Надо верстать изначально правильно. А то контекст сильно влияет. | |
| |
|
|
| |
|
|
| |
для: 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>
|
| |
| |
|
|
| |
|
|
| |
для: Aidaho
(19.10.2012 в 16:22)
| | | Ой, гевальт!
Вас не учили закрывать за собой </теги>?
Давайте так. Сначала делаете валидную разметку с доктайпом, со структуризацией кода (это минимальная вежливость, да и самому удобнее будет), потом на всякий случай проверяете, а вдруг заработало, и если нет - то обращаетесь, предварительно выложив страницу где-то на хостинге, пусть бесплатном.
А то не к добру вспоминается анекдот :
Практикант приносит ведущему программисту распечатку листинга своей программы на пяти метрах рулонной бумаги:
- Скажите, где у меня ошибка?
Програмист, не глядя, комкает распечатку:
- В ДНК! | |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(19.10.2012 в 17:23)
| | | ))) Страница валидная и все тэги закрыты, это вывод с Firebug-a. ) | |
| |
|
|
| |
|
|
| |
для: Aidaho
(22.10.2012 в 07:27)
| | | Тогда переходим к п. 2 )
Выложите все это дело в доступе, надо пощупать. | |
| |
|
|
| |
|
|
| |
для: Aidaho
(22.10.2012 в 07:27)
| | |
body {
position: relative;
}
#footer {
position: absolute;
bottom: 0;
}
|
Или: http://verstka.pro/notes/prizhatyy-k-nizu-futer.html - доходчиво и просто. | |
| |
|
|
