Оба этих веб-сайта имеют фоновый заголовок, растянутый по всей странице, в то время как контент расположен по центру и занимает, скажем, 80% ширины, и это также идеально согласуется с остальной частью макета.
Меня особенно интересуют эти два сайта, потому что заголовок имеет два цвета фона, а не один.
Я уверен, что в Интернете есть множество руководств, но я не знаю ключевых слов для поиска.
Анализ stumbleupon.com:
«Заголовок» на самом деле состоит из двух разделов: wrapperHeader и wrapperNav. Эти два имеют разные цвета фона. У этих div есть только один дочерний элемент, каждый из которых имеет свойство CSS.
margin: 0 auto
Это приводит к горизонтальному центрированию.
Это свойство также присваивается блоку содержимого, поэтому заголовок, навигация и содержимое всегда располагаются по центру. Конечно, это требует установки некоторой ширины для этих элементов.
Структура выглядит следующим образом:
<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, вы можете легко проанализировать элементы самостоятельно.
он background-image установлен в body со свойством background-repeat:
background-repeat: repeat-x;
подробнее: http://www.w3schools.com/css/pr_background-repeat.asp
Редактировать. Что касается выравнивания содержимого по центру, я делаю это следующим образом:
<body>
<div id="wrapper">
<!-- here is wrapper *everything* else -->
</div>
</body>
затем установите значение width оболочки (в основном 960px). Затем, когда вы устанавливаете для поля значение 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 не имеют ширины. А в будущем просто применяйте поля и отступы к элементам div внутри .container, и вы избавите себя от многих проблем с IE в будущем.
Я позволю себе не согласиться, есть простой способ сделать это. Совместим как с Google Chrome, так и с Firefox, IE не тестировался.
В вашем файле CSS:
body{
overflow-x:hidden;
}
div#headerbg{
width:110%;
margin-left:-20px;
background-color:black;
}
а теперь просто используйте его в своем HTML-файле. Вы можете добавить к этому позиционирование и что-то еще.
Вы можете использовать фоновое изображение шириной 1px с заданным повторением фона по горизонтали.
background-image:url('paper.gif');
background-repeat:repeat-x;
А затем выровняйте свой контент, как вам нравится.
Это просто макет с фиксированной шириной, но с автоматическими левыми и правыми полями. Результатом этого является центрирование всего блока контента, если размер страницы шире, чем ширина контента.
фон просто установлен как повторяющееся изображение (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>
Margin: auto на содержании делает блок центрированным.
Как говорит Адам, добавьте фоновый повтор, чтобы придать ему графически приятный элемент.
С CSS 2 вы не можете растянуть фоновое изображение. Нет свойства для установки размеров фонового изображения. Вы можете просто повторить это по осям X, Y или по обеим осям.
CSS 3 позволяет это растягивание.
Очень просто, без всякой суеты.
Вставьте это между - body - и - контейнером div - вы можете иметь там все, что захотите, но на моей странице это выглядит так: (я пытался заставить его обернуть, нет, просто скопируйте и вставьте.)
<body>
<div id="bv_ImageMap1" style="margin:0;padding:0;position:absolute;left:0px; top:187px;width:100%;height:5px;text-align:left;z-index:0;"> <img src="files/IMG_2.jpg" id="ImageMap1" alt="" usemap="#ImageMapImageMap0" border="0" style="width:100%; height:5px;">
<map name="ImageMapImageMap0">
</map>
</div>
<div container>
Затем измените необходимую информацию для верхней части:px высота:_px img src="yourfile/yourimg.jpg и ВАЖНО не забудьте следующую высоту:__px
Больше нигде ничего не нужно. Попытайся.
