I want to center and add a gradient

[Dgriff]

Hi
I added this nav bar (http://www.dynamicdrive.com/style/csslibrary/item/css_indent_menu/P10/) to my site (http://buildawebsite.ie/catalog) but I cant seem to center it (right and left no problem). Can I do this in my stylesheet?

Also, I want to add a different gradient to the images. Can I do this in the stylesheet?
Thanks

[BLiZZaRD]

Make your gradients name them the same as the ones currently used and upload them, overwriting the old ones. Or if you want to keep the old ones up on the server, name the new ones something else, and in your CSS, replace indentbg and indentbg2 with the name(s) of your gradients.

As for the centering, in your CSS find this:



.indentmenu ul{
margin: 0;
padding: 0;
float: left;
width: 100%; /*width of menu*/
border: 1px solid #564c66; /*dark purple border*/
border-width: 1px 0;
background: black url(images/indentbg.gif) center center repeat-x;
}


Remove the float:left; line and under the width:100%; line add:



margin-left: auto;
margin-right: auto;

[Dgriff]

Make your gradients name them the same as the ones currently used and upload them, overwriting the old ones. Or if you want to keep the old ones up on the server, name the new ones something else, and in your CSS, replace indentbg and indentbg2 with the name(s) of your gradients.

As for the centering, in your CSS find this:



.indentmenu ul{
margin: 0;
padding: 0;
float: left;
width: 100%; /*width of menu*/
border: 1px solid #564c66; /*dark purple border*/
border-width: 1px 0;
background: black url(images/indentbg.gif) center center repeat-x;
}


Remove the float:left; line and under the width:100%; line add:



margin-left: auto;
margin-right: auto;


I made the changes to the stylesheet but the nav bar is not centering for me. This (http://buildawebsite.ie/catalog/) is how it looks with the changes I made. I must have made a mistake even though I double checked the instruction. Any ideas? Thanks

[NickNameDrive]

If i'm correct your problem is simple here, you using a <table> you have two cell on top and one at the bottom, in that case you have to add collspan="2" to your bottom cell. Yet, why do you even need a second cell on top, which seems to create some empty space and the right after phone numbers.

Use <div> for your logo, then if you like <table> use it for your menu, and set <td> width in % (equally devided between number of elements if needed) through css and make table align="center"


Hope that helps!

[BLiZZaRD]

There is a float:left; I didn't see before in this line:



.indentmenu ul li a{
float: left;


Remove that. As for the gradients not appearing, it got me. Everything looks right. Try this:

instead of the line looking like this



background: black url(images/indentbg.png) center center repeat-x;


Make it look like this:



background: url(http://buildawebsite.ie/catalog/images/indentbg.png) black center center repeat-x;


Note the spacing removed, the "black" repositioned and the use of the full URI.

Do that for both and see what happens. I may need to test this locally if that doesn't work.

[Dgriff]

There is a float:left; I didn't see before in this line:



.indentmenu ul li a{
float: left;


Remove that. As for the gradients not appearing, it got me. Everything looks right. Try this:

instead of the line looking like this



background: black url(images/indentbg.png) center center repeat-x;


Make it look like this:



background: url(http://buildawebsite.ie/catalog/images/indentbg.png) black center center repeat-x;


Note the spacing removed, the "black" repositioned and the use of the full URI.

Do that for both and see what happens. I may need to test this locally if that doesn't work.

Hi
I got it centered but the gradients I had (which match the header) are not there any more. I'm assuming that the stylesheet does not recognize the images. How do I make the stylesheet recognise the images?
I appreciate your help on this.

[Dgriff]

I have managed to center my nav bar (http://buildawebsite.ie/catalog/). Just a couple of questions:

1. How do I make my buttons bigger from top to bottom? I want to make them taller.

2. When I put my cursor over a button (without clicking) it changes to the gradient I want but it (gradient change) does not go flush against the left border of the button. In fact these few pixels are not clickable. How do I make the clickable button go all the way over to the left border?

3. The About Us button looks like it is always pushed down...no matter what button you click. How do I fix this?

I appreciate your advice. Cheers.