Site Navigation Help

[DOSError]

Hello all;

I am trying to insert a vertical navigation menu in the left side of every page on my server and I'm having problems. The problem is, I want to put text/links to the right of the menu, but every attempt that I make, it either breaks the menu table up or it places the text above/below the menu.

The following link is the page I am referring to:

http://slashdos.no-ip.org

....the large open gap of black space in the center of the screen is where I want text/links to go. I want to make this area a different color background and maybe add a scroll function (not sure on that yet). I basically just need to make an isolated area to the right of my menu for text/links.

(Note: The DHTML menu design will probably change, this is just an example. Also, don't mind the table borders...I use them as guidelines and then disable them later. )

Thanks

\\DOS

Edited January 6, 2006 by DOSError

[jsbowen]

There are a million and one ways to accomplish what you want. This is the way I would handle it, just based on simplicity:

<table><tr><td valign="top">

<table id="m1mainSXMenu2" cellspacing="0" cellpadding="0" border="1" width="192" >

<tr align="center">

<td align="bottom" width="192"><img src="./menu_m1bg0.gif" alt="" /></td></tr><tr align="center"><td onmouseover="chgBg(m1,'m1tlm0',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm0',0,1)" id="m1tlm0" style="color:#17684A;" class="m1mit" background="./menu_m1bg1.gif"><a id="m1tlm0a" onmouseover="window.status='Tech Tutorials';return true" onmouseout="window.status='';return true" style="color:#17684A;" class="m1CL0" href="\pages\techtutorials.html" >Tech Tutorials</a></td>

</tr><tr><td width="192"><img src="./menu_m1bg2.gif" alt="" /></td></tr><tr align="center"><td onmouseover="chgBg(m1,'m1tlm1',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm1',0,1)" id="m1tlm1" style="color:#17684A;" class="m1mit" background="./menu_m1bg1.gif"><a id="m1tlm1a" onmouseover="window.status='Downloads';return true" onmouseout="window.status='';return true" style="color:#17684A;" class="m1CL0" href="\pages\downloads.html" >Downloads</a></td>

</tr><tr><td width="192"><img src="./menu_m1bg2.gif" alt="" /></td></tr><tr align="center"><td onmouseover="chgBg(m1,'m1tlm2',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm2',0,1)" id="m1tlm2" style="color:#17684A;" class="m1mit" background="./menu_m1bg1.gif"><a id="m1tlm2a" onmouseover="window.status='Forum';return true" onmouseout="window.status='';return true" style="color:#17684A;" class="m1CL0" href="http://s15.invisionfree.com/slashdos/index.php" >Forum</a></td>

</tr><tr><td width="192"><img src="./menu_m1bg2.gif" alt="" /></td></tr><tr align="center"><td onmouseover="chgBg(m1,'m1tlm3',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm3',0,1)" id="m1tlm3" style="color:#17684A;" class="m1mit" background="./menu_m1bg1.gif"><a id="m1tlm3a" onmouseover="window.status='Funny';return true" onmouseout="window.status='';return true" style="color:#17684A;" class="m1CL0" href="\pages\funny.html" >Funny</a></td>

</tr><tr><td width="192"><img src="./menu_m1bg2.gif" alt="" /></td></tr><tr align="center"><td onmouseover="chgBg(m1,'m1tlm4',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm4',0,1)" id="m1tlm4" style="color:#17684A;" class="m1mit" background="./menu_m1bg1.gif"><a id="m1tlm4a" onmouseover="window.status='Games';return true" onmouseout="window.status='';return true" style="color:#17684A;" class="m1CL0" href="\pages\games.html" >Games</a></td>

</tr><tr><td width="192"><img src="./menu_m1bg2.gif" alt="" /></td></tr><tr align="center"><td onmouseover="chgBg(m1,'m1tlm5',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm5',0,1)" id="m1tlm5" style="color:#17684A;" class="m1mit" background="./menu_m1bg1.gif"><a id="m1tlm5a" onmouseover="window.status='The More You Know';return true" onmouseout="window.status='';return true" style="color:#17684A;" class="m1CL0" href="\pages\randomfacts.html" >The More You Know</a></td>

</tr><tr><td width="192"><img src="./menu_m1bg2.gif" alt="" /></td></tr><tr align="center"><td onmouseover="chgBg(m1,'m1tlm6',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm6',0,1)" id="m1tlm6" style="color:#17684A;" class="m1mit" background="./menu_m1bg1.gif"><a id="m1tlm6a" onmouseover="window.status='Quick Links';return true" onmouseout="window.status='';return true" style="color:#17684A;" class="m1CL0" href="\pages\qlinks.html" >Quick Links</a></td>

</tr><tr><td width="192"><img src="./menu_m1bg2.gif" alt="" /></td></tr><tr align="center"><td onmouseover="chgBg(m1,'m1tlm7',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm7',0,1)" id="m1tlm7" style="color:#17684A;" class="m1mit" background="./menu_m1bg1.gif"><a id="m1tlm7a" onmouseover="window.status='Contact';return true" onmouseout="window.status='';return true" style="color:#17684A;" class="m1CL0" href="\pages\contact.html" >Contact</a></td></tr><tr align="center"><td align="top" width="192"><img src="./menu_m1bg3.gif" alt="" /></td></tr>

</table>

</td>

<td valign="top">This is where you could put all of the text/content beside the menu</td>

</tr></table>

As I hope you can tell, I've just wrapped the menu script into another table, and made the content a <td> in that new table.

Hope that helps.

Edited January 6, 2006 by jsbowen

[DOSError]

Wow, I can't believe how simple of a fix that was...

Thanks!

Edit: Hmm...still having issues. The text is appearing too close to the menu and I can't seem to space it away from the menu. Also, if I try to put the <TD> into a <TABLE> it puts the text below the menu again. I want to build a secondary table to work with for text/links. Otherwise, I don't think I can edit bgcolor or define a size for the area of content...

Edited January 6, 2006 by DOSError

[jsbowen]

Wow, I can't believe how simple of a fix that was...

Thanks!

Edit: Hmm...still having issues. The text is appearing too close to the menu and I can't seem to space it away from the menu. Also, if I try to put the <TD> into a <TABLE> it puts the text below the menu again. I want to build a secondary table to work with for text/links. Otherwise, I don't think I can edit bgcolor or define a size for the area of content...

Ok, for the edit part you are probably looking at nesting a table. I'll just show the content part of the table code from above:

<td valign="top">

<table bgcolor="gray"><tr>

<td width="20">This could be your spacer td to allow some space between the menu and the content.</td>

<td>This is where you could put all of the text/content beside the menu</td>

</tr></table>

</tr></table>

[DOSError]

When altering the color for the content <TD>, it still shows up a faint little line around the hidden table (almost like half a border or something). I'm not at the house right now to upload it, so I can't really show you right at the moment.

I will update it tonight and let you see.

Thanks for the help, it is starting to look just how I want it.

[DOSError]

OK, check the link that I provided earlier (http://slashdos.no-ip.org) to see the updated version of this page, which shows the table color problem that I am currently facing.

Thanks for all of the help, I definitely appreciate it.

Edited January 7, 2006 by DOSError

[DOSError]

Nevermind, I fixed it.

I do question the need for a nested td that is not wrapped within a table tag...it isn't causing problems when there, but if removed the content table shifts below the navigation menu. The reason I ask about this is because the app that I use to check my code brought up an alert of an improperly placed <td valign="top"> tag...

[Dragon]

it's stating that because you didnt' close the tag.

try to add this

</tr></td>

so it looks like this

</tr></td>
</table>
<!--end of navigation menu -->

on a preliminary look I think this will solve your error code you are recieving.

I can't get a proper look at it as I am getting a javascript bug error on a missing file. and I don't want to hunt around your code to find it

[DOSError]

Eh, I got frustrated, scrapped that entire design and went with something new. New name too...kind of a play on words. Address = http://complhex.no-ip.org

Check it out and tell me what you think...and what all is wrong with it.

Keep in mind that it is still in its basic, unfinished stage.

Thanks

\\DOS

[Dragon]

looking good, only misnomers i find are listed below.

first. that "interesting text color" can not be used on a white background. not only that it looks like something I used to clean out of my kids diapers. (think about it)

second, the web site name is ComplHEX however your logo says CompHEX. you might want to fix that

otherwise looks good.

What made you decide to kill the original design???

[DOSError]

looking good, only misnomers i find are listed below.

first. that "interesting text color" can not be used on a white background. not only that it looks like something I used to clean out of my kids diapers. (think about it)

second, the web site name is ComplHEX however your logo says CompHEX. you might want to fix that

otherwise looks good.

What made you decide to kill the original design???

The logo has a faint large "L" written in "caddie" font in the background...I might need to brighten it up a bit...I actually plan on making the logo larger. The interesting text color is going to be done away with...I was just playing around at the start and left it be.

I killed the original design because it just seemed too problematic...I didn't really like the DHTML menu that much (seemed a bit too childish)...this design will represent much better content integration. The one thing that bothers me most about websites is consistency...when navigating a site, the tables, nav links and design structure should stay intact (for the most part). The white window of this page design gives me a build area, while everything else can just be replicated for each page and remain intact. The old design was a bit more choppy, if that makes any sense.

[jsbowen]

The logo has a faint large "L" written in "caddie" font in the background...I might need to brighten it up a bit...I actually plan on making the logo larger. The interesting text color is going to be done away with...I was just playing around at the start and left it be.

I killed the original design because it just seemed too problematic...I didn't really like the DHTML menu that much (seemed a bit too childish)...this design will represent much better content integration. The one thing that bothers me most about websites is consistency...when navigating a site, the tables, nav links and design structure should stay intact (for the most part). The white window of this page design gives me a build area, while everything else can just be replicated for each page and remain intact. The old design was a bit more choppy, if that makes any sense.

I agree with your reasoning and prefer the new design as well.

[Dragon]

I must agree with jsbowen. looking good, I like the new logo