dropdown menu help [Archive] - WebDeveloper.com

Click to See Complete Forum and Search --> : dropdown menu help

datalova

10-28-2006, 09:57 AM

Hello,
I want to add a sub menu to this code.. but it doesnt appear as a right side menu as I had done it (not listed here..erased it)..just lists under the reg. menu list Here is the code for a few lines that I am using:
In the body tag:
<tr>
<td width="100%" align="left" valign="top" class="menulines"><ul>
<li><span class="style107"><font face="Harrington"><a href="index.html">Home</a></font></span></li>
</ul></td>
</tr>

<tr>
<td width="100%" align="left" valign="top" class="menulines"><ul>
<li><span class="style107"><font face="Harrington"><a href="news.html">Latest News!</a> </font></span></li>
</ul></td>
</tr>

Here is the HEAD info contained within <style>:

<style>
.menulines{
border:1.5px solid #F0F0F0;
}

.menulines a{
text-decoration:none;
color:#003366;
}
.style104 {font-size: 16px}
.style105 {
font-size: 14px;
color: #003366;
}
.style107 {font-size: 16px; color: #003366; }
</style>

<script language="JavaScript1.2">

//3-state Highlight menu effect script: By Dynamicdrive.com
//For full source, Terms of service, and 100s DTHML scripts
//Visit http://www.dynamicdrive.com

function over_effect(e,state){
if (document.all)
source4=event.srcElement
else if (document.getElementById)
source4=e.target
if (source4.className=="menulines")
source4.style.borderStyle=state
else{
while(source4.tagName!="TABLE"){
source4=document.getElementById? source4.parentNode : source4.parentElement
if (source4.className=="menulines")
source4.style.borderStyle=state
}
}
}

Thanks for your help.
Pam

abz

10-28-2006, 10:27 AM

<tr>
<td width="100%" align="left" valign="top" class="menulines"><ul>
<li><span class="style107"><font face="Harrington"><a href="index.html">Home</a></font></span></li>
</ul></td>
</tr>

<tr>
<td width="100%" align="left" valign="top" class="menulines"><ul>
<li><span class="style107"><font face="Harrington"><a href="news.html">Latest News!</a> </font></span></li>
</ul></td>
</tr>

first, if you are making a list, there is no reason for it to be in a table as well (for layout purposes). Next, when you finish a list item, you do not need to finish the list too. You dont need a span tag to add a style, you could just as easily out it in the <li>. You should put your font formatting into the CSS, as <font> is a depreciated tag. That section of HTML could easily look like this:

<ul>
<li class="style107"><a href="index.html" title="Home">Home</a></li>
<li class="style107"><a href="news.html" title="News">Latest News!</a></li>
</ul>

It would be helpful if you could post the code for the whole page, or a linmk to where it is online. Also, some kind of visual reference to what you are trying to achieve would be handy.

datalova

10-28-2006, 11:10 AM

Here is the code for the page.
I havent a visual..just in my mind I guess,lol. Havent put my page out there yet.
I wanted to put all the navigation in a seamless border box with scrolling with sub-menus for some things... So its not such a long list on the side. You know, "somethin' pretty like" without doing it in flash.
Perhaps a flash code is best.. don't know.

TY,
Pam

<html>
<head>
<title>Pam's Photo</title>
<meta name="description" content="photography,Awards, Biography and more. ">
<meta name="keywords" content="Photography By Pam">
<meta name="distribution" content="global">
<meta name="created" content="March 25, 1999">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

</style>
<SCRIPT language="JavaScript">

</SCRIPT>

<style>
.menulines{
border:1.5px solid #F0F0F0;
}

.menulines a{
text-decoration:none;
color:#003366;
}
.style104 {font-size: 16px}
.style105 {
font-size: 14px;
color: #003366;
}
.style107 {font-size: 16px; color: #003366; }
</style>

<script language="JavaScript1.2">

//3-state Highlight menu effect script: By Dynamicdrive.com
//For full source, Terms of service, and 100s DTHML scripts
//Visit http://www.dynamicdrive.com

function over_effect(e,state){
if (document.all)
source4=event.srcElement
else if (document.getElementById)
source4=e.target
if (source4.className=="menulines")
source4.style.borderStyle=state
else{
while(source4.tagName!="TABLE"){
source4=document.getElementById? source4.parentNode : source4.parentElement
if (source4.className=="menulines")
source4.style.borderStyle=state
}
}
}

</script>

</head>
<body class="sub">
<p class="StoryTitle"><br>
</p>

<p class="StoryTitle"> </p>
<p class="StoryTitle"> </p>
<p class="StoryTitle"><span class="style2 style48 style89 style97">
October 28, 2006
</span></p>
<table width="100%" border="0" cellpadding="4" cellspacing="2" style="text-align: center">
<tr>

<td height="710" colspan="2" valign="top" style="vertical-align: top"><table width="96%" border="0" align="left" cellpadding="0" cellspacing="0" onMousedown="over_effect(event,'inset')" onMouseup="over_effect(event,'outset')" onMouseover="over_effect(event,'outset')" onMouseout="over_effect(event,'solid')" class="style88" style="background-color:clear">

<tr>
<td width="100%" align="left" valign="top" class="menulines"><ul>
<li><span class="style107"><font face="Harrington"><a href="index.html">Home</a></font></span></li>
</ul></td>
</tr>

<tr>
<td width="100%" align="left" valign="top" class="menulines"><ul>
<li><span class="style107"><font face="Harrington"><a href="news.html">Latest News!</a> </font></span></li>
</ul></td>
</tr>
<tr>
<td width="100%" align="left" valign="top" class="menulines"><ul>
<li><span class="style105"><font face="Harrington"><a href="news_translated.html">(News in Italian, German & French) </a></font></span></li>
</ul></td>
</tr>
<tr>
<td width="100%" align="left" valign="top" class="menulines"><ul>
<li><span class="style107"><font face="Harrington"><a href="bio.html">Biography</a> </font></span></li>
</ul></td>
</tr>
<tr>
<td width="100%" align="left" valign="top" class="menulines"><ul>
<li><span class="style107"><font face="Harrington"><a href="director.html">Director</a> </font></span></li>
</ul></td>
</tr><tr>
<td width="100%" align="left" valign="top" class="menulines"><ul>
<li><span class="style107"><font face="Harrington"><a href="awards.html">Awards</a> </font></span></li>
</ul></td>
</tr>
<tr>
<td width="100%" align="left" valign="top" class="menulines"><ul>
<li><span class="style107"><font face="Harrington"><a href="interviews.html"><u>Interviews</u> &Articles</a></font></span></li>
</ul></td>
</tr><tr>
<td width="100%" align="left" valign="top" class="menulines"><ul>
<li><span class="style107"><font face="Harrington"><a href="poetry.html">Poetry Corner</a></font></span></li>
</ul></td>
</tr><tr>
<td width="100%" align="left" valign="top" class="menulines"><ul>
<li><span class="style107"><font face="Harrington"><a href="photogallery.html">Photo Gallery</a> </font></span></li>
</ul></td>

</tr>
<td width="100%" align="left" valign="top" class="menulines"><ul>
<li><span class="style107"><font face="Harrington"><a href="sitemap.html">SITE MAP</a></font></span></li>
</ul></td>
</tr>
<tr><td width="100%" align="left" valign="top" class="menulines"><ul>
<li><span class="style97 "><a href="mailinglist.html">Join the Mailing List</a></span></li>
</ul></td>

<tr><td width="100%" class="menulines"><ul>
<li><span class="style107"><a href="auctions.html"><strong>Auctions and Fundraiser's </strong></a></span></li>
</ul></td></tr>
<tr><td width="100%" class="menulines"><ul>
<li><span class="style107"><font face="Arial" size="2"><a href="crafts.html"><strong>Online CRAFTS FAIR! </strong></a></span></span></li>
</ul></td></tr>

</table> </td>
<td width="72%" style="vertical-align: top"> <p align="center" class="style85"><span class="style85 style97"></p>
</td>
</tr>
<tr>
<td width="20%" height="133" style="vertical-align: top"><p><span class="style4 style38"><img src="blueprofile.gif" width="91" height="125" align="right"></span></p>
</td>
<td colspan="2" align="center" class="menulines" style="vertical-align: top"> <p> </p>
<p class="style104 style97"><strong><strong><a href="sitemap.html">Please use the SITEMAP for complete navigation of this website.<br>
a></strong></p></td>
</tr>
<tr>
<td height="303" colspan="3" style="vertical-align: top"><p align="center"><strong><a href="http://www.goldenwebawards.com/officialawardwinner.shtml" target="_blank"><img src="webaward2003b.jpg" border="0"></a><a href="www.aawebmasters.com" target="_blank"><img src="SILVERAWARD2.jpg" width="75" height="87" border="0"></a> <a href="http://www.worldwidewebawards.net/" target="_parent"><img src="www_award_BONZE2005.jpg" width="110" height="54" border="0"></a> </strong> </p>
<p align="left">
<script type="text/javascript" language="javascript">
var sc_project=480432;
var sc_partition=3;
var sc_security="";
</script>

<script type="text/javascript" language="javascript" src="http://www.statcounter.com/counter/counter.js"></script><noscript>
<div align="center"><a href="http://www.statcounter.com/" target="_blank"><img src="http://c4.statcounter.com/counter.php?sc_project=480432&java=0&security=" alt="web hit counter" border="0"></a> </div>
</noscript>
</td>
</tr>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td class="FooterColor"> <a href="index.html">©1999-2007 </a><a href="#">| About Us</a> | <a href="sitemap.html">Site Map</a> | <a href="#">Privacy Policy</a> | <a href="mailto:datalova@aol.com">Contact Us</a> </td>
</tr>
</table>
</body>
</html>

abz

10-28-2006, 01:50 PM

yikes, there is a lot of 'junk' code in there. Any time you have repeated a font, position, alignment, size....that could all be done in one line of css...

also, you really dont need to use tables. Im not sure how you want the whole page to be laid out when you are done, but there are certainly easier ways to do it, that will make your files small, your bandwidth usage less (therefore cheaper), faster loading, better browser compatabilities, more accessible to all....the list goes on...

Your HTML shouldn't contain anything to do with how the page looks. HTML is a Mark-up language. Your page without CSS should look like a word document. This is an advantage to you because all your content is in one plac,e so when you go to update it, it wont be full of junk. also, you only have to make one stylesheet for the *whole* site. thats it. and when you want to change the font colour to red, instead of blue, you just have to change 4 letters, instead of reems of <font> tags over X pages.

so yeah, if you can give a basic paint diagram of what sections you want on your page, then a basic layout in CSS will be much easier to give you. Then you can work from there to add bit where you feel necessary :)

datalova

10-28-2006, 08:32 PM

I'm not getting anywhere witht his code. How do I add the submenus?
Pam

datalova

10-30-2006, 02:05 PM

I cleaned up the extra font tags, I am also using DW which is how extra stuff got in there for some reason. What is the correct coding for the submenu for the <head> area and ow do I add the UL (im guessing) to the body?
Thanks