Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Junior Member moja man's Avatar
    Join Date
    Dec 2006
    Location
    Between Toronto and New York
    Posts
    13
    Member #
    14513
    I am trying to design some buttons for my site that look like the "register" and "take the tour" buttons that facebook has on their home page, www.facebook.com. (You can only see these buttons if you have not logged in) I have been trying to do it with MouseOver and MouseOut but it is not working out perfectly, particularly the linking of the entire cell. I would like to be able to link the entire cell and not just the text. Can anybody help? The code is below.

    <table cellpadding="0" cellspacing="0">
    <tr><td height="1" bgcolor="#000000" width="500"></td></tr>
    </table>
    <table cellpadding="0" cellspacing="0" bgcolor="#ffe1c5" onMouseOver="this.bgColor='#ff922f';" onMouseOut="this.bgColor='#ffe1c5';">
    <tr><td width="500">
    <a href="http://www.mojacity.com/apartments.aspx"><h4><font face="Tahoma" size="5">Apartments</font></h4><p>
    <font face="Tahoma">Search through 100's of Apartments for Rent</font></p></a>
    </td></tr>
    <tr><td height="3"></td></tr></table>
    <table cellpadding="0" cellspacing="0">
    <tr><td height="1" bgcolor="#000000" width="500"></td></tr>
    </table>

  2.  

  3. #2
    Senior Member -chris-'s Avatar
    Join Date
    Apr 2006
    Location
    SK
    Posts
    1,205
    Member #
    13102
    Those are simple CSS Buttons. They styled them in their CSS, then just added the text in their HTML. The code is listed below.

    Here is the CSS:
    Code:
    .welcome_buttons {
      display:block;
      padding:8px 0 0 68px;
    }
    
    .welcome_buttons a {
      float:left;
      display:block;
      width:200px;
      padding:5px;
      margin-bottom:5px;
      color:#666;
      background-color:#f7f7f7;
      margin-right:10px;
      border-top:1px solid #ccc;
      border-bottom:1px solid #ccc;
    }
    
    html #content .welcome_buttons a:hover {
      text-decoration:none;
      color:#333;
      background:#d8dfea;
      border-top:1px solid #3b5998;
      border-bottom:1px solid #3b5998;
    }
    
    .welcome_buttons a h4 {
      margin:0;
      padding:0 0 0 14px;
      font-size:13px;
      color:#333;
      background:transparent url(../images/sitetour/tour_arrow.gif) no-repeat 3px 2px;
      border: 0px;
    }
    
    .welcome_buttons a:hover h4 {
      color:#000;
    }
    
    .welcome_buttons a p {
      font-size:11px;
      margin:0;
      padding:3px 0 2px 14px;
    }
    
    .welcome_buttons a p span {
      display:block;
    }
    
    .under_login_tour {
      padding:3px 0 0 0;
    } 
    
    .under_login_tour a {
      width:112px;
      padding:3px 4px 4px 4px;
      margin:8px 0 0 0;
    }
    
    html #book .under_login_tour a:hover {
      text-decoration:none;
      color:#333;
      background:#d8dfea;
      border-top:1px solid #3b5998;
      border-bottom:1px solid #3b5998;
    }
    
    
    .under_login_tour a h4 {
      font-size:11px;
      padding:0 0 0 9px;
      background:transparent url(../images/sitetour/tour_arrow_micro.gif) no-repeat 2px 4px;
    }
    
    .under_login_tour a p {
      font-size:9px;
      padding:3px 0 0 9px;
    }
    
    .new_feature_tag {
        padding: 3px 0 0 6px; background: 
        url('/images/new_feature_tag.gif') no-repeat; 
        height: 14px; 
        float: left; 
        margin-right: 6px;
        width: 32px;
    }
    
    .new_feature_tag div {
        font-size: 9px;
        color: #fff;
    }
    
    .new_feature_tag_title {
        padding-top: 1px;
        margin-bottom: 3px;
        font-weight: bold;
    }
    Here is the HTML:
    HTML Code:
    <div class="welcome_buttons clearfix">
    <a class="tour_button" href="http://www.facebook.com/r.php">
    <h4>Register</h4>
    <p>Everyone can join.</p>
    </a>
    <a class="tour_button" href="http://www.facebook.com/sitetour/">
    <h4>Take the Tour</h4>
    <p>Learn about Facebook.</p>
    </a>
    </div>
    Portfolio | Blog | Twitter

    Was my post, or someone elses, helpful? Click the thumbs up to let everyone know!

  4. #3
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Holy mother of... I just looked at the code they're using. You should know they're not using tables... But they're nesting h4s and ps into a tags... AGH. Hurts my eyes. Anyway, yeah, they've got everything inside their a tag, which I'm guessing they think is `ok' because they've probably made it display: block, but they're dumbasses :-P

  5. #4
    Junior Member moja man's Avatar
    Join Date
    Dec 2006
    Location
    Between Toronto and New York
    Posts
    13
    Member #
    14513
    Chris,

    Thanks very much for your response. I created a style sheet with the css code and linked it into a sample site. Everything looks okay, except the mouseover is not working. I have looked at the javascript, but it does not look like it is in there. Any suggestions?

    Thanks and Best,
    Herbert

  6. #5
    Senior Member -chris-'s Avatar
    Join Date
    Apr 2006
    Location
    SK
    Posts
    1,205
    Member #
    13102
    Can you show me the link?
    Portfolio | Blog | Twitter

    Was my post, or someone elses, helpful? Click the thumbs up to let everyone know!

  7. #6
    Senior Member solidgold's Avatar
    Join Date
    Jun 2006
    Posts
    766
    Member #
    13373
    you could do it the cheat way, make an image that looks like the non mouseover link, then one that looks like the mousedover link, then just use a simple javascript mouseover link

  8. #7
    Senior Member -chris-'s Avatar
    Join Date
    Apr 2006
    Location
    SK
    Posts
    1,205
    Member #
    13102
    Quote Originally Posted by solidgold
    you could do it the cheat way, make an image that looks like the non mouseover link, then one that looks like the mousedover link, then just use a simple javascript mouseover link
    But why, when the CSS way is just as easy?
    Portfolio | Blog | Twitter

    Was my post, or someone elses, helpful? Click the thumbs up to let everyone know!

  9. #8
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Easier, I'd say, since it doesn't rely on Javascript being present and doesn't require any actual procedural programming knowledge. You're just shifting an image a little.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:19 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com