Сайты - по стандартам, но не стандартные сайты!
Страниц: 1
Добрый день.
Учусь верстать, возник вопрос. Насколько допустимо параллельное использование различных приемов?
В частности, относительного/абсолютного позиционирования и слоев?
Я уже в течении пары дней пытаюсь сверстать проект, но из-за незнания тонкостей то подвал уедет, то градиент не на всю страницу.
Макет вот здесь:
http://s005.radikal.ru/i212/1002/b8/57f7d0237de7.jpg
Иерархию сделал такой:
Шапка
- Черная верхняя панель
- Контакты
- Верхнее меню
- Логотип человека слева
- Надпись справа
- Вертикальная полоса через всю страницу
Левая панель
Центр
Подвал
Запутался в позиционировании, плюс еще применяю слои, но подвала при всём желании так и не увидел.
* {
margin: 0;
padding: 0;
}
html {height: auto}
body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
height: auto;
overflow: hidden;
}
input {vertical-align: middle}
/* Header
-----------------------------------------------------------------------------*/
.gradient {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
height: auto%; }
#header {
width: 100%;
height: 244px;
}
#topbar {
width: 100%;
height: 37px;
background: transparent url(top_black_bar.png);
background-repeat: repeat-x;
}
#topmenu {
position: relative;
top: 10px;
left: 245px;
height: 100%;
width: 85%;
overflow: hidden;
color: #FFFFFF;
}
.menu {
width: 100%;
list-style: none;
text-align:center;
font: bold 110% serif;
font-family: Arial, Tahoma, Verdana, sans-serif;
overflow: hidden;
}
.menu li {
float: left;
border-left: 1px solid #FFF;
margin-left: -1px;
text-align: center;
width: 16%;
}
#mail
{
position: absolute;
margin: -26px 0px 0px 50px;
}
#home
{
position: absolute;
margin: -26px 0px 0px 100px;
}
#logo
{
position: relative;
margin: -25px 0px 0px 34px;
background: transparent url(logo_man.png);
background-repeat: no-repeat;
width: 222px;
height: 183px;
}
#logoname
{
position: absolute;
align: right;
margin: 30px 0px 0px 50%;
background: transparent url(logo_name.png);
background-repeat: no-repeat;
width: 500px;
height: 98px;
}
/* Middle
-----------------------------------------------------------------------------*/
#middle
{
position: relative;
left: 300px;
height: auto;
}
#titlebar {
position: relative;
top: 0px;
left: 330px;
background: #242424;
height: 24px;
width: 300px;
padding: 10px 15px 0px 15px;
color: #ffffff;
}
#contentarea {
position: relative;
top: 20px;
left: 330px;
background: #b4b4b4;
height: auto;
width: 60%;
padding: 20px 20px 20px 20px;
}
/* Sidebar Left
-----------------------------------------------------------------------------*/
#newsbar {
position: absolute;
top: 0%;
left: 2%;
background: #b4b4b4;
min-height: 100%;
height: auto !important;
width: 240px;
overflow:auto;
}
#titlenews {
position: absolute;
top: 245px;
left: 10%;
background: #242424;
height: 24px;
width: 65%;
overflow: hidden;
color: #ffffff;
padding: 10px 15px 0px 15px;
}
/* Footer
-----------------------------------------------------------------------------*/
#footer {
margin: -80px auto 0;
min-width: 800px;
max-width: 1300px;
height: 80px;
}
#footmenu {
position: relative;
left: 10%;
background: #242424;
height: 24px;
width: 80%;
padding: 10px 15px 0px 15px;
color: #ffffff;
}
.gradient { z-index: -5; }
#newsbar { z-index: -2; }
#topbar { z-index: 3; }Это первоначальный вариант, который более менее работал, но футер не уезжал вниз при прокрутке, а градиент и полоса заканчивались при прокрутке.
П.С. Я уже знаю, что z-index, работает только при position: abs, fix, rel ![]()
Если укажете на ошибки как идеологии так и структурные буду признателен.
Нет на форуме
Страниц: 1