Простой DIV-макет: заголовок, навигация, контент

Question

Простой DIV-макет: заголовок, навигация, контент

0

Я ищу классический макет страницы:

Заголовок 800 пикселей, Navi (слева) 200 пикселей, содержимое (справа) 600 пикселей

Можно ли поставить это только в 3 DIVs?

<div id="header">Header</div>
<div id="navi">Navi</div>
<div id="content">Content</div>

Поскольку каждый макет, который я нашел до сих пор, построен таким образом:

<div id="header">Header</div>
<div id="panel">
    <div id="navi">Navi</div>
    <div id="content">Content</div> <!-- position absolute left:200px -->
</div>

Благодарю! Римский

Roman Tisch 03 янв. 2014, в 16:25

Источник

0

Готовы ли вы обернуть заголовок, навигацию и содержимое в элемент блока оболочки? Хотите, чтобы навигационный контент был в центре страницы?
Marc Audet 03 янв. 2014, в 15:25

Теги:

html

css

layout

2 ответа

Ещё вопросы

Готовы ли вы обернуть заголовок, навигацию и содержимое в элемент блока оболочки? Хотите, чтобы навигационный контент был в центре страницы?

enguerranws · Answer 1 · 2014-01-03T13-53-00.000Z

Вы, конечно, можете сделать это так, как вы сказали.

Дело в том, что код:

<div id="header">Header</div>
<div id="panel">
  <div id="navi">Navi</div>
  <div id="content">Content</div> <!-- position absolute left:200px -->
</div>

Будет легче сделать и сохранить. Например, вам просто нужно указать единый margin-top на #panel для управления запасом между заголовком и nav + контентом. С вашим кодом вам придется указывать его дважды, на #navi и на #content.

Chad · Answer 2 · 2014-01-03T13-03-00.000Z

Не думайте, что это слишком complex-- просто установите заголовок на ширину 100%. Проверьте это: http://jsfiddle.net/ASy67/

<div id="header"></div>
<div id="left"></div>
<div id="right"></div>

И CSS:

div {
    height: 100px;
}
#header {
    background: #f00;
    width: 100%;
}
#left {
    background: #0f0;
    float: left;
    width: 200px;
}
#right {
    background: #f0f;
    width: 600px;
}

В этом примере содержимое отображается за левой боковой панелью. Вы можете исправить это, добавив float: right; на #right или padding-left: 200px; до #right.