Recommended Posts

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. :P)

Thanks

\\DOS

Edited by DOSError
Link to post
Share on other sites

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 by jsbowen
Link to post
Share on other sites

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

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 by DOSError
Link to post
Share on other sites
Wow, I can't believe how simple of a fix that was... :o

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>

Link to post
Share on other sites

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. :)

Link to post
Share on other sites

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...

Link to post
Share on other sites

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 ;)

Link to post
Share on other sites

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???

Link to post
Share on other sites
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. :)

Link to post
Share on other sites
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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...