navidgation area shifting...

autopost · Jan 9, 2008

Hello all, 
 
I have just recently finished a website where the navigation area is vertical and on the left. It is part of a table that is 775w X 506h. The navigation areas are not buttons, but rather text inside a cell that I have set up with css and javascript for mouse over effects. 
 
So this is my problem, in the main center section of the website, I have pictures that are all the same in height, although some are different in width (which as long as the cell is wide enough, shouldn't affect the navigation area I thought). When I click through the navigation bar, the navigation bar cells shift slightly up and down depending on what page I'm viewing. I did give each cell a set height of 30, and it corresponds with the main cell area height, so I have no clue as to why it must shift. 
 
Does anyone have any ideas on why it does this? 
 
Thanks 
 
BrianPost a link to your code.Thanks, but I was hoping for a more serious answer. 
 
I did discover that with all the cell heights combined the table height should be 515, so I made that change throughout, however the index page still seems to be giving me trouble. 
 
If anyone has a serious answer, that would be very helpful and I thank you in advance. 
 
 
Brianspufi Post a link to your code. 
 
...I don't think spufi was being snide...some code "would" be your best bet for an immediate resolve to your dilemaBelow is a link to the site. Once you click through all the links, each page will be cached and then when you click through the links for the second time each page won't have to load and you'll see what I mean by the navigation area shifting. 
 
 
Spufi I completely overlooked you saying "Post a link to your code" and rather only saw "table {layout:bad}"...that is why I reacted like I did, I apologize. 
 
<a class="postlink" href="http://www.shanezack.com/website/index.htm">http://www.shanezack.com/website/index.htm</a> 
 
Thanks again, 
 
BrianWhat you are trying to do can be accomplished so much simply by CSS instead of Tables and Javascript. 
 
HTML: 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
 
<html> 
<head> 
<title>Welcome to WEH Supply Inc.</title> 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> 
<link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"style.css" type="text/css"> 
</head> 
 
<body> 
<h1>W.E.H. Supply Inc.</h1> 
<div id="contents"> 
<img src=http://www.webdeveloper.com/forum/archive/index.php/"weh_front.jpg" alt="Picture: WEH Supplies Office"> 
</div> 
<div id="nav1"> 
<ul> 
<li><a...>Home</a></li> 
<li><a...>About W.E.H.</a></li> 
<li><a...>Doors</a></li> 
<li><a...>Windows</a></li> 
<li><a...>Shudders and Flowerboxes</a></li> 
<li><a...>Ventilation Products</a></li> 
<li><a...>Hardware</a></li> 
<li><a...>Screens</a></li> 
<li><a...>Mirrors and Glass</a></li> 
</ul> 
</div> 
<div id="nav2"> 
<a...>Directions</a> |<a...>Contact </a> 
</div> 
<div id="footer"> 
2003 W.E.H. Supply 
Web Design by Brian Gunzenhauser 
</body> 
</html> 
 
 
Important thing is that: 
1. You have cut tremendously on size of the page 
2. Page is easier to debug 
3. Accessible to all devices 
4. Search engine friendly 
5. Standards compliant, hence has best chance to be backward as well as forward compatible. 
 
CSS FOR THIS PAGE... coming up.CSS for your page 
 
body {color: #fff; background: #999} 
h1 {width: 775px; height: 100px; margin-bottom: 100px; padding: 0; 
/* 45px + 20 px + 25px margin */ 
background: url('weh_head.jpg') no-repeat top left;} 
 
h1 span {display: none} 
/* Since we have background, we dont need the text */ 
 
#contents {background: #fff; color: #000; 
/* top margin nor required as vertical margins collapse */ 
width: 575px; margin-left: 200px;} 
 
#nav1 {position: absolute; top: 200px; left: 0; 
background: #ccc; color: #000} 
 
#nav1 ul, #nav li {list-style: none; margin: 0; padding: 0} 
#nav1 a{display: block; text-align: center; 
height: 20px; width: 200px} 
#nav1 a:link, #nav a:visited {text-decoration: none; 
background: transparent; color: #000} 
#nav1 a:active, #nav a:hover {text-decoration: none; 
background: #ccc; color: #000} 
 
#nav2 {position: absolute; top: 145px; left: 0; 
height: 20px; color: #000; background: #fff} 
#nav2 a {text-decoration: none; color: #000} 
 
#footer, #footer p {width: 775px; text-align: center; 
margin: 0; padding: 0} 
#footer {margin-top: 20px} 
 
 
 
Note: Didn't test it. But it should work.Wow! Didn't even think of doing things like that. I haven't gotten into too much css, so I'm really glad you pointed that out. I haven't tested it yet, but I will, and I'm anxious to check it out. Looks like a major decrease in code! 
 
Thank You! 
 
Brian

navidgation area shifting...

autopost

Guest