CSS Indent Menu -- Centered Links?

[Jinglebelle]

1) Script Title: CSS Indent Menu

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...s_indent_menu/

3) Describe problem: Is there any way center the links?

Thanks

[keithwjones]

I'm working on this now but having problems:

Add: text-align:center;

.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
text-align:center;
}

Then remove float: left; from next section.

Only problem works fine in IE but as soon as you remove float: left; Firefox does not show the images anymore. Have not worked out how to solve.

That will give 80% width - trying to get 100% but that causes more problems.

Anyone got full answer of how to get 100% width and centred.

Keith

[Jinglebelle]

Thanks Keith! It's centered, but it sure does look awful in FF. My images work fine with FF after removing float: left; but they are not proportioned evenly to each other. Is there a way to adjust the height of the menu?

Or, maybe I should try resizing the 'current' tab bkg?

[Jinglebelle]

Anyone got full answer of how to get 100% width and centred.

Keith

BTW-- after I added the text-align: center; I took the float: left; out of both sections --

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


.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid #564c66; /*dark purple divider between menu items*/
}


And it is centered at 100%

Monica

[keithwjones]

Yes mine centers at 100% but height of tab decreases and look closer there is a gap at the left of each tab on mouseover.

I believe you can change height with height: and width:6em; 6 times current font

Have not got final solution yet.

Keith

[Jinglebelle]

Oh, I see what you mean... Yeah I'm seeing the gap between the tabs on mouseover too.

I added height: 25px; and adjusted the menu height.

Monica

[keithwjones]

To get right height:

.indentmenu ul li a{
display: inline-block;
color: #666666; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid #564c66; /*dark purple divider between menu items*/
}

Only gap on left to sort now.

Keith

[Jinglebelle]

Thanks Keith, I appreciate all your help. I think I have mine just right. I sure hope you can figure out the gap problem. I took the borders out of mine.

[keithwjones]

With this code it now works in Firefox as well as IE:

/*Menu Code Starts */


/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.indentmenu{
font: bold 13px Arial;

width: 100%; /*leave this value as is in most cases*/
text-align:center;
}

.indentmenu ul{
border-left:1px solid #564c66; border-right:1px solid #564c66; border-top:1px solid #564c66; border-bottom:1px solid #564c66; margin:0; padding:0; float: left;
height: 15px;
padding: 5px 11px;

width: 100%; /*width of menu*/
/*dark purple border*/
background: black url('images/indentbg.gif') repeat-x center;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
color: #666666; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid #564c66; /*dark purple divider between menu items*/
}

.indentmenu ul li a:visited{
color: #666666;
}

.indentmenu ul li a:hover, .indentmenu ul li .current{
color: white !important; /*text color of selected and active item*/
padding-top: 6px; /*shift text down 1px for selected and active item*/
padding-bottom: 4px; /*shift text down 1px for selected and active item*/
background: black url('images/indentbg2.gif') repeat-x center;
}


/*Menu Code Ends */

But there is still a gap on the left on mouseover where the image has not inverted. Anyone got the answer to that. Same in both FF and IE

Keith