Растягиваемый заголовок, такой как StackExchange - PullRequest
Новая
       15

Растягиваемый заголовок, такой как StackExchange

3 голосов
/ 25 июня 2011

Как сделать с помощью CSS макет сайта, такой как webmaster.stackexchange.com , что сайт находится в центре, а верхний и нижний колонтитулы равны разрешению окна пользователя, в то время как контент находится в центреПроверьте изображение, потому что вы не понимаете меня и СПАСИБО :-) за вашу помощь.

http://imageshack.us/photo/my-images/600/strectch.jpg/

Ответы [ 4 ]

1 голос
/ 25 июня 2011

Просто создайте изображение размером 1x200 (тощий и высокий), содержащее градиент, и используйте этот CSS: 

#header-bg {
    background: blue url(/my/stretchy/image.png) repeat-x top left;
    text-align: center;
}

#header-content {
    width: 800px;
    margin: 0 auto;
    text-align: left;
}

<div id="header-bg">
    <div id="header-content">blah blah</div>
</div>

Вы просто должны положить его горизонтально.

1 голос
/ 25 июня 2011 
<div id="topBar">My Epic Top Bar</div>
<div id="page">
       All your lovely page junk goes here
</div>
html, body 
{
    margin:0;
    padding:0;
}
#page 
{
 margin: 0 auto;
  width:500px;  
    margin-top:40px;
    background-color:blue;
}
#topBar {
 width:100%;
  height:40px;
   background-color:#ccc;
   position:absolute;
   top:0;
   left:0; 
}

margin: 0 auto на #page устанавливает верхнее / нижнее поле равным 0, а левое / правое поле автоматически, центрируя его, поскольку он имеет фиксированную ширину 500 пикселей. Имейте в виду, что вы должны держать верхнее поле равным высоте #topBar, чтобы #topBar не закрывал ни одну из страниц # page

1 голос
/ 25 июня 2011

Щелкните правой кнопкой мыши и посмотрите источник - никто не запрещает вам это.

Но вкратце - один из возможных способов (может быть, не самый лучший) - это сделает контент по центру:

HTML 

<body>
<div id="page-wrapper">
<div id="page-body">
    <div id="header" class="clearfix">
    ...

CSS 

#page-wrapper {width: 980px; margin: 0 auto; text-align: left;}
#page-body {position: absolute; width: 980px; top: 0;}

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

0 голосов
/ 25 июня 2011

Как и было упомянуто, наиболее согласованно для всех браузеров: оберните содержимое заголовка с фиксированной шириной автоматически упаковщиком ширины.

В браузерах, которые его поддерживают, вы можете использовать: before и: after для получения заголовка полной ширины без дополнительного div: http://css -tricks.com / 9443-full-browser-width-bars /

...