Как бы сверстать?

Игорь Ермаков · July 10, 2009

Уважаемые обитатели форума, помогите решить проблему.

Дано:

фиксированный макет, расположенный по центру, но справа должна тянуться резиновая линия до конца окна браузера.

Всё содержимое помещено в один блок, который расположен по центру, справа от этого блока, должен быть блок с фоном, и тянуться до правого края.

Вся соль в том, что с лева он нафиг не нужен, так что расположить его под основным блоком с шириной в сто процентов, не работает.

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

Должно быть кроссбраузерно.

Если есть решение на таблицах, тоже принимается

Вот ещё нарисовал для улучшения восприятия задачи.

http://s59.radikal.ru/i165/0907/c6/202cfab7c5ea.gif

Игорь Ермаков · July 10, 2009

Сумел решить на таблицах, буду очень признателен, если кто поможет реализовать блоками.

<table border="1" width="100%">

<tr>

<td style="background:#fff;">2</td>
<td style="background:#666;" width="800px">1</td>
<td style="background:#ccc;">3</td>

</tr>

</table>

Edited July 10, 2009 by Игорь Ермаков

psywalker · July 10, 2009

что то типо этого не прокатит?

http://psywalker.ru/SAITS/page.html

Павел Билькис · July 10, 2009

отписался в аську

Игорь Ермаков · July 10, 2009

получилось решить используя z-index, но проблемы с центрированием

<div id="ccc">3</div>

<div id="aaa">1</div>

<div id="bbb">2</div>

#aaa {float:left; margin:0 auto;
background:blue; width:800px; height:100px;
 z-index: 2; position: relative;}

#bbb {float:right; background:#666;  width:100%; height:100px; position:relative; top:-100px; z-index: 1;}

#ccc {float:left; width:20%; background:#fff; position: relative; z-index: 2; height:100px;}

Максим спасибо, ты как всегда на высоте :blink:

Павел Билькис · July 10, 2009

<html>
<head>
<title>Test</title>
<style type="text/css">
#block1, #block2{
float:left;
ьшт-height:300px;
background:black;
color:white;
border:3px solid red;
}

#block1{
width:300px;
}

#container{
width:1000px;
margin-left:20%;
}

#block2{
min-width:300px;
max-width:600px;
}
</style>
</head>
<body>
<div id="container">
<div id="block1">text</div>
<div id="block2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et odio id quam dignissim porta. Donec a adipiscing eros. Vestibulum pulvinar, mi at blandit laoreet, elit mi sollicitudin magna, a tincidunt magna nibh sed leo. Nulla vel magna odio. Nam odio nisi, cursus a iaculis porta, lobortis eget quam. Suspendisse aliquam porta fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ac metus erat. Etiam luctus neque non sapien rhoncus dapibus. Vivamus quam augue, laoreet non ultricies sed, scelerisque ut quam. Fusce varius dui vel mauris convallis lobortis vestibulum sem blandit. In suscipit magna non enim volutpat vitae luctus nisi porttitor. In porta, quam sed sodales egestas, neque ipsum pretium odio, eu placerat leo nulla vel purus. Curabitur a felis ipsum, eget scelerisque felis. Nunc varius ornare ante, posuere dapibus lacus blandit pellentesque. Vestibulum sit amet tristique sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt vulputate nibh, quis varius elit eleifend et. Sed nibh massa, malesuada eu pellentesque ut, congue in urna.

