...
PDA

DHTML/CSS Menu Alignment

CodeRaider
03-08-2004, 09:52 PM
Hi, I need help positioning a DHTML/CSS menu on my webpage..I am trying to align it on the left of my page...

My page code is this:

<HTML>
<HEAD>
<TITLE>::New Age::For all your N-Gage needs::</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY BGCOLOR=#EEEEEE LEFTMARGIN=0 RIGHTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<TABLE align="center" WIDTH=750 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=6>
<IMG SRC="images/site_01.gif" WIDTH=750 HEIGHT=38 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=6>
<IMG SRC="images/site_02.gif" WIDTH=61 HEIGHT=362 ALT=""></TD>

<TD background="images/site_03.gif" width="648" height="30" align="center" COLSPAN=4>:::<a href="home.html" target="mainiframe">Home</a>
-> <a href="testiframe.html" target="mainiframe">Contact</a> -> <a href="home.html" target="mainiframe">About</a> ->
<a href="home.html" target="mainiframe">Search</a> ->
<a href="home.html" target="mainiframe">Links</a> ->
<a href="home.html" target="mainiframe">Forum</a> ->
<a href="home.html" target="mainiframe">Link to Us</a>:::
</TD>

<TD ROWSPAN=4>
<IMG SRC="images/site_04.gif" WIDTH=41 HEIGHT=322 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=4>
<IMG SRC="images/site_05.gif" WIDTH=648 HEIGHT=39 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=4>
<IMG SRC="images/site_06.gif" WIDTH=34 HEIGHT=293 ALT=""></TD>
<TD background="images/site_07.gif" width="583" height="176" COLSPAN=2>
<iframe name="mainiframe" src="home.html" width=583 height=176 frameborder=0 scrollbars=yes></iframe></TD>
<TD ROWSPAN=2>
<IMG SRC="images/site_08.gif" WIDTH=31 HEIGHT=253 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=2>
<IMG SRC="images/site_09.gif" WIDTH=583 HEIGHT=77 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=2>
<IMG SRC="images/site_10.gif" WIDTH=229 HEIGHT=40 ALT=""></TD>

<TD background="images/site_11.gif" width="426" height="15" align="center" COLSPAN=3>Copyright
2004, New Age [www.openwar.net/new-age]. All rights reserved.</TD>
</TR>
<TR>
<TD COLSPAN=3>
<IMG SRC="images/site_12.gif" WIDTH=426 HEIGHT=25 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=61 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=34 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=229 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=354 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=31 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=41 HEIGHT=1 ALT=""></TD>
</TR>
</TABLE>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
</BODY>
</HTML>
And this is what I want to be aligned on the left of the above code:

<style type="text/css">
<!--

.Navlink {COLOR: #000000; TEXT-DECORATION: none; font-family: verdana; font-size: 10pt; font-weight: bold;}
a:link.Navlink {color : #000000;}
a:visited.Navlink {color : #000000;}
a:active.Navlink {text-decoration: none;}
a:hover.Navlink {text-decoration: none;}

-->
</style>
<script language = "javascript">
<!--

function LmOver(elem, clr)
{elem.style.backgroundColor = clr;
elem.children.tags('A')[0].style.color = "#FFFFFF";
elem.style.cursor = 'hand'}

function LmOut(elem, clr)
{elem.style.backgroundColor = clr;
elem.children.tags('A')[0].style.color = "#000000";}

function LmDown(elem, clr)
{elem.style.backgroundColor = clr;
elem.children.tags('A')[0].style.color = "#FFFFFF";}

function LmUp(path)
{location.href = path;}

//-->
</script>

<table border="0" width="120" bgcolor="#000000" cellspacing="0" cellpadding="0">
<tr><td width="100%">

<table align="left" border="0" width="100%" cellspacing="1" cellpadding="1">
<tr><td width="100%" onMouseover="LmOver(this, '#0066CC')" onMouseout="LmOut(this, '#99CCFF')" onMouseDown="LmDown(this, '#0066CC')"
onMouseUp="LmUp('#')" bgcolor="#99CCFF"><A HREF="#" Class="navlink">&nbsp; Games</a></td></tr>
<tr><td width="100%" onMouseover="LmOver(this, '#0066CC')" onMouseout="LmOut(this, '#99CCFF')" onMouseDown="LmDown(this, '#0066CC')"
onMouseUp="LmUp('#')" bgcolor="#99CCFF"><A HREF="#" Class="navlink">&nbsp; Applications</a></td></tr>
<tr><td width="100%" onMouseover="LmOver(this, '#0066CC')" onMouseout="LmOut(this, '#99CCFF')" onMouseDown="LmDown(this, '#0066CC')"
onMouseUp="LmUp('#')" bgcolor="#99CCFF"><A HREF="#" Class="navlink">&nbsp; Wallpapers</a></td></tr>
<tr><td width="100%" onMouseover="LmOver(this, '#0066CC')" onMouseout="LmOut(this, '#99CCFF')" onMouseDown="LmDown(this, '#0066CC')"
onMouseUp="LmUp('#')" bgcolor="#99CCFF"><A HREF="#" Class="navlink">&nbsp; Screensavers</a></td></tr>
<tr><td width="100%" onMouseover="LmOver(this, '#0066CC')" onMouseout="LmOut(this, '#99CCFF')" onMouseDown="LmDown(this, '#0066CC')"
onMouseUp="LmUp('#')" bgcolor="#99CCFF"><A HREF="#" Class="navlink">&nbsp; Movies</a></td></tr>
<tr><td width="100%" onMouseover="LmOver(this, '#0066CC')" onMouseout="LmOut(this, '#99CCFF')" onMouseDown="LmDown(this, '#0066CC')"
onMouseUp="LmUp('#')" bgcolor="#99CCFF"><A HREF="#" Class="navlink">&nbsp; Ringtones</a></td></tr>
<tr><td width="100%" onMouseover="LmOver(this, '#0066CC')" onMouseout="LmOut(this, '#99CCFF')" onMouseDown="LmDown(this, '#0066CC')"
onMouseUp="LmUp('#')" bgcolor="#99CCFF"><A HREF="#" Class="navlink">&nbsp; Emulators</a></td></tr>
<tr><td width="100%" onMouseover="LmOver(this, '#0066CC')" onMouseout="LmOut(this, '#99CCFF')" onMouseDown="LmDown(this, '#0066CC')"
onMouseUp="LmUp('#')" bgcolor="#99CCFF"><A HREF="#" Class="navlink">&nbsp; Roms</a></td></tr>
<tr><td width="100%" onMouseover="LmOver(this, '#0066CC')" onMouseout="LmOut(this, '#99CCFF')" onMouseDown="LmDown(this, '#0066CC')"
onMouseUp="LmUp('#')" bgcolor="#99CCFF"><A HREF="#" Class="navlink">&nbsp; Tutorials</a></td></tr>
<tr><td width="100%" onMouseover="LmOver(this, '#0066CC')" onMouseout="LmOut(this, '#99CCFF')" onMouseDown="LmDown(this, '#0066CC')"
onMouseUp="LmUp('#')" bgcolor="#99CCFF"><A HREF="#" Class="navlink">&nbsp; Reviews</a></td></tr>
<tr><td width="100%" onMouseover="LmOver(this, '#0066CC')" onMouseout="LmOut(this, '#99CCFF')" onMouseDown="LmDown(this, '#0066CC')"
onMouseUp="LmUp('#')" bgcolor="#99CCFF"><A HREF="#" Class="navlink">&nbsp; Forum</a></td></tr>
<tr><td width="100%" onMouseover="LmOver(this, '#0066CC')" onMouseout="LmOut(this, '#99CCFF')" onMouseDown="LmDown(this, '#0066CC')"
onMouseUp="LmUp('#')" bgcolor="#99CCFF"><A HREF="#" Class="navlink">&nbsp; Links</a></td></tr>
</table>

</td></tr>
</table>
<a href="http://www.guistuff.com/"><img border="0" src="http://www.guistuff.com/images/11dot.gif" width="1" height="1"></a>


Can anyone help?
Vladdy
03-08-2004, 10:33 PM
Yeah, delete what you got now, learn HTML then CSS then start over.
To begin with navigation is a list of links and table is for tabular data.
Antoniohawk
03-08-2004, 10:39 PM
@Vladdy http://www.codingforums.com/showthread.php?s=&threadid=33730&perpage=15&pagenumber=1
Vladdy
03-08-2004, 10:44 PM
Originally posted by Antoniohawk
@Vladdy http://www.codingforums.com/showthread.php?s=&threadid=33730&perpage=15&pagenumber=1
http://www.codingforums.com/showthread.php?s=&threadid=33673
Scroll down to my post.

As far as this topic: I offered a SOLUTION, anything less than starting over would be hack not worth wasting time on.
jeskel
03-09-2004, 06:31 PM
Check the attachement. It should do what you want. Sorry I didn't write a nice and polished code because:
Originally posted by Vladdy
Yeah, delete what you got now, learn HTML then CSS then start over.
To begin with navigation is a list of links and table is for tabular data.
is quite true :)

However if you feel that you need more help, just post something.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum