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?
| SitePoint Sponsor |
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?
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.
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"> </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> </p> <p> </p> </td> </tr> </table> </td> </tr> <tr> <td id="footer"> </td> </tr> </table> </body> </html>
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"> </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"> </td> </tr> </table> </td> </tr> <tr> <td id="footer"> </td> </tr> </table> </body> </html>
Nevermind. I figured it out.
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!Code:.sidelinkbullets li a { padding: 4px; } .sidelinkbullets li a: hover { padding: 2px; border: 2px solid #FFFFFF }
Posting Permissions
Bookmarks