PDA

View Full Version : Links move with CSS!

Grant Palin
12-13-2002, 07:35 AM
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>
ronaldb66
12-13-2002, 07:41 AM
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.
cheesebagpipe
12-13-2002, 08:27 AM
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>