/    Sign up×
Community /Pin to ProfileBookmark

navidgation area shifting…

Copy linkTweet thisAlerts:
Jul 09.2003

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

Brian

to post a comment
HTML

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@spufiJul 09.2003 — Post a link to your code.
Copy linkTweet thisAlerts:
@haynbrianauthorJul 09.2003 — 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.


Brian
Copy linkTweet thisAlerts:
@CyCoJul 09.2003 — spufi Post a link to your code. [/QUOTE]

...I don't think spufi was being snide...some code "would" be your best bet for an immediate resolve to your dilema
Copy linkTweet thisAlerts:
@haynbrianauthorJul 09.2003 — Below 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.

http://www.shanezack.com/website/index.htm

Thanks again,

Brian
Copy linkTweet thisAlerts:
@nkaisareJul 09.2003 — What you are trying to do can be accomplished so much simply by CSS instead of Tables and Javascript.

HTML:
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Welcome to WEH Supply Inc.&lt;/title&gt;
&lt;meta http-equiv="content-type" content="text/html; charset=iso-8859-1"&gt;
&lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;h1&gt;&lt;span&gt;W.E.H. Supply Inc.&lt;/span&gt;&lt;/h1&gt;
&lt;div id="contents"&gt;
&lt;img src="weh_front.jpg" alt="Picture: WEH Supplies Office"&gt;
&lt;/div&gt;
&lt;div id="nav1"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a...&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a...&gt;About W.E.H.&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a...&gt;Doors&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a...&gt;Windows&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a...&gt;Shudders and Flowerboxes&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a...&gt;Ventilation Products&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a...&gt;Hardware&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a...&gt;Screens&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a...&gt;Mirrors and Glass&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div id="nav2"&gt;
&lt;a...&gt;Directions&lt;/a&gt; |&lt;a...&gt;Contact &lt;/a&gt;
&lt;/div&gt;
&lt;div id="footer"&gt;
&lt;p&gt;2003 W.E.H. Supply&lt;/p&gt;
&lt;p&gt;Web Design by Brian Gunzenhauser&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;


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.
Copy linkTweet thisAlerts:
@nkaisareJul 09.2003 — CSS for your page
<i>
</i>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.
Copy linkTweet thisAlerts:
@haynbrianauthorJul 10.2003 — 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
×

Success!

Help @haynbrian spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...