Резиновые трехколоночные макеты

Vlad · January 27, 2011

Систематизировал различные варианты резиновых трехколоночных макетов, в итоге получил их 13 разновидностей. К примеру, такой (px ∞ px) означает, что первая и третья колонка задана в пикселах, а средняя занимает оставшееся пространство. Макет (% % %) означает, что ширина всех колонок указана в процентах.

1. ∞ px px

2. px ∞ px

3. px px ∞

4. % % %

5. % ∞ px

6. ∞ % px

7. (% %) px (ширина первых двух колонок принимается за 100%)

8. px % ∞

9. px ∞ %

10. px (% %) (ширина последних двух колонок принимается за 100%)

11. % px ∞

12. ∞ px %

13. ∞ px ∞ (здесь левая и правая колонка равны между собой)

rus · January 27, 2011

когда делаю резину, то всегда стараюсь по возможности приходить к четвертому варианту.

Vlad · January 27, 2011

Все эти варианты в принципе равноценны и применять их следует исключительно к конкретным сайтам. Разве что варианты 7 и 10 более мудреные, но возможно и они где-то найдут свое предназначение.

Vlad · January 27, 2011

Возникли сложности в реализации макета 6 с использованием float. Как не хотелось, но пришлось вводить еще один слой и указывать отступ для него. В итоге получилось два слоя один в другом, для первого отступ справа задан в %, для второго в px.

Посмотрел альтернативные решения, обнаружил здесь.

http://blog.html.it/layoutgala/LayoutGala22.html

Но там вообще так хитро все сделано, черная магия прямо.

Вот полный листинг, есть возможность оптимизировать его и сделать еще проще?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Макет 6</title>
  <style type="text/css">
   .header, .footer { background: #D5BAE4; }
   .layout { overflow: hidden; }
   .col1 { margin-right: 40%; }
   .col1 .wrap { margin-right: 200px; background: #C7E3E4; height: 300px; }
   .col2 { background: #E0D2C7; width: 40%; float: right; }
   .col3 { background: #ECD5DE; width: 200px; float: right; }
  </style>
 </head>
 <body>
  <div class="header">Шапка сайта</div>
  <div class="layout">
   <div class="col3">Колонка 3</div>
   <div class="col2">Колонка 2</div>
   <div class="col1">
    <div class="wrap">
     Колонка 1
    </div>
   </div> 
  </div>
  <div class="footer">Подвал</div>
 </body>
</html>

Vlad · January 27, 2011

Еще не получается номер 13 на float реализовать. Есть подсказки, как это сделать?

gordi · January 27, 2011

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

Больше логики, когда все элементы web-страницы в зависимости от разрешения экрана монитора меняются пропорционально, как по высоте, так и по ширине и занимают всю доступную рабочую область браузера.

Разметка, где скажем, область контента тянется максимально, а колонки навигации имеют фиксированную ширину и макет на разрешении 1024*768 выглядит достойно, на разрешении 1920*1080 будет смотреться совершенно иначе и совсем не в лучшем виде.

Пример возможной реализации, не идеальный

http://trifler.ru/i/layout/proportions/proportions_font.html

psywalker · January 27, 2011

Еще не получается номер 13 на float реализовать. Есть подсказки, как это сделать?

Есть

http://psywalker.ru/Portfolio/Archery/main-page.html

Vlad · January 27, 2011

Спасибо, помогло.

psywalker · January 27, 2011

Спасибо, помогло.

Не за что

dostel1 · May 16, 2011

Vlad у тебе есть примеры по каждому макету??

dostel1 · September 27, 2011

может кто знает знакомые ресурсы по даным видам?

Vlad · September 27, 2011

Что конкретно интересует?

Sign In

Резиновые трехколоночные макеты

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information