CODEWITHSUNDEEP
htmlcss
FHTgames
FHTgames

Reputation: 3

HTML: Block Element Stays Behind Other Elements

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

Upvotes: 0

Views: 2897

Answers (2)

Rehman Khan
Rehman Khan

Reputation: 3

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.

Upvotes: 0

Marian Rick
Marian Rick

Reputation: 3430

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.

Upvotes: 1

Related Questions