внешний экран div в зависимости от разрешения, внутренний div фиксированная ширина по центру.

0

Я пытаюсь сделать сайт, на котором есть заголовок и меню сверху, это 2 цветных фона, которые распространяют всю ширину экрана независимо от разрешения монитора, однако я хочу, чтобы сам контент Logo, пункты меню и т.д. Были центрированы и без ширины более 1024 пикселей с тем же цветным фоном, конечно, поэтому он выглядит как сплошная 2 строки содержимого. под этим будет пустое пространство, а содержание этого я тоже хочу иметь 1024 пикселя. Я не уверен, как это сделать, как если бы мой div пошел на 100%, внутренний центр не был зафиксирован. Я знаю, что это базовое, но я еще не освоил css и стараюсь избегать таблиц. Я включаю рис. на случай, если объяснение им не имеет смысла. не хочу, чтобы линии хотели, чтобы они отображались как сплошные цвета. любая помощь будет принята с благодарностью. http://i.stack.imgur.com/yUc70.png

Теги:

3 ответа

0
Лучший ответ

Попробуйте эту скрипку:

jsfiddle.net/P9jg6/2/

Для полноэкранного вывода:

jsfiddle.net/P9jg6/2/show/

Поделиться
  • 0
    Неуникальные идентификаторы?
  • 0
    да потому что их стили разные.
Показать ещё 2 комментария
1

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

<div class="header">
    <div class="content">Header</div>
</div>
<div class="menu">
    <div class="content">Menu</div>
</div>
<div class="main">
    <div class="content">Content</div>
</div>

.content {
    max-width: 300px;
    margin: 0 auto;
    padding: 5px;
}
.header {
    background-color: olive;
    color: darkred;
}
.header .content {
    border-left: 2px solid darkred;
    border-right: 2px solid darkred;
}
/* same for menu, main */

Полный JSFiddle

Обновить:

Чтобы удалить пустое пространство вокруг веб-страницы, вы должны удалить маржу

body {
    margin: 0;
}

Модифицированный JSFiddle

Поделиться
  • 0
    Посмотрите на границы страницы "Белое пространство".
  • 0
    Я этого не понимаю Что вы имеете в виду?
Показать ещё 3 комментария
0

Я бы предпочел использовать: before и: after pseudoclasses как два фонов, помещенных абсолютно.

например:

body{}
body::before{ content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30px; background: #F00; }
body::after{ content: ''; position: absolute; left: 0; right: 0; top: 30px; height: 10px; background: #0F0; }

Конечно, это не сработает, если вам нужна переменная высота этих полос. Затем вам нужно создать полосы с обертками внутри (stripe = background, wrapper = centered content).

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню