Логотип перемещается повсюду при изменении размера окна

Question

Хорошо, у меня проблема с веб-сайтом, над которым я работаю .. на самом деле, у меня много этой проблемы, и я никогда не обращался за помощью, думаю, пришло время. Вот мой CSS:

    header {
    background: #EEEEEE;
    height: 50px;
    }
    .logo {
    background: url(logo.png);
    width: 200px;
    height: 40px;
    margin: 0 280px;
    }

Когда я изменяю размер своего окна, логотип в заголовке будет изменяться вправо при изменении размера окна. Я пробовал положение абсолютное, относительное и т. Д., Но оно делает то же самое. Есть идеи, пожалуйста, ребята?

Вот мой HTML:

<header>

<div class="logo"></div>

</header>

Вот ссылки на картинки, представляющие проблему:

Здесь все работает идеально, все выровнено:

FullSizedWindow http://dl.dropbox.com/u/6212750/Full%20Sized%20Window.png

и

Здесь все начинает идти повсюду:

WhenWindowIsRised http://dl.dropbox.com/u/6212750/When%20window%20is%20resized.png

Есть идеи? Пожалуйста

Answer 1

Установить ширину элемента заголовка.По умолчанию используется значение width: auto;, которое охватывает 100% окна браузера.Таким образом, при изменении размера окна ширина элемента заголовка также изменяется, перемещая содержимое.

Обновление 1

Вы используете поле дляРасположите логотип в 280px с левой стороны окна браузера, чтобы при изменении ширины окна ваш логотип тоже двигался - логотип «толкался».То, что вы хотите сделать, это обернуть все в контейнер контейнера и установить интервал между полями относительно этого, а не окна браузера.

HTML

<div id="container">
    <header>

    <div class="logo"></div>

    </header>
</div>

CSS

#container {
    width: 400px;
    margin: 0 auto;
}
header {     
    background: #EEEEEE;    
} 
.logo {     
    background: url(http://i.imgur.com/4hs7p.png) no-repeat top left;    
    width: 200px;     
    height: 198px;     
    margin: 0;    
}

скрипка : http://jsfiddle.net/alpacalips/ybe9d/2/

Answer 2

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