Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12

Thread: <span> tag???

  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    73
    Thanks
    17
    Thanked 0 Times in 0 Posts

    <span> tag???

    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......

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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;
    }
    Attached Thumbnails Attached Thumbnails &lt;span&gt; tag???-screenhunter_05-sep.-25-20.20.jpg  
    Last edited by effpeetee; 09-25-2007 at 10:07 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    Quote Originally Posted by billvasko View Post
    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.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You need to set a width on the links after using display:block; or the whole thing won't be clickable in IE
    Code:
    display:block;
    width:240px;
    margin:auto;
    240 seems about good.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Aug 2007
    Posts
    73
    Thanks
    17
    Thanked 0 Times in 0 Posts
    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!!

  • #6
    Regular Coder PremiumBlend's Avatar
    Join Date
    Apr 2006
    Location
    Marion, Iowa
    Posts
    201
    Thanks
    0
    Thanked 13 Times in 13 Posts
    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:

    Code:
    .newClass {
     ...
    }
    and in the html,

    Code:
    <input type="submit" class="newClass btns" />
    Just use a space to separate classes when adding more than one.
    My Website: DumpsterDoggy

  • #7
    New Coder
    Join Date
    Aug 2007
    Posts
    73
    Thanks
    17
    Thanked 0 Times in 0 Posts


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

  • #8
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    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.

    Code:
    .box a {width: 25em}
    Gary

  • #9
    New Coder
    Join Date
    Aug 2007
    Posts
    73
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Gary, can you tell me exactly where I would add that in relation to the code that Frank and Aerospace suggested? Thanks!

  • #10
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    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:

    Code:
    <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:

    Code:
    <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:

    Code:
    .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

  • #11
    New Coder
    Join Date
    Aug 2007
    Posts
    73
    Thanks
    17
    Thanked 0 Times in 0 Posts
    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!
    Last edited by billvasko; 09-26-2007 at 02:07 PM.

  • #12
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Use this for .btns:

    Code:
    .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;
    }
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •