Резиновый дизайн

[lersen]

Добрый форумчане!

Нужно сделать резиновый дизайн. Требование: чтобы до определенного размера рос один столбец, а после - другие(края). Эскиз прилагаю. 

<table>    <tr>        <td></td> <!--левая полоса растет если разрешение экрана >1400px-->        <td>            <table> <!--тело сайта растет до максимального размера 1400px-->                <tr>                    <td></td><!--фиксированный размер-->                    <td></td><!--изменяемый размер растет пока тело <1400px-->                    <td></td><!--фиксированный размер-->                </tr>            </table>        </td>        <td></td><!--правая полоса растет если разрешение экрана >1400px-->    </tr></table>

Пытался использовать max-width, но не могу сообразить как.

[Z1gnet]

ну вам тут нужны медиа запросы. с помощью них вы сможете задать необходимые стили при ширине выше 1400рх

[lersen]

ну вам тут нужны медиа запросы. с помощью них вы сможете задать необходимые стили при ширине выше 1400рх

Да как-то не хочу с ними связываться. Думаю, что можно через max-width ограничить размер тела сайта, а боковинки сделать width 50% от остатка. Но проблема в том, что правила применяются "сверху вниз", а не наоборот.

 

Думаю, что решение существует. Надеюсь на форумчан.

[Z1gnet]

чего вы боитесь медиа запросов?

что правила применяются "сверху вниз", а не наоборот.

вместо max-width используйте min-width в запросах. и еще совет, забудьте про табличную верстку

[swandev]

1. Таблицы для таблиц

2. Media  queries  сэкономят вам кучу времени, пока вы будете искать какое-то другое решение

3. Изучать все равно придется

[lersen]

Разобрался с @media. Объясните, пожалуйста, почему вот это не работает: http://jsfiddle.net/FC73K/

Мне нужно, чтобы при размере >600 Центр оставался 600, а боковинки расширялись равномерно.

<table border="1" width="100%">    <tr>        <td class="td_sholder_header">1</td>        <td class="td_main_header">1</td>        <td class="td_sholder_header">1</td>    </tr></table>

@media screen and (min-width: 600px) {    .td_sholder_header {        width:50%;    }    .td_main_header {        width:600px;    }}@media screen and (max-width: 600px) {    .td_sholder_header {        width:0;    }    .td_main_header {        width:100%;    }}

[swandev]

 

Разобрался с @media. Объясните, пожалуйста, почему вот это не работает: http://jsfiddle.net/FC73K/

Мне нужно, чтобы при размере >600 Центр оставался 600, а боковинки расширялись равномерно.

<table border="1" width="100%">    <tr>        <td class="td_sholder_header">1</td>        <td class="td_main_header">1</td>        <td class="td_sholder_header">1</td>    </tr></table>

@media screen and (min-width: 600px) {    .td_sholder_header {        width:50%;    }    .td_main_header {        width:600px;    }}@media screen and (max-width: 600px) {    .td_sholder_header {        width:0;    }    .td_main_header {        width:100%;    }}

 

http://jsfiddle.net/FC73K/1/

[lersen]

 

 

Разобрался с @media. Объясните, пожалуйста, почему вот это не работает: http://jsfiddle.net/FC73K/

Мне нужно, чтобы при размере >600 Центр оставался 600, а боковинки расширялись равномерно.

<table border="1" width="100%">    <tr>        <td class="td_sholder_header">1</td>        <td class="td_main_header">1</td>        <td class="td_sholder_header">1</td>    </tr></table>

@media screen and (min-width: 600px) {    .td_sholder_header {        width:50%;    }    .td_main_header {        width:600px;    }}@media screen and (max-width: 600px) {    .td_sholder_header {        width:0;    }    .td_main_header {        width:100%;    }}

 

http://jsfiddle.net/FC73K/1/

 

Благодарю!