В данном блоге заголовок занимает 100% монитора, а для меню ниже задано max-width (обусловлено особенностями CMS). Фон этого меню нужно было продлить до краёв окна браузера.
Для этих целей шапке сайта сначала установила outline размером, равным высоте меню. Всё было бы хорошо, но в Опере рамка outline отображается поверх всех элементов. Не помогло и позиционирование с увеличением z-index.
Тогда воспользовалась box-shadow, но оно недоступно для IE ранних версий.
Самым верным способом оказалось взаимодействие border-bottom со свойством position.
шапка блога
<style>
header {height: 40px; outline: 20px solid rgb(45, 45, 45); box-shadow: 0 0 0 20px rgb(45, 45, 45); border-bottom: 20px solid rgb(45, 45, 45);}
.content-wrapper {max-width: 300px; margin: 0 auto; position: relative;}
nav {background: #2d2d2d; height: 20px; line-height: 20px; position: absolute; top: -20px;}
</style><body> <header>шапка блога</header> <div class="content-wrapper"> <nav>меню</nav> </div> </body>
Комментариев нет: