Странные белые пробелы и горизонтальная прокрутка

Question

Кажется, у меня проблема с дизайном, над которым я работаю. Я использую основную структуру HTML, но у меня есть пара проблем.

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

Во-вторых, я попытался наложить логотип на панель навигации с помощью z-index. Однако это вызывает отрицательную горизонтальную прокрутку. Я пытался скрыть это, скрывая overflow-x, но это не кажется лучшим решением.

Вы можете увидеть проблемы на http://jkr.me.uk/problem.html

Спасибо,

Джон

Answer 1

Использование позиции: относительно на логотипе занимает место, на которое вы ссылаетесь.

Вместо этого используйте float: right или поместите его с помощью position: absolute;

Answer 2

Проблема с белым зазором - изображение. Если вы отключите position:relative свойство нижней части изображения будет касаться верхнего поля тега заголовка кулака. Грязное исправление для этого было бы что-то вроде margin-top: -200px в первом заголовке или в качестве альтернативы margin-bottom: -200px на изображении логотипа. Вы также можете использовать метод из предыдущего ответа.

Что касается изображения логотипа, наложенного на панель навигации, оно подходит для меня как в Chrome, так и в IE 9.