HTML: Элемент блокировки элементов за другими элементами

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

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

Вот CSS я использую:

#header { 
    width: 100%; 
    padding: 5px 0; 
    background: #b20000; 
} 
#header .hwrap { 
    display: block; 
    width: 980px; 
    height: 40px; 
    margin: 0 auto; 
} 
#header .menuLogo { 
    display: block; 
    width: 205px; 
    height: 70px; 
    background: url(menu_logo-70px.png); 
    text-indent: -9999px; 
    margin-bottom: -30px; 
}

А вот отрывок из HTML, я использую:

<body> 
<div id="header"> 
<div class="hwrap"><a href="http://fhtgames.com/"><h1 class="menuLogo">fhtgames.com</h1></a>Random text</div> 
</div> 
</body>

довольно просто.

EDIT: То, что я хочу, это логотип переполнения строки меню, а также добавить пункты меню справа от логотипа, до сих пор внутри .hwrap элемента. Я использовал логотип с элементом <h1> и поместил изображение в качестве фона, чтобы избежать изображения с правого щелчка и быть сохраненным.

Но когда я пытаюсь добавить меню и ссылку на логотип, я заметил, что Google Chrome отображает страницу со ссылкой логотипа на всю ширину .hwrap элемента, и добавляя что-нибудь еще, делает логотип чтобы остаться за новыми элементами.

Вот ссылка экрана: http://img.fhtcentral.com/stack/screen001.png

Я использую HTML5 Reset таблицы стилей (найденный here), и я тяну последнюю библиотеку JQuery с серверов Google.

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

Благодарим вас за время.

EDIT: Проблема была решена. Ответ приведен ниже. Спасибо всем за ваш elp: D

источник

2014-12-12 FHTgames

Вы могли бы попытаться установить положение относительно? – www139

Текст появляется над логотипом, потому что вы установили образ логотипа в качестве фона. Поэтому html намерен, что вы хотите, как говорится в слове, изображение в качестве фона!

Чтобы избежать этого, я думаю, вы установили display: block на ваш h1.menuLogo. Правильный путь будет отображаться: inline-block.

#header .menuLogo { 
    display: inline-block; 
    width: 205px; 
    height: 70px; 
    background: url(menu_logo-70px.png); 
    text-indent: -9999px; 
    margin-bottom: -30px; 
}

working fiddle right here.

Остальное касается корректировки с запасом и отступлением.

Для получения дополнительной информации о вашей проблеме вы можете прочитать о the difference of block/inline-block here.

Если вам нужны другие предложения, пожалуйста, дайте мне знать!

С уважением, Мариан.

источник

2014-12-12 23:36:38

Это не работает. То, что я пытаюсь сделать, - это переполнение логотипа ману-баром, поэтому я вычитал 30px, используя «margin-bottom», поэтому элемент имеет высоту 40 пикселей. Дело в том, что все, что я пытаюсь добавить сразу после логотипа (все еще внутри '.wwrap'), передает текст перед логотипом. Вот скрипка кода: http://jsfiddle.net/h5kumzqh/3/ – FHTgames

Вау! Я мог бы поклясться, что раньше делал «inline-block» и не работал, поэтому я все время пытался «блокировать» без везения. Теперь он работает. Большое спасибо за Вашу помощь. Geez, так просто, что заставляет меня выглядеть как n00b. XD – FHTgames

Кроме того, я сожалею, что не могу поддержать ваш ответ. Система говорит, что у меня недостаточно репутации, чтобы сделать это. : / – FHTgames

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

#header { 
width: 100%; 
padding: 5px 0; 
background: #b20000; 
overflow:hidden; 
position:relative; 
} 

#header .hwrap { 
display: block; 
width: 980px; 
margin: 0 auto; 
color:#fff; 
} 

#header .menuLogo { 
display: block; 
width: 205px; 
height: 70px; 
background: url('http://jsfiddle.net/img/logo.png') no-repeat rgb(249, 153, 5); 
text-indent: -9999px; 
overflow: hidden; 
line-height: 1; 
margin: 0; 
padding: 0; 
}

JSFiddle Link.

источник

2014-12-13 00:12:57

HTML: Элемент блокировки элементов за другими элементами

ответ

Смежные вопросы