CSS H2 Alignment

Hey guys,

Looking for help aligning a h2 panel on my site.

The url is www.mysite.com

As you can see on the right hand side the H2 bg/panel is left aligned.

I am unsure what code to use or how to center align it.


I guess it goes in here?


#sidebar ul li h2{ background-image:url(images/sidebar-title.png); width:223px; height:33px; align:middle; background-repeat:no-repeat; font-size:14px; color:#fff; line-height:33px; text-align:center; font-weight:normal;}


Thanks

 

why don't you just make the background image the same width as the H2 heading itself?
The image is 212px wide and the H2 is 223px. So the H2 is just the way you want it, it is just the background image that is too short.

You can always align the background image with background-position: center top;
But it just looks really bad if the header is not as wide as the content box below. Just do the images a little wider, 223px.

 

Thanks for that


The reason for not expanding is because of the concept below.

[/IMG]

Have you any idea how to over lap the h2 bg onto the menu as in the concept?


Appreciate the help.

 

yeah:

for the H2...

position:relative;
z-index:10;
margin-bottom:-15px(or whatever suits you)

...and for the UL below you need padding-top to be 25-30px to match the overlap.

 

Thanks for that again

I have added the code now making it:

#sidebar ul li h2{ background-image:url(images/sidebar-title.png); width:223px; height:33px; background-position: center top; background-repeat:no-repeat; font-size:14px; color:#fff; line-height:33px; text-align:center; font-weight:normal; position:relative; z-index:10; margin: -15px;}


#sidebar ul li ul{ background-image:url(images/sidebarul-bg.png); background-repeat:repeat-y; border-bottom:1px solid #dddddd; padding:25px 0}


It seems to not be center aligned any more since doing that. Is there a a conflict between background-position: and position: relative?

 

no, you have set margin: -15px instead of margin-bottom: -15px;
You only want the minus margin on the bottom.

and for the ul, use padding-top unless you want 25px padding on the bottom of the box too.

 

Ah got it, tyvm.

One last question (hopefully).

There is a larger space at the bottom of the list in each category. I assume I have missed something I am supposed to change.

Again, ty

 

Yeah, it is your padding on the UL
change it to padding: 25px 0 0;
I wrote about this last post up

 

You are right, yet again.

Cheers dude for all the help.

 

no problem You can pay me when you get rich from your site