Grow your CSS skills. Land your dream job.

Fixed + Centered Header

  • # April 23, 2010 at 9:30 am

    Hi all,

    I have a random layout issue — I’m still relatively new to web design and I’ve made way too much use of absolutely position layouts in the past and I’m trying to get away from it now. So here’s the situation:

    I have a header that is fixed to the top. It has a height of 200px and a width of 100%. On the left side I have an image that I want to stay stuck to the left. On the right side is a horizontal nav UL. I want the image to stay put, and I want the nav to be centered in the remaining space on the right, adjusting as the browser is resized. This seems simple to me, but for some reason I can’t get it to work as I want.

    HTML

    Code:
    MCN

    Below is a screen shot — you can see that the nav is not centered:

    [attachment=0]header.jpg[/attachment]

    Any help would be much appreciated!

    Mike

    # April 23, 2010 at 4:39 pm

    Posting the css and a link to the file would elicit more responses…. :shock:

    # April 23, 2010 at 5:26 pm

    Was hoping the description would be enough, all of my attempts failed miserably. Here’s one:

    http://www.mancallednoon.com/sandbox

    And here is the CSS I used (HTML is in the post above):

    Code:
    * { margin: 0; padding: 0; }

    html,body { background-image: url(“../images/back-canyons.jpg”); background-attachment: fixed;
    background-repeat: no-repeat; background-color: black; }

    /* Layout */

    div#mast { position: fixed; top: 0px; left: 0px; width: 100%; height: 200px;
    background-image: url(“../images/back-gradient.png”); background-attachment: fixed;
    background-repeat: repeat-x; }

    div#mast-left { float: left; width: 301px; height: 278px; }
    div#mast-right { position: absolute; top: 0px; padding-left: 301px; width: 100%; }

    #mast-nav { margin: 0 auto; width: 706px; height: 51px; list-style-type: none; }
    #mast-nav li { display: inline-block; padding-right: 5px; /* IE 7 */ zoom: 1; *display: inline;}

    That almost does what I want, but the centering is off by 301 pixels to the right because of the fixed image on the left.

    # April 23, 2010 at 7:10 pm

    Here is one way. Position fixed the nav. Give the nav a fixed width. Give it left 50% and a negative left margin equal to half the width of the nav. Then add back to the negative margin half the width of that left image.

    Or another way. Say the left image is 300px wide. Set the nav to left 300px and right 0 and give it text align center. That’s prob the easiest but won’t work in ie6. To work in ie6 you’ll need to use percentage widths instead. 20% 80% and give the left image a min-width. Which will also need an ie6 hack.

    # April 23, 2010 at 8:09 pm

    The problem with both of those is that as the browser width shrinks the nav begins to overlap the image. My goal is to have it stop shifting left as soon as it reaches the image.

    # April 23, 2010 at 8:40 pm

    It does uh? No it doesnt. Here is one of the ways I mentioned.

    Code:
    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



    # April 24, 2010 at 10:19 am

    Oops I stand corrected — I had left out a "px" after the left value of my ul, apologies!

    While that does work it has the unfortunate side effect of collapsing vertically as the window resizes. I know this is because there is no fixed width on the UL, and adding one takes the centering away entirely. Is there any work around for this?

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".