[X] Помощник

[Alex Bentley Topic Starter]

Всем здрасьте. Разрабатываю сайт, требуется резиновая вёрстка, чтобы ширина содержимого страницы была в диапазоне от 1024 до 1280 пикселей. Вёрстка стандартная - блочная (блок header, ниже nav, ниже content в котором два блока left_c и right_c, которые обтекают с помощью float, ниже footer и всё это обрамлено блоком main).

Блоку main присвоены свойства min-width: 1024px и max-width: 1280px. Такие же свойства и у header, footer, content, nav. Всё работает лучше некуда.

Обтекающие друг друга блоки left_c и right_c, которые в блоке content, должны быть сделаны следующим образом:

1) Блок left_c должен быть фиксированным по ширине, 250px

2) Блок right_c должен быть резиновым, от 680 до 936 пикселей.

Так вот, кульминация моего вопроса, сделал для right_c ширину min-width:680px и max-width: 936px, но блоку присваивается почему то только минимальная ширина 680.

Как решить эту проблему?

Пробовал решить проблему разными способами. Убрал обрамляющий блок main. Вытащил left_c и right_c из content, который тоже удалил. Убрал обтекание, тем самым сделав left_c над right_c. Попробовал сделать опять ширину у блока и заметил, что диапазон ширины 1024-1280 ставится спокойно, и у этого же блока диапазон 680-936 не ставится. Может проблема из за поставленных ранее диапазонов у блоков header, nav, main?

HTML:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Главная</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">


    <div id="main">
        <div id="header">
            <div id="logo">
                <a href="index.html">
                    <img src="img/logo.png" alt="Goldline International">
                </a>
            </div>
            <div id="slogan">
                <img src="img/slogan.png" alt="Ювелирные украшения - истинные ценности твоей жизни">
            </div>
            <div id="contacts">
                <p>+7 (812) <span class="number">987-65-43</span></p>
                <p>г. Санкт-Петербург</p>
                <p>ул. Улица, д.17</p>
            </div>
        </div>
        <div id="nav">
            <ul>
                <li><h2><a href="index.html" class="active_element">Главная</a></h2></li>
                <li><h2><a href="#">О компании</a></h2></li>
                <li><h2><a href="#">Программа</a></h2></li>
                <li><h2><a href="#">Коллекция</a></h2></li>
                <li><h2><a href="#">Каталог</a></h2></li>
                <li><h2><a href="#">Магазины</a></h2></li>
                <li><h2><a href="#">Статьи</a></h2></li>
                <li><h2><a href="#">Акции</a></h2></li>
                <li><h2><a href="#">Контакты</a></h2></li>
            </ul>
        </div>
        <div id="content">
            <div id="left_c">
                <h3>заголовок</h3>
                <p class="text_bold">текст</p>
                <p>текст.</p>
            </div>
            <div id="right_c"></div>
            <div id="clear"></div>
        </div>
        <div id="footer"></div>
    </div>

css

@charset "windows-1251";
@import url(reset.css);

body {/**/
    padding-top: 10px;
    background: #ffde68 url('../img/body.png') no-repeat center;
    overflow: scroll;
    font: 16px Verdana, sans-serif;
}

#main {
    min-width: 1024px;
    max-width : 1280px;
    margin: 0px auto;
    height: 100%
}

#header {
    position: relative;
    min-width: 1022px;
    max-width: 1278px;
    border-radius: 7px;
    border: 1px solid #dbc063;
    box-shadow: 3px 1px 2px #958e74;
    background: url('../img/header.png') repeat-x;
    height: 98px;
    margin-bottom: 0px;
}

#logo {
    left: 0px;
    position: absolute;
    width: 256px;
    height: 88px;
    margin: 6px 0px 6px 15px;
}

#slogan {
    position: absolute;
    left: 50%;
    margin: 6px 0px 6px -225px;
    width: 460px;
    height: 88px;
}

#contacts {
    text-align: center;
    position: absolute;
    right: 0px;
    width: 248px;
    height: 66px;
    margin: 17px 15px;
}

.number {
    font-size: 20px;
}

#nav {
    height: 30px;
    min-width: 1022px;
    max-width: 1278px;
    border-radius: 7px;
    border: 1px solid #dbc063;
    box-shadow: 3px 1px 2px #958e74;
    background: url('../img/nav.png') repeat-x;
    padding: 10px 40px;
}

#nav ul {
    text-align: justify;
    zoom: 1;
    text-justify: newspaper;
    text-align-last: justify;  
}

#nav ul:after {
    width: 100%;
    content: '';
    display: inline-block;
    height: 0px;
}

#nav ul li {
    display: inline-block;
    //display : inline;
    //zoom: 1;
     text-align: left;
}

#nav ul li h2 {
    font: 16px Verdana, sans-serif;
}

#nav ul li h2 a {
    text-decoration: none;
    color: #000000;
    cursor: pointer;
    padding: 5px 7px;
    display: block;
}

#nav ul li h2 a:hover, .active_element {
    border-radius: 30px;
    box-shadow: 2px 2px 2px #958e74;
}

#content {
    outline: 1px solid black;
    height: 100%;
    min-width: 1022px;
    max-width: 1278px;
    border-radius: 7px;
    border: 1px solid #dbc063;
    box-shadow: 3px 1px 2px #958e74;
    background: url('../img/content.png') repeat;
    padding: 30px;
}

#left_c {
    width: 250px;/**/
    height: 100%;
    outline: 1px solid black;/**/
    float: left;
    margin-right: 30px;
}

#left_c h3 {
    font-size: 20px;
    font-weight: bold;

}

.text_bold {
    font-weight: bold;
}

#left_c p {
    padding-top: 15px;
}

#right_c {
   min-width: 680px;
    max-width: 936px;
    border: 1px solid black;
    height: 300px/**/;
    float: right;
}

#clear {
    clear: both;
}

[Алия_mw]

Если сейчас в Ваш правый блок вставить текст, он растянется по всей ширине, но при масштабировании будет смещаться вниз под левый блок.
Попробуйте заменить:

#right_c {
   min-width: 680px;
        max-width: 936px;
        border: 1px solid black;
        height: 300px/**/;
        float: right;

на

#right_c {
width: 75%;
margin-right: -40px;
border: 1px solid black;
height: 300px/**/;
float: left;
}

и в left_c увеличьте margin-right с 30 до 40px, тогда при масштабировании получится более-менее симметрично.
Правда, правое поле у правого блока при увеличении масштаба будет уменьшаться (из-за отрицательного значения), но зато блок не спрыгнет вниз.
Если не устраивает, поиграйтесь с шириной полей блоков и процентами. Я подгоняла методом тыка.

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.