→ При разработке сайта лендинг в подарок! ЖМИ! ←
Дек
25

DIV: резина + фиксированная верстка

Задача в принципе стоит простая: есть три колонки. Первая привязана к левому краю и имеет фиксированную ширину, вторая привязана к правому краю и имеет фиксированную ширину, третья располагается между первыми двумя и занимает всё оставшееся место. Согласитесь, создание сайтов с такой структурой довольно часто встречается. Я сам написал сайт недорого по такой структурке.

Давайте разбираться. Создадим страничку со следующей структурой:

1
2
3
4
5
<div id="header">
<div id="logo"></div>
<div id="zapoln"></div>
<div id="rightblock"></div>
</div>

Для этой странички прописываем следующий CSS-код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#header {
height:95px;
padding-left:492px;
padding-right:146px;
}
#logo {
width:492px;
height:95px;
float:left;
background:url(../images/logo.png) no-repeat left;
margin-left:-492px;
}
#zapoln {
background:url(../images/fon_header.png) repeat-x;
float:left;
height:95px;
width:100%;
}
#rightblock {
width:146px;
height:95px;
background:url(../images/rightblock.png) no-repeat right top;
float:left;
margin-right:-146px;
}

Думаю, комментарии тут излишни для тех, кто давно занимается созданием сайтов. Новичков, которые только начинают осваивать  технологию сайтостроения и пока что пишут сайты недорого жду в комментариях. Что неясно, спрашивайте.

  • Огромная барахолка мобильных. Только там я нашел новые версии нокиа в два раза дешевле
  • Моя давняя страсть — рыбалка. Только на речке можно отлично отдохнуть в тишине

Прокомментировать

Рубрики

Наши услуги

В прямом эфире