Форум hotibo.ru
Сайты - по стандартам, но не стандартные сайты!
#1 02.09.2013 03:31
- Azrael
- Новичок
- Зарегистрирован: 01.09.2013
- Сообщений: 1
Позиционирование блоков
Картинка
Код
Код:
Еще код
Код:
#header {
width:100%; height: 199px;
background-image: url(../images/header-glue.png);
background-repeat: repeat-x;
background-color: #626262;
}
#header-left {
background-image: url(../images/header-left.png);
width: 4px;
float: left;
height: inherit;
}
#header-middle-top {
background-image:url(../images/header-middle.jpg);
background-repeat: no-repeat;
background-position: right;
width: 73px;
height: 159px;;
}
#header-middle-bottom {
background-image:url(../images/header-search.jpg);
width:307px;
height:40px;
}
#header-right {
background-image: url(../images/header-right.jpg);
width: 638px;
float: right;
height: inherit;
}Вопрос
Нужно чтобы заголовок был прижат к левому краю, правая картинка к правому краю.
А посередине нужно чтобы была пустота, чтобы под разные разрешения подстраивалась.
Вроде все уже готово. Одну только проблему не могу решить. Как запихнуть белую область под маленькую картинку?
Прописываю clear: both, уезжает вообще за основной div вниз.
Спасибо 
Нет на форуме
#2 02.09.2013 12:10
- Xexe
- Новичок
- Зарегистрирован: 03.03.2012
- Сообщений: 28
Re: Позиционирование блоков
Как бы сделал я.
Так как у нас заданы фиксировано ширины и высоты, то будем играть с позиционированием.
Нам нужно позицию блока header-middle-bottom располагать относительно header-middle-top. Для этого придется немного поменять html.
а в стилях для header-middle-top задаем position:relative; (чтобы внутренние блоки позиционировались относительно него), а для header-middle-bottom position:absolute; right:0; bottom:-40px;(высота header-middle-bottom).
Нет на форуме