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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post

    Links move with CSS!

    I'm playing around with new website interfaces...I've put up a working one that uses CSS- check it out .

    http://www.freewebz.com/hommworld/Other/index.htm

    My question is, how can I keep the other links and text from shifting down when I mouseover a links?

    Here's the source for that page.

    <?xml version="1.0" encoding="iso-8859-1"?>
    <!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>
    <title>Website Effects- Index</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <style type="text/css">
    a.sidebar {
    font: 11pt arial;
    width: 100%;
    line-height: 150%;
    text-decoration: none;
    color: navy;
    }

    a:hover.sidebar {
    background-color: #EEEEEE;
    font-weight: bold;
    border: 1px solid navy;
    }
    </style>
    </head>
    <body>

    <table border="0" cellpadding="5" cellspacing="5" width="100%">
    <tr>
    <td width="20%">
    <table cellpadding="2" cellspacing="0" width="100%" border="1" bordercolor="navy" bgcolor="#E2E2E2">
    <tr>
    <td>
    <a href="#" class="sidebar">Home</a><br>
    <a href="#" class="sidebar">Tutorial 1</a><br>
    <a href="#" class="sidebar">Tutorial 2</a><br>
    <a href="#" class="sidebar">Tutorial 3</a><br>
    <a href="#" class="sidebar">Tutorial 4</a><br>
    <a href="#" class="sidebar">Tutorial 5</a><br>
    <a href="#" class="sidebar">Tutorial 6</a><br>
    <a href="#" class="sidebar">Tutorial 7</a><br>
    <a href="#" class="sidebar">Books</a><br>
    <a href="#" class="sidebar">Links</a>
    </td>
    </tr>
    </table>
    </td>
    <td><h1>Welcome to my Website</h1>
    <p>Welcome to my website!</p>
    <p>Use the menu to the left to explore the site and see what I have!</p>
    <p>If you enjoyed my site, please sign my guestbook! Also, pass the word about my site to your friends!</p></td>
    </tr>
    </table>

    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Add some pad

    Grant,

    by the looks of it, your hover style takes up slightly more room by adding a border. You might want to try and enlarge the non-hover style by adding some room to compensate for the missing border. Somehow i always seem to forget exactly how the box model works again, but i guess adding an all 'round padding of 1px to the non-hover style would do the trick. Or was it margin...? Oh well, a bit of experimenting won't hurt anyone.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Posts
    596
    Thanks
    0
    Thanked 0 Times in 0 Posts
    a:hover.sidebar {
    background-color: #EEEEEE;
    font-weight: bold;
    border: 1px solid navy;
    line-height: 144%;
    }

    actually...had a bit of fun w/your menu...feel free to laugh.

    <style type="text/css">
    a.sidebar {
    font: 11pt arial;
    width: 100%;
    line-height: 150%;
    text-decoration: none;
    color: navy;
    padding-left: 5px;
    }

    a:hover.sidebar {
    color: #E2E2E2;
    background-color: navy;
    border-top: 3px inset ivory;
    border-bottom: 3px outset ivory;
    line-height: 115%;
    padding-left: 6px;
    }
    </style>
    </head>
    <body>

    <table border="0" cellpadding="5" cellspacing="5" width="100%">
    <tr>
    <td width="14%">
    <table cellpadding="0" cellspacing="0" width="100%" border="1" bordercolor="navy" bgcolor="#E2E2E2">
    <tr>
    <td>
    <a href="#" class="sidebar">|||||<b>&amp;nbsp;Home&amp;nbsp;</b>|||||</a><br>
    <a href="#" class="sidebar">&amp;#149;&amp;nbsp;&amp;nbsp;Tutorial 1</a><br>
    <a href="#" class="sidebar">&amp;#149;&amp;nbsp;&amp;nbsp;Tutorial 2</a><br>
    <a href="#" class="sidebar">&amp;#149;&amp;nbsp;&amp;nbsp;Tutorial 3</a><br>
    <a href="#" class="sidebar">&amp;#149;&amp;nbsp;&amp;nbsp;Tutorial 4</a><br>
    <a href="#" class="sidebar">&amp;#149;&amp;nbsp;&amp;nbsp;Tutorial 5</a><br>
    <a href="#" class="sidebar">&amp;#149;&amp;nbsp;&amp;nbsp;Tutorial 6</a><br>
    <a href="#" class="sidebar">&amp;#149;&amp;nbsp;&amp;nbsp;Tutorial 7</a><br>
    <a href="#" class="sidebar">&amp;#149;&amp;nbsp;&amp;nbsp;&amp;nbsp;Books</a><br>
    <a href="#" class="sidebar">&amp;#149;&amp;nbsp;&amp;nbsp;&amp;nbsp;Links</a></td>
    </tr>
    </table>
    Last edited by cheesebagpipe; 12-13-2002 at 09:14 AM.


  •  

    Posting Permissions

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