SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help finishing a layout

    Hi,

    I have a layout nearly finished however I am struggling to finish off the menu. What I am looking for is the menu bar to be the same width as the rest of the page and for the menu to be left alined with some form of divider between the menu options.

    I thought I was so close but this last little bit really has me stumped

    http://www.rlcoaching.co.uk/temp/

    Any help greatly appreciated

    Paul

  2. #2
    SitePoint Zealot sularome's Avatar
    Join Date
    Jan 2006
    Location
    Poland
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have seted the height to 10px which is respected by FF but no by IE. Change it to something like 20px and it should be ok. For the width problem... Why don't you add a background image for the body that will make you the green line?

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, the height of what?

    It was actually the width of the menu bar (The green bar under the header) that I am confused about, how do I set it to the same width as the header?

  4. #4
    SitePoint Zealot sularome's Avatar
    Join Date
    Jan 2006
    Location
    Poland
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    also for the width you will have to add #wrapper-menu here
    Code:
    #header, #menu,#wrapper-menu {
    	width: 760px;
    	margin: 0 auto;
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that, it has made the menu the correct width but it does not centre it!

    Take a look now

    http://www.rlcoaching.co.uk/temp2/

  6. #6
    SitePoint Zealot sularome's Avatar
    Join Date
    Jan 2006
    Location
    Poland
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well.. you have this:
    Code:
    #wrapper-menu {
    	background: #88ac0b url('images/menu-background.png') top left repeat-x;
    	float: left;
    	width: 100%;
    }
    make it
    Code:
    #wrapper-menu {
    	background: #88ac0b url('images/menu-background.png') top left repeat-x;
    }

  7. #7
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sularome
    You have seted the height to 10px which is respected by FF but no by IE. Change it to something like 20px and it should be ok. For the width problem... Why don't you add a background image for the body that will make you the green line?
    You don't need to make the height 20px.... You're correct that Internet Explorer won't make the height 10px if the base font-size for the page is larger than this. However, for this element if you set the font-size as 0; then this will correct this problem and allow you to apply the same heights as in Firefox.


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
  •