Создание простого заголовка для веб-сайта - почему я не могу заставить IMG плавать полностью правильно?

Question

Я делаю очень простой блог для своего проекта PHP, но у меня возникла простая проблема.Я не могу заставить изображение для моего заголовка плавать полностью правильно.У меня есть баннер с текстом слева, у меня есть срез размером 1 пиксель, повторяющийся по ширине любого разрешения, которое может быть выбрано (при условии, что баннер заполняет любой экран).Я хотел бы, чтобы изображение всегда отображалось по правому краю экрана, опять же, независимо от разрешения экрана.Но это входит в фиксированную позицию.Вот что я написал:

HTML:

<div id="header">
    <img src="images/banner.jpg" alt="banner" title="Prairie"/>
    <img class="right_image" src="images/banner_right_image.jpg" alt="elavator" title="prairie elevator"/>
</div>

CSS:

#header {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 120px;
    background: url(images/banner_right.jpg) repeat-x;
    z-index: 1;
}
#header.right_image {
    float: right;
    position: fixed;
    top: 0px;
    z-index: 1;
}

В чем здесь проблема?

Спасибо за любыевход.

Answer 1

Вы должны отделить #header.right_image так, чтобы оно было #header .right_image

Также удалить position: fixed из #header.right_image

Это работает:

#header .right_image {
    float: right;
}

Пример: http://jsfiddle.net/FTBWU/

Answer 2

Я не знаю, насколько хорошо работает поплавок с фиксированным элементом. Может быть, попробовать что-то подобное для вашего изображения?

#header .right_image {
    right: 0px;
    position: fixed;
    top: 0px;
    z-index: 1;
}

Answer 3

Ссылка на ваш сайт поможет!

Я всегда бросаю вверху заголовка:

 * { margin:0; padding:0}

Возможно, к вашим html-тегам или тегам body по умолчанию применяются отступы или поля в зависимости от того, какой браузер вы используете. Попробуйте - и есть ли URL, по которому я вижу все это?