Простой CSS MasterPage макет

Question

Я беспомощен, старался изо всех сил понимать CSS, но это не для меня.

Я хотел бы сделать действительно простую мастер-страницу:

• в верхней части div по ширине и высоте 40px (1)
• внизу также div полной ширины и высоты 40px (2)
• в середине:
  • слева: ширина деления 200 px (3)
  • справа от левого div: div с contentPlaceHolder (4)

Я хотел бы получить следующее: если я создаю какой-либо сайт, использующий мою главную страницу, и помещаю панель в contentPlaceHolder с шириной 800 пикселей, я бы хотел, чтобы мой сайт адаптировался к нему - верхний, средний и нижний делители имеют ширину 1000 пикселей (200 + 800). Я также не хотел бы (и у меня есть огромная проблема с этим), чтобы (4) двигался вниз, если я изменяю размер (уменьшаю) окно браузера - я хотел бы, чтобы все div были заблокированы.

Это моя главная страница html:

<div>
    <div class="header">
    </div>
    <div>
        <div class="links">
        </div>
        <div class="content">
        </div>
    </div>
    <div class="footer">
    </div>
</div>

Какой тип CSS мне нужно написать, чтобы это наконец заработало?

Answer 1

Чтобы предотвратить вытеснение плавающих элементов из нужного вам выравнивания, вы обычно используете ширину или минимальную ширину.

Например, в этом коде div, содержащий ссылки и контент, никогда не будет меньше 1000 пикселей. Если размер экрана меньше 1000 пикселей, отображается полоса прокрутки.

<div style="min-width: 1000px">
    <div class="links"></div>
    <div class="content"></div>
</div>

Вы также можете использовать ширину вместо минимальной ширины:

<div style="width: 1000px">
    <div class="links"></div>
    <div class="content"></div>
</div>

Разница между ними проста: если вы укажете min-width, div может вырасти, если потребуется. Если вы укажете ширину, div будет точно указанного вами размера.

Имейте в виду, что минимальная ширина не поддерживается IE6.

Answer 2

Не уверен, что вы отметили это или нет, но мы используем YUI-Grids CSS Framework для наших макетов. Это избавляет нас от необходимости тратить много времени на CSS, который не так хорош для разработчиков.

Существует даже построитель сетки , который позволит вам графически создать макет страницы, а затем скопировать и вставить необходимый HTML, чтобы это произошло:)

Answer 3

Вот быстрый пример использования CSS / разметки для этой проблемы.

Markup:

<!-- Header, etc. -->
<div class="contentView">
    <div class="links">
    </div>
    <div class="content">
    </div>
</div>
<!-- Footer, etc. -->

CSS:

.contentView {
    /* Causes absolutely positioned children to be positioned relative to this object */
    position: relative;
}

.links {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
}

.content {
    padding-left: 200px;
}

Возможно, вы хотите, чтобы ваш нижний колонтитул был "липким". Проверьте здесь информацию об этом: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Насколько это уместно, зависит от того, что именно требует дизайн. Это делает раздел ссылок более плавающим полем слева, чем столбец, например.

В конечном итоге это выглядит так (.content зеленый, .links красный):