Как расширить заголовок через фон веб-страницы с CSS
Обоим из этих веб-сайтов расширили фоновый заголовок через страницу, в то время как содержание центрируется и покрывает как, говорят, что 80% ширины, и который также отлично выравнивается с остальной частью расположения.
Я особенно интересуюсь этими двумя сайтами, потому что заголовок имеет два цвета фона, не всего один.
Я уверен, что существуют тонны учебных руководств в сети, но я не делаю ключевых слов для поиска.
7 ответов
Анализ stumbleupon.com:
На самом деле "заголовок" состоит из двух div'ов: wrapperHeader and wrapperNav. Эти два div имеют разные цвета фона.
Эти div имеют только по одному дочернему элементу, который имеет CSS-свойство
margin: 0 auto
Это приводит к горизонтальному центрированию.
Это свойство присвоено и div'у content, поэтому заголовок, навигация и содержимое всегда центрированы. Конечно, для этого необходимо задать некоторую ширину для этих элементов.
Структура выглядит следующим образом:
<div id="wrapperHeader">
<div class="" id="header">
<!-- mnore stuff here, like logo -->
</div> <!-- end header -->
</div>
<div id="wrapperNav">
<ul id="navMain">
<li class="discover first"><a href="/discover/toprated/">Discover</a></li>
<li class="favorites"><a href="/favorites/">Favorites</a></li>
<li class="stumblers"><a href="/stumblers/onlinenow/">Stumblers</a></li>
</ul> <!-- end navMain -->
</div>
<div id="wrapperContent">
<div class="clearfix" id="content">
</div> <!-- end content -->
</div>
Если у вас есть Firebug для Firefox, вы можете легко проанализировать элементы самостоятельно.
Это просто макет фиксированной ширины, но с автоматическими левым и правым полями. Результатом этого является центрирование всего блока содержимого, если размер страницы шире, чем ширина содержимого.
фон просто задается как повторяющееся изображение (repeat-x), чтобы он выглядел так, как будто элемент меню фактически расширяет всю ширину страницы.
это background-image установленный в body со свойством background-repeat:
background-repeat: repeat-x;
more: http://www.w3schools.com/css/pr_background-repeat.asp
Edit: Что касается центрирования содержимого - я делаю это так:
<body>
<div id="wrapper">
<!-- here is wrapper *everything* else -->
</div>
</body>
затем устанавливаю width обертки в значение (в основном 960px). Затем, когда вы установите ее margin в 0 auto, она центрируется.
#wrapper{
margin: 0 auto;
}
Добавление фоновых изображений имеет 2 недостатка:
Каждый раз, когда вы хотите изменить цвет заголовка, вам приходится открывать Photoshop и менять цвет там, а затем снова менять его в CSS.
Теперь вы хотите, чтобы цвет фона заголовка растягивался по всей странице, но что если вы хотите сделать это и с нижним колонтитулом?
Самым простым решением является следующее:
(вы не только создаете простой способ растянуть цвет по странице, имея возможность использовать разные цвета во всем содержимом заголовка и нижнего колонтитула, но и избавляете себя от проблемы двойного поля в IE (когда вы используете ширину и поле в одних и тех же элементах).
index.html:
<html>
<body id="body">
<div id="header">
<div class="container">
<!-- header's content here -->
</div><!-- .container -->
</div><!-- #header -->
<div id="content">
<div class="container">
<!-- main content here -->
<div id="footer">
<div class="container">
<!-- footer's content here -->
</div><!-- .container -->
</div><!-- #footer -->
</body>
</html>
style.css:
.container {
margin: 0 auto;
overflow: hidden;
padding: 0 15px;
width: 960px;
}
#header {
background: #EEE;
}
#content {
background-color: #F9F9F9;
}
#footer {
background-color: #333;
color: #BBB;
clear: both;
}
В этом примере div.container центрирует элементы, а также задает им ширину, и цвет фона может растягиваться по странице, потому что #header, #content и #footer не имеют ширины. И в будущем просто применяйте margin и padding к div'ам внутри .container, и вы избавите себя от множества проблем с IE в будущем.
Вы можете использовать фоновое изображение шириной 1 пиксель с заданным повторением фона по горизонтали.
background-image:url('paper.gif');
background-repeat:repeat-x;
А затем выровняйте контент по своему усмотрению.
Думаю, вы говорите о разнице ширины 100% / 80% ....
Это должно помочь вам начать работу:
<div id="header" style="width:100%; margin: 0px;">
<!-- header content -->
</div>
<div id="content" style="display: block; width: 80%; margin: 0px auto">
<!-- content -->
</div>
Маржа: auto в содержимом делает блок центрированным.
Лайке Адам говорит: добавьте повтор фона, чтобы придать ему графически приятный элемент.
В CSS 2 вы не можете растянуть фоновое изображение. Нет свойства для задания размеров фонового изображения. Вы можете просто повторить его по оси X, Y или по обеим осям.
CSS 3 позволит растягивать изображение.