SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    prossitions properly

    I've just placed my content into a boxed wrapper but it was previously full width. Only thing is I have a purple border at the top of the header that I want to be full width, how do I achieve this?

    Also I'm having problems centering my menu and logo how is this properly done?

    here is the home page: http://79.170.40.244/healthmeanswealth.co.uk/

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Quote Originally Posted by hantaah View Post
    I've just placed my content into a boxed wrapper but it was previously full width. Only thing is I have a purple border at the top of the header that I want to be full width, how do I achieve this?]
    You could just put the border on the top of the body instead.

    e.g.
    Code:
    body{border-top: 4px solid #BD4DAF}
    .header-v2{border-top:none}

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    To center the logo and menu you could use inline-block instead of float.

    e.g.
    Code:
    #header .logo{
    margin:31px auto 0!important;
    text-align:center;
    float:none;
    }
    #header .logo a{
    display:inline-block;
    *display:inline;
    zoom:1.0;
    vertical-align:top;
    }
    
    #nav-uber{
    text-align:center;
    float:none;
    }
    
    #nav-uber #megaMenu {
    float:none;
    display:inline-block;
    *display:inline;
    zoom:1.0;
    vertical-align:top;
    }

  4. #4
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    oh yea, worked great! good job thanks!

    I've never seen the zoom before, what's that for?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by hantaah View Post
    I've never seen the zoom before, what's that for?
    Zoom is a proprietary IE property (webkit also supports it now) that will allow use to zoom a layout's size up or down with zoom:1.0 meaning no resize at all. However, it is rarely ever used to zoom a layout as such but is mainly used to induce what is called "haslayout" in IE6 and 7 without causing any other unwanted size effects.

    It is used in the above code in conjunction with another hack (*display:inline) in order to make display-inline-block work for block elements in ie6 and 7. Natively ie6 and 7 only understand inline-block on inline elements but coincidentally any inline element that is in haslayout mode will act the same as if it were inline-block which the code above achieves.


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
  •