Блог

Вот что я пытаюсь сделать:

Я хочу, чтобы вверху страницы был синий баннер (шириной 100%). В то же время я хочу, чтобы текст (facebook, Twitter и т.д.) Оставался фиксированной шириной остальной части страницы и был выровнен по правому краю?

http://www.potentia.co.nz/

Вот два решения:

1. Фоновое изображение на body . Это то, что они сделали. Это совсем не то, как мне нравится это делать.

2. Сделайте строку заголовка во всю ширину и используйте стандартную технику «контейнер width margin: 0 auto «, добавив к ней text-align: right .

У меня было бы два divs. Родительский файл div будет иметь ширину 100%, а дочерний div будет иметь ширину содержимого страницы (скажем, 1024px). Просто установите дочерний элемент div по центру родительского элемента div .

Установите родительский div фон этого синего цвета, а дочерний — наследующий его (или имеющий прозрачный фон).

Это то, что вы ищете.

Скрипка

HTML

 <header role="banner">
    The Banner
</header>
<div id="content">
    <p>Dear proofread the assisted intuitively well before less behind far sank so and excepting irrationally where guinea crane goodness the bit elephant this improper inoffensive jeepers loyally circa iguana well spat impudently where outran blandly.</p>
    <p>Angelfish horse one numbly some before saliently dog less less the dishonestly glanced and at yikes belched this hence much where perceptible flashily burst thought rethought this hence in.</p>
    <p>Fishily oriole flipped swankily fired this genial jeez and peculiar far unaccountable yellow ouch upon this owing through a yikes this cast lazily hit yikes well much beneath rewound gnu.</p>
    <p>Fumed regardless jubilant much spelled this one overheard far in boomed buffalo snugly much wow firm darn titillating jeepers wryly that this that close oh one much supreme morbidly eagle as teasingly rabbit hilarious up.</p>
    <p>As lemur sped tough hedgehog wherever indignantly inconsiderately much goodness skillfully devilishly pushed that smirked in far this hello charmingly amid oh earthworm.</p>
</div>
  

CSS

 header[role="banner"] {
    width: 100%;
    font: 1.5em/1em sans-serif;
    background: #ff0450;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    padding: 20px 0;
    box-shadow: 0 1px 1px rgba(0,0,0,0.5);
}

#content {
    width: 500px;
    margin: 20px auto;
}
  

Что-то вроде этого должно сработать для вас:

HTML

 <div id="background">
    <div id="overlay">
        Test
    </div>
</div>
  

CSS

 #background
{
    width:100%;
    background-color:red;
    height:60px;
    padding-top:10px;
}

#overlay
{
    width:80%;
    margin-left:10%;
}