Header issue

HTML & CSS
1

Hello Sitepoint!

I made this site about a year ago with some help from the Sitepoint users (ip Stomme Poes). The site looks great, allthough there were some issues getting it good crossbrowser. I’m working on a laptop 15" with screen res 1600x900, the site looks absolutely fine on ie, safari, chrome and firefox. I get however remarks from other people saying the header isn’t ideal and gives a big whitespace between logo and horizontal menu. I tested it with browsershots, and indeed on other resolutions there seems to be a header issue. When the site is windowed, I’m having the same issue.

Can you guys help me out how to fix this, so the entire header doesn’t confuse my site? The problem is not crossbrowser, because every browser displays the same, it’s more a resolution and screensize problem.
In attachment is how it should be like on my laptop:

This is how other screen resolutions see it:
As you notice the logo and menu aren’t next to eachother because there is no space. I think the best is to reduce the whitespace between logo and the menu, the css is as following now:
.container .horizontalMenu {
float: right;
display:block;
margin-top:200px;
}

#logo {
float: left;
width:300px;
}
#logo img {
display: block;
height:auto;}

ofcourse the margin-top 200px makes sure the horizontal menu is nicely wrapped just above the container and next to the bottom of the logo. With different screen resolutions it seems like he puts the horiz menu 200px under the logo instead of 200px from the top of the page. Can we fix this in any way? Here is the entire css:

Also, you do notice the shadows I have in my screenshot, however the shadows aren’t displayed in other browser or older versions of the same browser. It works on all my browsers, but I have the latest versions. No options there I guess but having latest versions?

Thanks a lot in advance!

Kind regards
Maxx-iT

2

Can you post the html code?

3

@molona; it’s online… :smiley:

4
Off Topic:

I thought it was online but I must be losing my touch because I didn’t see any reference to the address anywhere :shifty: maybe some paid holidays will help but since in my case that means that I have to pay them myself :lol:

This particular problems is due to your rule

.container .horizontalMenu { margin-top: 200px }

Why is it happening? Because, as you say, you’re working and using a big monitor and with a resolution of 1600 x 900. You think that the menu should stay on the right side of the logo but when there’s no enough room it falls under it and because it has 200px of top-margin, it creates that wide white space.

I have various monitors and right now I’m using a 17" with a resolution of 1280 x 1024… and still the menu doesn’t have enough room to stay on the right without colliding with the logo… so it falls under the logo.

One thing that you can do is to change the width of your links (15em at the moment) and be as consistent with your measures as you can be. Normally I would simply add a bit of more room around the links controlling the padding to the A element but I don’t set a width for them.

With being consistant with your measures I mean that mixing fixed units (px) with fleixible units (% or ems) can be tricky and it is by far easier to go all the way fixed or fluid (or semi-fluid, controlling just vertical or horizontal)

5

BTW, if I wasn’t clear enough, just delete the 15em width of your li’s in the menu and your problems with be gone

6

Hi,

If you don’t want to change the width of your nav links (as Molona suggest above) then you can circumvent the problem by doing this instead:


#header{padding-top:200px;}
#logo{margin-top:-200px;}
.container .horizontalMenu{margin-top:0}

The header has 200px top padding instead of the margin-top 200px you had on the nav. The logo instead is dragged up 200px to the top of the header. Now when the screen is narrow the nav will just slide below the header because it has no top margin and will slide neatly into place.:slight_smile:

7

Thanks heaps guys!! Will try both suggestions and see what will be best after some time!

I get stuck sometimes, because I don’t know what is best to do: %'s, ems, px… Especially with my basic structure. I know %s will adapt better crossbrowser and to different resolutions, but it sometimes mixes things up a bit if you aren’t carefull when positioning.

Kind regards and thanks again!

Maxx-iT