Jump to content
  • 0

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


AntonSolo
 Share

Question

Здравствуйте реально ли создать такой макет в три колонки (блочная вёрстка). В котором ширина первой и второй колонки будут фиксированые а третья колонка будет растягиваться на всю оставшуюся ширину экрана. высота будет растягиваться относительно самой высокой колонки. Фон у всех разный, причём первым двум колонкам он задаётся рисунками, так что вариант с бордерами не подходит. Заранее спасибо!

Link to comment
Share on other sites

19 answers to this question

Recommended Posts

  • 0
Здравствуйте реально ли создать такой макет в три колонки (блочная вёрстка). В котором ширина первой и второй колонки будут фиксированые а третья колонка будет растягиваться на всю оставшуюся ширину экрана. высота будет растягиваться относительно самой высокой колонки. Фон у всех разный, причём первым двум колонкам он задаётся рисунками, так что вариант с бордерами не подходит. Заранее спасибо!

Можно... Такая тема уже поднималась... Поищите на форуме...

Link to comment
Share on other sites

  • 0
Ищу, что -то найти не могу

Вот здесь масса примеров на любой вкус, по листайте страницы блога:

http://trifler.ru/blog/

Поиск там тоже работает :)

Что б проще разобраться, страница, где собраны линки на примеры

http://trifler.ru/blog/ideal.html

Link to comment
Share on other sites

  • 0
В этих примерах не работает ничего для IE и макеты в ширину не фиксированные(

Тоесть наоборот фиксированные!

Во всех?

В не которых да, согласен, но не во всех, это точно ;)

К тому же, по аналогии, ничего не мешает задать для IE6

width:expression

с нужными параметрами.

Edited by gordi
Link to comment
Share on other sites

  • 0

Так оно и в 7 , не только в 6

<div id="middle" class="bordr bordl">

<div class="wrap">

<div class="main">

<div class="center">

<div class="content bordl">

<div style="border: 1px solid rgb(255, 0, 0); margin: 10px auto; padding: 5px 8px; width: 520px;">

Блок по ширине больше установленного

<span style="color: green;">min-width</span>

<br/>

При уменьшении окна браузера по горизонтали будет обрезан справа.

<br/>

<br/>

Для IE6 Ширина макета фиксирована.

Для IE6 Ширина макета фиксирована.<br>

Для IE6 Ширина макета фиксирована.

Для IE6 Ширина макета фиксирована.<br>

Для IE6 Ширина макета фиксирована.

Для IE6 Ширина макета фиксирована.<br>

Для IE6 Ширина макета фиксирована.

Для IE6 Ширина макета фиксирована.<br>

Для IE6 Ширина макета фиксирована.

Для IE6 Ширина макета фиксирована.<br>

Для IE6 Ширина макета фиксирована.

Для IE6 Ширина макета фиксирована.<br>

</div>

<p class="expand">

</p>

<p>Middle Center</p>

</div>

</div>

<div class="left">

<p class="expand">

</p>

<p>Middle Left</p>

</div>

<div class="right">

<p class="expand">

</p>

<p>Middle Right</p>

</div>

</div>

</div>

</div>

вот стили

#middle {

background:#000000 none repeat scroll 0 0;

}

#middle .center {

margin-left:-401px;

}

#middle .content {

background-color:yellow;

margin-left:401px;

}

#middle .left {

background:red;

width:200px;

}

#middle .right {

background:blue;

margin-left:-759px;

width:200px;

}

.wrap, .center, .content, .left, .right {

margin-bottom:-32767px;

padding-bottom:32767px;

}

.wrap, .center {

width:100%;

}

.wrap, .left {

float:left;

}

.center, .right {

float:right;

}

.content {

padding-top:9px;

}

.bord {

border:1px solid #000000;

}

.bordt {

border-top:1px solid #000000;

}

.bordr {

border-right:1px solid #000000;

}

.bordb {

border-bottom:1px solid #000000;

}

.bordl {

border-left:1px solid #000000;

}

#middle .right {

}

.clear {

clear:both;

display:block;

font-size:1px;

height:1px;

overflow:hidden;

}

p {

padding:5px 10px;

}

.expand a {

clear:both;

color:#996600;

display:block;

text-decoration:underline;

width:100px;

}

.expand a:hover {

color:green;

height:600px;

}

ну и нужно чтоб третяя колонка, которая мамая правая была резиновая

Link to comment
Share on other sites

  • 0
Так оно и в 7 , не только в 6

....

ну и нужно чтоб третяя колонка, которая мамая правая была резиновая

Скажите конкретно, какое расположение колонок вам нужно.

Дам конкретный линк ;)

Просто напишите, какоq из макетов вам нужен:

left-content-right

content-right

left-content

content-left-right

left-right-content

Edited by gordi
Link to comment
Share on other sites

  • 0
left-right-content

первые два фиксированые второй резиновый, занимает всё оставшееся пространство в зависимости от расширения

Прямая ссылка с той же страницы ;)http://trifler.ru/blog/i/layouts/ideal/ideal_gordi_lrc.htm

Сделаете какой надо min/max-width тоже для IE6, удачи :)

Edited by gordi
Link to comment
Share on other sites

  • 0
Спасибо всё работает, только теперь наткнулся на другую проблему в 6IE не могу прилепить футер!) ? Можно ли и с этим как то побороться для данного примера

Посмотрите здесь: http://trifler.ru/blog/i/layouts/relative/..._border-top.htm

Вставив макет по той ссылке, что давал вам ранее,

а наименования классов полностью соотвествует,

вы получите то, что хотите.

Edited by gordi
Link to comment
Share on other sites

  • 0
Спасибо всё зараьотало, теперь последняя проблема. Можно ли в блок left или right вставить еще по одному блоку, и чтобы эти бвставные блоки всегда находились внизу ???

Прочитав внимательно - http://trifler.ru/blog/post_1221307338.html

и посмотрев примеры.

По аналогии можете попробовать, должно получиться.

Link to comment
Share on other sites

  • 0

кароче под всей вашей конструкцией всунуть див) потом конструкции дать отрицательный маргин всей высоты дива) этим мы засунули див на низ конструкции(вышел футер) потом делим футер на три колонки так как поделили конструкцию, и потом у нас есть три футера, для каждой колонки)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy