...

View Full Version : <span> tag???



billvasko
09-25-2007, 08:33 PM
I am new to CSS and I have some buttons on my web site that I believe were created using the <span> tag. The buttons vary in length depending upon the amount of text that appears in each. I would like to make all of the buttons uniform in length--as long as the longest button--regardless of the amount of text. How can I do this? Here is a link to the page I am referring to--the buttons are red and appear inside the blocks on the right side:

www.maxxtraining.com/stp.htm

Thank you......

effpeetee
09-25-2007, 09:25 PM
Try this out. The attachment will show a screenshot from my PC.

Frank



.btns a {
display:block;
background: left #CC0000 url(images/btn.gif) repeat-y;
border: 2px solid #E68282;
border-color: #E68282 #650000 #650000 #9C2828;
color: #fff;
font-weight: normal;
padding: 3px 15px 3px 20px;
position: relative;
}
.btns a:hover {
background-color: #EF1818;
color: #fff;
}

vtjustinb
09-25-2007, 10:43 PM
I am new to CSS and I have some buttons on my web site that I believe were created using the <span> tag. The buttons vary in length depending upon the amount of text that appears in each. I would like to make all of the buttons uniform in length--as long as the longest button--regardless of the amount of text. How can I do this? Here is a link to the page I am referring to--the buttons are red and appear inside the blocks on the right side:

www.maxxtraining.com/stp.htm

Thank you......

Doing what effpeetee mentioned would be a good way to accomplish this if you don't mind the buttons spanning the entire width of their container block.

Should you want them to be smaller you could just specify a designated width in the anchor class, but that could break if the user resizes the text and it becomes bigger than the button. In that case you'd want to use javascript to sniff out the largest width span and make that the width of all of the buttons, but that might be overkill.

It's really a compromise between being nice to people who resize their content and how complicated you want to make the logic to handle them.

_Aerospace_Eng_
09-25-2007, 11:43 PM
You need to set a width on the links after using display:block; or the whole thing won't be clickable in IE

display:block;
width:240px;
margin:auto;
240 seems about good.

billvasko
09-26-2007, 02:10 AM
Hey guys, thanks for your help! At first, I add no clue what the heck you were talking about. When I went to edit my page source file, I couldn't find any refernces that you were talking about. Luckily, I stumbled across CSS file in my editor and suddenly I realized why I never saw any CSS code in any other files!! Sorry, the transition from HTML is long overdue I guess!

Anyway, your suggestions worked perfectly except for one thing: now the red buttons that I've used on other areas of my site are also really long when I wanted to keep them short.

For example, here's the updated page I referenced earlier:

www.maxxtraining.com/stp.htm

And here's the main page of my site.

www.maxxtraining.com

I wanted to keep the "Enter Now" buttons short. Is there any way to distinguish the size of the buttons on different areas of my website?

Thanks again!!

PremiumBlend
09-26-2007, 02:13 AM
You can add more than one class to an element. If you're currently using .btns as the class, you can do the following for the new class:



.newClass {
...
}


and in the html,



<input type="submit" class="newClass btns" />


Just use a space to separate classes when adding more than one.

billvasko
09-26-2007, 02:25 AM
:confused:

Thanks Premium, but I have no idea where to add either of those. Sorry for being such a newb!

garydarling
09-26-2007, 02:27 AM
You can also specify ems as your unit of measurement so that when the user increases the text size, the box expands with it. It might overlap your margins that way, but will look better than wrapping or disappearing text.


.box a {width: 25em}

Gary

billvasko
09-26-2007, 02:30 AM
Gary, can you tell me exactly where I would add that in relation to the code that Frank and Aerospace suggested? Thanks!

garydarling
09-26-2007, 03:28 AM
On your main page, probably index.htm, your html for the nav buttons starts about midway down your page. Look for the html like this:


<div class="btns">

<a href="http://www.maxxtraining.com/collegetimeline.htm">
<span>Enter Now</span></a>



</div>

This is where you can add an additional 'class' to the existing div class. Add this exactly as shown:


<div class="newClass btns">

<a href="http://www.maxxtraining.com/collegetimeline.htm">
<span>Enter Now</span></a>



</div>

Now look for similar html nearby that has the same "btns" class and add the "newClass" similarly. By the way, the term "newClass" is an example, you can call it anything that means something to you.

Next you need to open the file called style.css and add the new class you just created. Go to the bottom of the document and add this:


.newClass {
display:block;
width:50px; //(you can also use em instead of px so the box expands when the text it contains expands)
margin:auto;
}

Save your work and play with the width until you get it just how you like it.

Gary

billvasko
09-26-2007, 02:05 PM
Gary, I added the code that you recommended, but now the buttons extend beyond the margins of the boxes and I can't get them to shorten even when I change the width. Any ideas? www.maxxtraining.com

Thanks!

ahallicks
09-26-2007, 05:03 PM
Use this for .btns:


.btns a {
display:block;
width:140px;
margin:auto;
background: left #CC0000 url(images/btn.gif) repeat-y;
border: 2px solid #E68282;
border-color: #E68282 #650000 #650000 #9C2828;
color: #fff;
font-weight: normal;
padding: 3px 15px 3px 20px;
position: relative;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum