Prossitions properly

HTML & CSS
1

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

Hi,

You could just put the border on the top of the body instead.

e.g.



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

To center the logo and menu you could use inline-block instead of float.

e.g.


#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

oh yea, worked great! good job thanks!

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

5

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.