• 22725
  • 77
  • 3
Нравится блог?
Подписывайтесь!

Попытки сумасшедшего

Пытаюсь сделать резиновый макет сайта, при чем html код я знаю, но не очень хорошо… Если меня видит кто–нибудь из веб–мастеров, огромная просьба расшифровать данную статью… (откроется в новом окне) 

Создание "резинового" макета страницы из трех колонок. Как и в случае макета с двумя колонками сначала создадим HTML-разметку, которую будем в дальнейшем форматировать. По-моему это даже проще, чем одноколоночный макет...
Итак, зададим HTML-разметку:

и отформатируем ее с помощью следующей таблицы стилей:

В этом решении все три колонки включены в плавающую модель, выравниваются по левому краю и суммарная их ширина не превышает 100%.

 
<div id="header">
... шапка страницы ...
</div>
<div id="sidebar">
... колонка меню ...
</div>
<div id="content">
... основное содержимое страницы ...
</div>
<div id="otherbar">
... колонка меню ...
</div>
<div id="footer">
... подвал ...
</div>

 

 
#content {
float:left;
width:50%;
background-color:#CCC;
}
#sidebar {
float:left;
width:30%;
background-color:#FFC;
}
#otherbar {
float:left;
width:20%;
background-color:#FFC;
}
#header {
background-color:#FCF;
text-align:center;
}
#footer {
clear:both;
text-align:center;
background-color:#CFF;
}

 

Однако следует очень внимательно относиться к полям, рамкам и отступам этих элементов, поскольку, если суммарная ширина колонок превысит 100%, то одна или две колонки будут расположены друг под другом.

Вот так легко и просто. Этот метод работает во всех популярных браузерах.

23 ноября 2009, 16:10
701

Загрузка...
Loading...

Комментарии

xlbo
0
0
Вот здесь всё описано: trifler.ru
fuck
0
0
Большое спасибо)
Способ размещения элементов в CSS очень хреновый (и что еще хуже, очень мало народу там, в W3C, врубается в суть проблемы), потому что рассчитан на текст со вкраплениями картинок, и никак не на GUI или что-то подобное.

Тащемта алгоритм несложный (если не вдаваться в детали), там просто расставляются некие "блоки" (прямоугольники на плоскости) относительно друг друга, причем обычно расставляются не абы как, а последовательно, сверху вниз, по течению документа (flow).

Вся эта хрень называется CSS Box Model.
Rex
0
0
хехе, на счет "CSS Box Model" не знал.. А так все так :)
Rex
0
0
Вообще, советую обратить внимание на Blueprint. Я им с пол-годика гдето пользуюсь - крайне удобная вещь! Все возможные блоки учтены, примеры есть.

Оставьте свой комментарий

Спасибо за открытие блога в Yvision.kz! Чтобы убедиться в отсутствии спама, все комментарии новых пользователей проходят премодерацию. Соблюдение правил нашей блог-платформы ускорит ваш переход в категорию надежных пользователей, не нуждающихся в премодерации. Обязательно прочтите наши правила по указанной ссылке: Правила

Также можно нажать Ctrl+Enter

Популярные посты

Мой дом – не гостиница. Я не останавливаюсь у своей родни, потому что знаю, что это такое

Мой дом – не гостиница. Я не останавливаюсь у своей родни, потому что знаю, что это такое

Наступил долгожданный момент и мы смогли заселиться в собственную квартиру. А потом началось... Все знакомые, родственники, даже коллеги и соседи родителей вспомнили о нашем существовании.
Idealovnet
14 окт. 2017 / 20:38
  • 8433
  • 78
Работа на EXPO. «Улыбайтесь, вы – лица Казахстана»

Работа на EXPO. «Улыбайтесь, вы – лица Казахстана»

Продление перерывов, втыки от менеджеров, борьба за стенды, кучкования, как мы друг-друга прикрывали, защищали от гостей. Все эти события доставляли радость, и каждый день на работу я приходила...
madiNAtty
14 окт. 2017 / 22:34
  • 5850
  • 22
«Bank RBK» банкрот? Почему мы не можем распоряжаться собственными же деньгами?!

«Bank RBK» банкрот? Почему мы не можем распоряжаться собственными же деньгами?!

Мы не можем выдать зарплату, оплатить по счетам или как-то иначе распорядиться нашими же деньгами! У физ.лиц, насколько мне известно, ситуация не лучше - при нас люди не могли снять свои деньги с депозитов.
daniyar4422017
13 окт. 2017 / 15:46
  • 3280
  • 12
«Что дали задом?» Родительский чат в WhatsApp покорил Интернет

«Что дали задом?» Родительский чат в WhatsApp покорил Интернет

Чат дагестанских родителей в WhatsApp стал популярным в Интернете. Кто-то записал общение родителей в мессенджере и после опубликовал в Твиттере.
tala03
12 окт. 2017 / 15:10
  • 3275
  • 12
Я четко помню тот день, когда мне позвонили друзья и сообщили: «Она выходит замуж»

Я четко помню тот день, когда мне позвонили друзья и сообщили: «Она выходит замуж»

У нас была особенная атмосфера, мы постоянно были вместе, читали треки, летом часто поднимались в горы. Гуляли пешком по ночному городу, иногда до утра. Снимали хату и представляли совместную жизнь...
Dominator-kz
14 окт. 2017 / 22:29
Актогайский горно-обогатительный комплекс – брат-близнец Бозшаколя

Актогайский горно-обогатительный комплекс – брат-близнец Бозшаколя

Рядом с посёлком Актогай в ВКО расположено одно из крупнейших в мире неосвоенных медных месторождений. В октябре Актогайская обогатительная фабрика вышла на проектную мощность.
theYakov
12 окт. 2017 / 10:47
  • 3178
  • 23
Отчего в Казахстане предвзятое отношение к отечественному продукту?

Отчего в Казахстане предвзятое отношение к отечественному продукту?

Вы когда-нибудь пользовались казахстанской косметикой? Я тоже нет, поэтому сразу же откликнулась на приглашение своего фейсбук-френда протестировать отечественные крема… из Степногорска.
Shimanskaya
16 окт. 2017 / 11:32
  • 2482
  • 29
Когда почти все уехали в «А-города», стоит ли жить в Шымкенте?

Когда почти все уехали в «А-города», стоит ли жить в Шымкенте?

Город имеет особую ауру - очень густая энергетика, думаю, это от того, что он со всех сторон окружен "местами силы". Шымкент напоминает мне старенького доброго мудрого дедушку-аксакала.
Bonittta
13 окт. 2017 / 15:15
«На пути к успеху всей семьей»: как супруга Кайрата Нуртаса наконец вышла в свет

«На пути к успеху всей семьей»: как супруга Кайрата Нуртаса наконец вышла в свет

Зачастую казахские селебрити выходя в свет, привлекают внимание и обьективы камер только к своей персоне, оставляя свои вторые половинки в тени неизвестности.
gulshat87
13 окт. 2017 / 17:56
  • 1887
  • 6