Центрируйте изображение заголовка независимо от размера страницы - PullRequest
Новая
       24

Центрируйте изображение заголовка независимо от размера страницы

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

На моей веб-странице есть изображение заголовка, которое всегда остается в верхней части окна.Когда окно развернуто до максимума, изображение заголовка центрируется, но при просмотре в небольшом окне (или браузере смартфона) заголовок устанавливается слева от окна, а правая сторона обрезается.Поскольку div заголовка шире, чем содержимое страницы, горизонтальная полоса прокрутки появляется, когда окно меньше заголовка, а не страницы.

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

Это изображение может объяснить это более четко:

image http://postimage.org/image/49ne3k3o/

Пока мой код:

CSS: 

#headerwrap {
    position: relative;
    width: 998px;
    height: 100px;
    margin: 0 auto;
    pointer-events: none;
}
#header{
    position: fixed;
    top: 0;
    width: 998px;
    margin: 0;
    background: url('../images/top.png') no-repeat;
    height:100px;
    z-index: 1;
    pointer-events: none;
}

и реализация HTML: 

<div id="headerwrap"\>
<div id="header">
</div>
</div>

(ширина страницы 690 пикселей, заголовок 998 пикселей)

Любая помощь будет высоко ценится.

Ответы [ 4 ]

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

Вам необходимо установить left: 50% в элементе заголовка, который имеет position: fixed, а затем применить отрицательное поле, равное половине ширины этого элемента, чтобы отцентрировать его. 

#header {
  height: 100px;
  width: 998px;
  position: fixed;
  top: 0;
  left: 50%;
  margin-left: -499px;
  background: url('../images/top.png') no-repeat;
}

Вот быстрая скрипка: http://jsfiddle.net/blineberry/w8P2S/

Тебе не нужна обертка для этого.

3 голосов
/ 01 ноября 2012

Вам нужен отрицательный запас слева, как говорит Брент, но этот запас будет варьироваться в зависимости от разрешения браузера пользователя и может стать проблемой, если пользователь изменит размер браузера.

Чтобы выяснить это поле, я использовал простой метод jquery, который работает каждый раз как шарм: 

jQuery(window).resize(function() {
  var width = jQuery(document).width();
  var margin = (yourImageWidth-width)/-2;
  jQuery('.yourCssClassForYourHeader').css('margin-left', (margin)+'px');
});

Эта функция должна вызываться для документа, готового в первый раз, а затемон вызывается каждый раз, когда пользователь изменяет размер браузера.

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

Другой вариант - удалить свойство background из заголовка # div и поместить его в # headerwrap примерно так:

РЕДАКТИРОВАТЬ:

Я добавил комментарии, чтобы помочь объяснить последствия изменений в CSS.

РЕДАКТИРОВАТЬ @ Ответ Брента:

Ответ Брента также хорош, ноэто поднимает вопрос о том, где находится содержимое.http://jsfiddle.net/MarbleStrain/FdL44/ Обратите внимание, что Test div невидим, если окно недостаточно велико.Я не хочу отклонять ответ Брента или что-то еще, поскольку его ответ одинаково действителен в зависимости от того, какой поток вы хотите.Я просто хочу указать на разницу между этими двумя результатами. 

#headerwrap {
    background: url('../images/top.png') no-repeat fixed center 0; /*this will put the image at the top-middle of this div*/
    width: 100%; /*this sets this div to whatever size the window is, which helps with removing the horizontal scrollbar*/
    height: 100px;
    text-align: center; /*this will move any child elements to the center (specifically for ie)*/
    pointer-events: none;
    overflow: hidden; /*this hides any child elements that are outside the range of this element*/
}
#header{
    width: 998px;
    margin: 0 auto; /*center header for all browsers except ie*/
    height:100px;
    z-index: 1;
    pointer-events: none;
    text-align: left; /*makes sure that contents are lined up to the left (otherwise inherited from the parent which is center)*/
}

Я также изменил некоторые стили, чтобы сделать все по центру браузера.И чтобы не показывать горизонтальную полосу прокрутки, вы устанавливаете свойство # headerwrap overflow на hidden .

Это должно решить обеваши проблемы.

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

Было бы приемлемо, чтобы заголовок сжимался до размера окна? Кроме того, вам нужно, чтобы это было чисто HTML / CSS решение?

редактирование:

Вот небольшой скрипт, который я только что написал, который изменит размеры обоих div'ов до размера окна браузера. Не требует никаких библиотек (например, jQuery). 

<script type="text/javascript">
var clientWidth = document.documentElement.clientWidth;

document.getElementById('headerwrap').style.width = clientWidth + "px";
document.getElementById('header').style.width = clientWidth + "px";
</script>

Или, если вам нужен разрыв с обеих сторон, вы можете сделать что-то вроде: 

var padding = 50;
document.getElementById('header').style.width = (clientWidth - (padding * 2)) + "px";
document.getElementById('header').style.left = padding + "px";

Итак, в итоге: 

<script type="text/javascript">    
    var clientWidth = document.documentElement.clientWidth;
    document.getElementById('headerwrap').style.width = clientWidth + "px";

    var padding = 50;
    document.getElementById('header').style.width = (clientWidth - (padding * 2)) + "px";
    document.getElementById('header').style.left = padding + "px";
</script>

Кроме того, измените оболочку на position: absolute; top: 0px и внутренний div на position: absolute; top: 0px;

Надеюсь, это поможет! 

Also, you have a forward slash in your wrapper div that needs to go :)
...