SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)

    style links like Office 2003 toolbar

    Are there any templates out there for styling a set of links for a sidebar to look like the mouseover effect found on the office 2003 toolbar?

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    The type of effect you see on mouseover in Office 2003 is highly dependent on the Windows theme you're using, so you might want to elaborate a little more or put up a screenshot

    If you're talking about what I think you're talking about, then it's just a matter of adding a 1px solid border and a background image of a gradient to your a:hover CSS rules.

  3. #3
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Ok, I'm trying to reproduce this mouseover effect:

    http://img337.imageshack.us/img337/5...titled14do.jpg

    Here's what I've been able to come up with. It doesn't look pretty *cringe*

    Basically, what I'm trying to do is have the background mouseover color color the entire table cell with a colored border surrounding it. tried using divs first, but that didn't seem to work either.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    
    <style type="text/css">
    * { margin:0; padding:0; scrollbar-face-color: #46468E;b }/* re-set everything to zero including body*/
    body { background-color: #00416B; font-family: Arial, Helvetica, sans-serif; font-size: 100.01%; margin: 0px 0px 0px 3px; }
    h1, h2, h3, h4, h5, ul, p {margin-bottom: 1em; }
    ul{ margin-left: 16px; }/* space for bullet*/
    table { width: 100%; }
    
    #header { }
    #linkbuttons { width: 244px; background-image: url(slices1/images/template_06.jpg); background-repeat: no-repeat; }
    #content { background-image: url(slices1/images/template_08.jpg); background-repeat: no-repeat; }
    #footer { height: 143px; }
    
    .border-t, #header, #footer { border-top: 3px solid #000000; }
    .border-b, #header, #footer { border-bottom: 3px solid #000000; }
    .border-l, #header, #linkbuttons, #footer { border-left: 3px solid #000000; }
    .border-r, #header, #linkbuttons, #content, #footer { border-right: 3px solid #000000; }
    
    .sidelinks { font-size: 20px; text-align: center; background: none;  }
    .sidelinks a:link, .sidelinks a:visited, .sidelinks a:active { color: #FFFFFF; text-decoration: none; }
    .sidelinks a:hover{ text-decoration: none; background-color: #33FFFF; border: 2px solid #0066FF; }
    
    #sidelinktable { }
    #allsidelinks { margin: 0px 17px 0px 12px; }
    
    
    
    
    </style>
    
    </head>
    
    <body>
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td id="header">&nbsp;</td>
      </tr>
      <tr>
        <td id="body"><table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td id="linkbuttons"><div id="allsidelinks">
    	
    	<table id="sidelinktable" border="0" cellpadding="0" cellspacing="10">
      <tr>
        <td  id="sidelink1" class="sidelinks"><a href="#">link1</a></td>
      </tr>
        <tr>
        <td  id="sidelink2" class="sidelinks"><a href="#">link1</a></td>
      </tr>
      <tr>
        <td  id="sidelink3" class="sidelinks"><a href="#">linky linky link linkage link</a></td>
      </tr>
      <tr>
        <td  id="sidelink4" class="sidelinks"><a href="#">liiiiinklink linky liink</a></td>
      </tr>
      <tr>
        <td  id="sidelink5" class="sidelinks"><a href="#">linky link</a></td>
      </tr>
    </table>
    
    	
    	
    	  
    	  </div>
    	  
    	  </td>
        <td id="content"><p>&nbsp;</p>
          <p>&nbsp;</p>
          </td>
      </tr>
    </table>
    </td>
      </tr>
      <tr>
        <td id="footer">&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>

  4. #4
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Alright, I managed to get something much closer to what I wanted using bullets.

    However, when the mouse hovers over the links, the column stretches vertically. How would I keep it from doing that?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    
    <style type="text/css">
    * { margin:0; padding:0; scrollbar-face-color: #46468E;b }/* re-set everything to zero including body*/
    body { background-color: #00416B; font-family: Arial, Helvetica, sans-serif; font-size: 100.01%; }
    h1, h2, h3, h4, h5, ul, p {margin-bottom: 1em; }
    ul{ margin-left: 16px; }/* space for bullet*/
    table { width: 100%; }
    
    #header { }
    #linkbuttons { width: 244px; background-image: url(slices1/images/template_06.jpg); background-repeat: no-repeat; }
    #content { background-image: url(slices1/images/template_08.jpg); background-repeat: no-repeat; }
    #footer { height: 143px; }
    
    .border-t, #header, #footer { border-top: 3px solid #000000; }
    .border-b, #header, #footer { border-bottom: 3px solid #000000; }
    .border-l, #header, #linkbuttons, #footer { border-left: 3px solid #000000; }
    .border-r, #header, #linkbuttons, #content, #footer { border-right: 3px solid #000000; }
    
    .sidelinkbullets { margin: 20px 0px 20px 0px; }
    .sidelinkbullets ul { margin: 0px; }
    .sidelinkbullets li  { list-style-type: none; padding: 10px 20px 10px 20px;}
    .sidelinkbullets li a { font-size: 20px; color: #FFFFFF; text-decoration: none; text-align: center; background: none; display: block; padding: 4px; }
    .sidelinkbullets li a:hover { color: #000099; background-color: #f0f7fd; border: 2px solid #247fe8;  }
    #sidelink1, #sidelink2, #sidelink3, #sidelink4, { }
    
    
    
    
    </style>
    
    </head>
    
    <body>
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td id="header">&nbsp;</td>
      </tr>
      <tr>
        <td id="body"><table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td id="linkbuttons"><ul class="sidelinkbullets">
          <li><a id="sidelink1" href="#" title="Link Title...Woo!">link</a></li>
          <li><a id="sidelink2" href="#">link2</a></li>
          <li><a id="sidelink3" href="#">linkagelinky link a link a dink</a></li>
          <li><a id="sidelink4" href="#">linky linkage link  </a></li>
        </ul></td>
        <td id="content">&nbsp;</td>
      </tr>
    </table>
    </td>
      </tr>
      <tr>
        <td id="footer">&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>

  5. #5
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Nevermind. I figured it out.

    Code:
    .sidelinkbullets li a { padding: 4px; }
    .sidelinkbullets li a: hover { padding: 2px; border: 2px solid #FFFFFF }
    I made the padding accomidate the border for when it wasn't there, then reduced the padding and displayed the border with a mouse hover effect. Works beautifully!


Bookmarks

Posting Permissions

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