Donec gravida elementum nisl et tristique. Aliquam facilisis vestibulum massa. Sed auctor mauris et massa auctor adipiscing adipiscing elit ornare. Maecenas a mauris nec enim porttitor bibendum id vel lorem. Phasellus ullamcorper feugiat sem quis aliquam. Vestibulum tempor pellentesque accumsan. Mauris lobortis felis ut nisl ullamcorper lobortis. Nunc nec dolor metus, eu iaculis leo. Aenean aliquam tellus eget quam vulputate ac feugiat lorem luctus. Mauris ac nulla vitae erat rutrum porttitor nec sit amet dolor. Nullam eu velit sed sapien hendrerit porttitor eu eu diam. Duis sed elementum turpis. Nunc non felis at est tempor vulputate eget sit amet nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam fringilla semper magna posuere posuere. Etiam libero felis, varius ac aliquam id, congue vel sapien. Aenean quis dolor ipsum, nec vehicula neque. Etiam et sem tortor. Nulla volutpat erat neque. Fusce quis elit in ante suscipit facilisis.

Nunc semper imperdiet egestas. Nam elementum mattis dolor facilisis tincidunt. Nulla mollis ligula ac purus sodales ut ultricies nulla mattis. Aliquam erat volutpat. Nunc imperdiet auctor tellus sit amet facilisis. Proin nibh est, consequat quis ullamcorper sed, mollis nec erat. Quisque ultricies ultrices eros, faucibus consectetur sem laoreet viverra. Nullam sit amet tellus nec magna ultricies posuere in nec purus. Proin ut dolor sit amet purus commodo bibendum ac non risus. Pellentesque auctor adipiscing metus sit amet fringilla. Sed mattis pretium condimentum. Cras id tellus libero, eget pellentesque enim. Donec ipsum dui, condimentum ut luctus et, malesuada ultrices nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam pretium, lectus sit amet dictum tincidunt, augue turpis interdum nisi, eleifend viverra magna lorem ut urna. Ut quis ullamcorper orci.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec at nisi massa, sit amet aliquam nunc. Quisque venenatis lectus interdum velit sagittis facilisis. Pellentesque ipsum arcu, aliquet vitae semper in, convallis ut nibh. Nulla vitae bibendum ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum tortor ut metus tempor iaculis. Etiam blandit porttitor nisi, eu posuere massa egestas a. Morbi lobortis, nunc blandit vulputate imperdiet, felis enim blandit urna, quis laoreet nibh nisi nec erat. Curabitur et dapibus urna. Aliquam quam tortor, pulvinar non fermentum at, varius sit amet nisl.

Curabitur sed augue cursus diam cursus pulvinar. Phasellus eu leo in ipsum sodales sagittis et eget leo. Mauris accumsan magna ac velit commodo pulvinar. Vivamus sollicitudin, magna non tristique blandit, nibh sem tempor odio, et tincidunt sapien est in metus. Aenean interdum aliquam tellus. Fusce et neque vel ante ultrices congue non non sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vel lectus lectus. Suspendisse sem orci, feugiat at aliquam id, laoreet convallis nisl. Ut ut nisl nunc. Nam nisl odio, volutpat et porta eget, ullamcorper molestie nulla. Aliquam laoreet, libero ac iaculis pretium, felis tellus suscipit orci, ac tempus lectus justo non sem. </div>
</div>
</body>
</html>

Написано на коленке, за 10 минут

Игорь Ермаков · July 10, 2009

*ушёл учить русский, чтобы уметь локализировать проблемы*

Павел Билькис · July 10, 2009

*а еще лучше фотошоп, чтобы нарисовать все по понятней :blink: *

Edited July 10, 2009 by Павел Билькис

psywalker · July 10, 2009

Игорь, твой способ кажется слетает при сужении экрана

Максим спасибо, ты как всегда на высоте smile.gif

Не за что, а я разве помог? :blink:

Павел Билькис

А я знал, что ты профи ещё тот!

Павел Билькис · July 10, 2009

Игоря я неправильно понял. Картинка левая

Игорь Ермаков · July 10, 2009

Не за что, а я разве помог?

Да

Павел Билькис
А я знал, что ты профи ещё тот!

В защиту Павла, должен сказать, что он очень даже хорошо программирует и верстать умеет, когда надо, я видел.

Sign In

Как бы сверстать?

Question

Link to comment

Share on other sites

10 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

Join the conversation

Обсуждения

Important Information