Input Button too big, kill extra space L/R of it.

[gu102]

How can I make input buttons the same size in terms of L/R (Left / Right) margins? When a button is created "Submit" it's percect, nice and all of that... but when you make a button called "Submit This" there's a heck of a lot of space on the L/R.

Anyone with a solution is welcomed, Many thanks

 

[EdwardMartinIII]

In your CSS document, declare the following style:

input.StrudelButton
  {
    width: 130px;
  }

You'll have to adjust the pixel setting as you wish.

Then, in your HTML file, create your buttons thus:

<input type=&quot;button&quot; value=&quot;a&quot; class=&quot;StrudelButton&quot;></input>
<input type=&quot;button&quot; value=&quot;b&quot; class=&quot;StrudelButton&quot;></input>
<input type=&quot;button&quot; value=&quot;c&quot; class=&quot;StrudelButton&quot;></input>

Hope that helps!

Cheers,


Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

 

[gu102]

Thanks for the "input" no pun intended. Well that will solve the problem on one of them buttons.. but what about the others that are on other pages? I wanted a way where it will just apply a certain amount of space on the L/R of every button, even new ones I create..

I guess the quest continues, Many thanks for your suggestion tho.

http://www.guming.com

http://www.blueinkmedia.com

http://www.zexer.com

 

[EdwardMartinIII]

No problem. At the top of each document, in the header section, include this line:

  <link rel=&quot;stylesheet&quot; href=&quot;NameOfYourStyleSheet.css&quot; type=&quot;text/css&quot;></link>

where "NameOfYourStyleSheet.css" is, of course, the name of your external stylesheet.

Then, inside that document, for any button you like, just add the class call as described above and that button will conform to the class.

Stylesheets are designed to do this across entire sites.

How cool is that?!

Cheers,


Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

 

[clarkin]

in CSS a class is usally to be applied to a range of elements.. so you could have lots of buttons with class="StrudelButton".

If you want individual specific stylesheet for one button you can use id="uniqueID" too. Not sure what the advantages of this are over just using diff classes though

so in your .css:

[tt]
#button1
{
width : 130px;
}
#button2
{
width : 100px;
}
[/tt]

and in your .html:

[tt]
<input type=&quot;button&quot; value=&quot;a&quot; id=&quot;button1&quot; />
<input type=&quot;button&quot; value=&quot;b&quot; id=&quot;button2&quot; />
[/tt]

of course, classes probably make more sense so you can apply them to many buttons, but just so you know..