SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Header issue

  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Location
    Zele, Belgium
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Header issue

    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: header issue.png

    This is how other screen resolutions see it: Mira site as it should be.jpg
    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: Css Mira.txt

    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. #2
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,179
    Mentioned
    233 Post(s)
    Tagged
    1 Thread(s)
    Can you post the html code?

  3. #3
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,804
    Mentioned
    157 Post(s)
    Tagged
    3 Thread(s)
    @molona ; it's online.......
    http://mira-zele.be/
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  4. #4
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,179
    Mentioned
    233 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by spikeZ View Post
    @molona ; it's online.......
    http://mira-zele.be/
    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 maybe some paid holidays will help but since in my case that means that I have to pay them myself


    This particular problems is due to your rule
    Code:
    .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)
    Last edited by molona; Jan 31, 2013 at 06:06. Reason: trying to explain myself better

  5. #5
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,179
    Mentioned
    233 Post(s)
    Tagged
    1 Thread(s)
    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. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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:

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

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Location
    Zele, Belgium
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •