Expanding CSS Buttons (Centering)

[jacjac]

Hi

I am trying to produce some expanding css buttons. This I have done successfully but I am unable to get the button to center within the TD underneath the image.

See www.barntheatre.co.uk/p7.html

If I take the LEFT FLOAT off, the button does center but also it expands to the full TD space available not to the amount of text in the button itself.

Any ideas?

Thanks

John

This is the set of styles for the Button itself


a.grey_button {
height: 20px;
margin-right: 6px;
padding-right: 20px; /* sliding doors padding */
text-decoration: none; background-attachment: scroll;
background-color: transparent;
background-image: url(../_images/grey_button.png);
background-repeat: no-repeat;
background-position: right top;
font-family: arial, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
font-variant: normal;
float: left;
display: block;
margin-bottom: 10px; }

a.grey_button:hover {
color: #FFFFFF;
background-position: right -20px;
font-weight: normal;
text-decoration: none; }

a.grey_button span {
display: block;
line-height: 10px;
background-image: url(../_images/grey_button_SPAN.png);
background-repeat: no-repeat;
padding-top: 4px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 18px;
color: #000000;
text-decoration: none; }

a.grey_button:hover span {
background-color: transparent;
background-repeat: no-repeat;
background-position: left -20px;
text-decoration: none;
color: #FFFFFF; }


John

[Nile]

Try giving it some more right margin.

[jacjac]

I guess I am being a bit thick here. How will increasing the right margin center all the buttons when the text length in the buttons will vary from button to button?

I just want to centre the button the TD? Any ideas

[rangana]

Have you tried adding a left margin in your grey_button class?


a.grey_button {
height: 20px;
margin-right: 6px;
padding-right: 20px; /* sliding doors padding */
text-decoration: none;
background-attachment: scroll;
background-color: transparent;
background-image: url(../index_files/grey_button.png);
background-repeat: no-repeat;
background-position: right top;
font-family: arial, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
font-variant: normal;
display: block;
margin-bottom: 6px;
float: left;
margin-top: 6px;
margin-left:30px;
}

[ThemeMagic]

Hello,

I too have tried to find a way to make those nice rounded oval sliding door buttons to truely center...


http://www.dynamicdrive.com/style/csslibrary/item/css_oval_buttons/P10/

It seems to be that somethings just won't center unless they have a set/defined width. Since these buttons don't have a width, which allows them to expand when filled with any lenth of text they work great for anything other than centering.

Some of you have suggested adding some margin on the left to give the buttons the illusion of being centered, but if they are used on a scaleable page, it's is very obvieous that they are not centered. Also... if each button has a different length you would have to set the margin differently for each. Setting a margin for each seems very un-CSS-ish ;-)

If I want 8 buttons in a row on a horizontal navigation bar, each of differnet lenghts I'm fine if they float left or right... but I can't center them. Sure I could set the width of each button, but then, since the text on each button i dynamically generated so everytime the page loads, the width will be too long or too short sometimes. I don't see how this technique will work with both dynamic size and centering.

If I want 5 buttons stacked up atop each other in the center of a page, each button a different lentgh and dynamiccally filled at page load time... I don't see how this technique will do that either.

If I want all my buttons left or right floated... then they are great.

Am I missing something? is there an easy way to get these buttons centered without resorting adding an arbitrary left margin to each button? a margin that is worthless on scaling pages or containers?

Thanks much in advance!

Bruce

[rangana]

Am I missing something? is there an easy way to get these buttons centered without resorting adding an arbitrary left margin to each button? a margin that is worthless on scaling pages or containers?

First, you should'nt hijack someone else's thread, but maybe this time it's fine, exactly the same problem :rolleyes:

...Anyways, an easy way is to put all your buttons in one division element, set a width, for instance 700px;...then use CSS centering:


#nameofdiv{margin:auto}


...You just have to note that you should have a proper DTD (http://alistapart.com/articles/doctype) to avoid your page in IE...going to quirksmode..

Hope that helps ;)