HTML: Block Element Stays Behind Other Elements

Question

This is my first time using the service, so I'll try to be specific.

I'm trying to create a land page for my domain, but when I place the logo for the top menu, and add another element, the element does not respect the space of the logo, and it stays in front of the logo.

Here's the CSS I'm using:

#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;
}

And here is an excerpt of the HTML I'm using:

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

Fairly simple.

EDIT: What I want is the logo to overflow the menu bar, and add the menu options to the right of the logo, still inside the .hwrap element. I used the logo with an <h1> element and placed the image as a background to avoid the image to be right-clicked and be saved.

But when I try to add the menu and the link to the logo, I notice that Google Chrome renders the page with the logo link for the full width of the .hwrap element, and adding anything else, makes the logo to stay behind the new elements.

Here's a link of the screen: http://img.fhtcentral.com/stack/screen001.png

I am using an HTML5 Reset stylesheet (found here) and I'm pulling the latest jQuery library from Google servers.

I've done this lots of times before, without any problems whatsoever, so I really don't know what am I doing wrong. I am sorry if this looks completely noobie question, but I just can't see the mistake.

Thank you for you time.

EDIT: The problem has been solved. The answer is right below. Thank you all for your elp :D

You could try position relative? – www139 Dec 12 '14 at 23:27 — www139, Dec 12 '14 at 23:27

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

The text appears above the logo, because you have set the logo image as a background. So html intends that you want, as the word says, the image as background!

To avoid this I guess you have set the display: block to your h1.menuLogo. The right way would be display: inline-block.

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

You can find a working fiddle right here.

The rest is about adjusting with margin and padding.

For further information about your problem you can read about the difference of block/inline-block here.

If you need other suggestions please let me know!

Best regards, Marian.

edited May 23 '17 at 11:57

Community

1
1

answered Dec 12 '14 at 23:36

Marian Rick

3,350
4
31
67

1

It doesn't seem to work. What I'm trying to do is to the logo overflow the manu bar, so that is why I subtracted 30px using the `margin-bottom`, so the element has a 40px height. The thing is that anything that I try to add right after the logo (still inside `.hwrap`) renders the text in front of the logo. Here's the fiddle of the code: http://jsfiddle.net/h5kumzqh/3/ – FHTgames Dec 12 '14 at 23:45
Wow! I could swear I tried `inline-block` before and didn't work either, so that is why I kept trying with `block` with no luck. It now works. Thank you very much for your help. Geez, so simple it makes me look like a n00b. XD – FHTgames Dec 13 '14 at 00:09
Also, I am sorry I cannot upvote your answer. The system says I don't have enough reputation to do so. :/ – FHTgames Dec 13 '14 at 00:29

score 0 · Answer 2 · answered Dec 13 '14 at 00:12

Hope this help you.

#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.

HTML: Block Element Stays Behind Other Elements

2 Answers2