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