modify a code

[masquerade]

I have this code for a menu and was wondering can somebody help me make it a into a floating menu


<script language="javascript">
function popup1()
{
popupwindow = window.open ("http://www./index.html", "popwindow");
}
function popup2()
{
popupwindow = window.open ("http://www./page2.html", "popwindow");
}
function popup3()
{
popupwindow = window.open ("http://www./page3.html ", "popwindow");
}
function popup4()
{
popupwindow = window.open ("http://www./page4.html", "popwindow");
}
function popup5()
{
popupwindow = window.open ("http://www./page5.html", "popwindow");
}
function popup6()
{
popupwindow = window.open ("http://www.page6.html ", "popwindow");
}
function popup7()
{
popupwindow = window.open ("http://www. page7.html", "popwindow");
}
function popup8()
{
popupwindow = window.open ("http://www.page8.html", "popwindow");
}
</script>
</script>

<table><tr><td style="width:140; height:36; padding-top:2px; padding-bottom:0px; font-size:14px; font-family:Bitstream Charter; text-align:center; background-color:#FF0000; color: #000000; border-width:3px; border-style:solid; border-color:#FB5858 #7D2252 #7D2252 #FB5858; padding-top:2px; padding-bottom:0px"
onmouseover="this.style.backgroundColor='#FF9595'; this.style.color='#302400';"
onmousedown="this.style.backgroundColor='#8F8363'; this.style.color='#302400'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=0; this.style.paddingBottom=2;"
onmouseup= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onmouseout= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB '; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onclick="popup1()"
title="Home " ><script>document.write("Home")</script></td></tr>
<table><tr><td style="width:140; height:36; padding-top:2px; padding-bottom:0px; font-size:14px; font-family:Bitstream Charter; text-align:center; background-color:#FF0000; color: #000000; border-width:3px; border-style:solid; border-color:#FB5858 #7D2252 #7D2252 #FB5858; padding-top:2px; padding-bottom:0px"
onmouseover="this.style.backgroundColor='#FF9595'; this.style.color='#302400';"
onmousedown="this.style.backgroundColor='#8F8363'; this.style.color='#302400'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=0; this.style.paddingBottom=2;"
onmouseup= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onmouseout= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB '; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onclick="popup2()"
title="A few facts about me " ><script>document.write("A few facts about me ")</script></td></tr>
<table><tr><td style="width:140; height:36; padding-top:2px; padding-bottom:0px; font-size:14px; font-family:Bitstream Charter; text-align:center; background-color:#FF0000; color: #000000; border-width:3px; border-style:solid; border-color:#FB5858 #7D2252 #7D2252 #FB5858; padding-top:2px; padding-bottom:0px"
onmouseover="this.style.backgroundColor='#FF9595'; this.style.color='#302400';"
onmousedown="this.style.backgroundColor='#8F8363'; this.style.color='#302400'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=0; this.style.paddingBottom=2;"
onmouseup= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onmouseout= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB '; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onclick="popup3()"
title="Contact Me" ><script>document.write("Contact Me")</script></td></tr>
<table><tr><td style="width:140; height:36; padding-top:2px; padding-bottom:0px; font-size:14px; font-family:Bitstream Charter; text-align:center; background-color:#FF0000; color: #000000; border-width:3px; border-style:solid; border-color:#FB5858 #7D2252 #7D2252 #FB5858; padding-top:2px; padding-bottom:0px"
onmouseover="this.style.backgroundColor='#FF9595'; this.style.color='#302400';"
onmousedown="this.style.backgroundColor='#8F8363'; this.style.color='#302400'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=0; this.style.paddingBottom=2;"
onmouseup= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onmouseout= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB '; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onclick="popup4()"
title="Computer Graphics" ><script>document.write("Computer Graphics")</script></td></tr>
<table><tr><td style="width:140; height:36; padding-top:2px; padding-bottom:0px; font-size:14px; font-family:Bitstream Charter; text-align:center; background-color:#FF0000; color: #000000; border-width:3px; border-style:solid; border-color:#FB5858 #7D2252 #7D2252 #FB5858; padding-top:2px; padding-bottom:0px"
onmouseover="this.style.backgroundColor='#FF9595'; this.style.color='#302400';"
onmousedown="this.style.backgroundColor='#8F8363'; this.style.color='#302400'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=0; this.style.paddingBottom=2;"
onmouseup= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onmouseout= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB '; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onclick="popup5()"
title="Newest Sketches" ><script>document.write("Newest Sketches ")</script></td></tr>
<table><tr><td style="width:140; height:36; padding-top:2px; padding-bottom:0px; font-size:14px; font-family:Bitstream Charter; text-align:center; background-color:#FF0000; color: #000000; border-width:3px; border-style:solid; border-color:#FB5858 #7D2252 #7D2252 #FB5858; padding-top:2px; padding-bottom:0px"
onmouseover="this.style.backgroundColor='#FF9595'; this.style.color='#302400';"
onmousedown="this.style.backgroundColor='#8F8363'; this.style.color='#302400'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=0; this.style.paddingBottom=2;"
onmouseup= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onmouseout= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB '; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onclick="popup6()"
title="Old Sketches" ><script>document.write("Old Sketches")</script></td></tr>
<table><tr><td style="width:140; height:36; padding-top:2px; padding-bottom:0px; font-size:14px; font-family:Bitstream Charter; text-align:center; background-color:#FF0000; color: #000000; border-width:3px; border-style:solid; border-color:#FB5858 #7D2252 #7D2252 #FB5858; padding-top:2px; padding-bottom:0px"
onmouseover="this.style.backgroundColor='#FF9595'; this.style.color='#302400';"
onmousedown="this.style.backgroundColor='#8F8363'; this.style.color='#302400'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=0; this.style.paddingBottom=2;"
onmouseup= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onmouseout= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB '; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onclick="popup7()"
title="Pastels" ><script>document.write("Pastels")</script></td></tr>
<table><tr><td style="width:140; height:36; padding-top:2px; padding-bottom:0px; font-size:14px; font-family:Bitstream Charter; text-align:center; background-color:#FF0000; color: #000000; border-width:3px; border-style:solid; border-color:#FB5858 #7D2252 #7D2252 #FB5858; padding-top:2px; padding-bottom:0px"
onmouseover="this.style.backgroundColor='#FF9595'; this.style.color='#302400';"
onmousedown="this.style.backgroundColor='#8F8363'; this.style.color='#302400'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=0; this.style.paddingBottom=2;"
onmouseup= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onmouseout= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB '; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onclick="popup8()"
title="Tutorials and Tips" ><script>document.write("Tutorials and Tips")</script></td></tr></table>

[boogyman]

:eek: what a design nightmare! ! !

Sorry for bs post, but that is rediculous.

If someone doesnt help you before I go home, I will take a look at it and help ya out, but WOW just WOW

[Twey]

He's right... you're much more likely to get help if you have saner code. Whenever you find yourself repeating yourself that much, you can be sure you're doing something wrong. Also, that's not a table: navigation bars are usually marked up as lists of links.

[masquerade]

can somebody just give me the code to insert in my code to make it a floating menu

[boogyman]

LOOK HERE
http://www.dynamicdrive.com/dynamicindex1/staticmenu.htm

[Bob90]

Wrap the table in a <div> tag.

<div.....><table>....</table></div>


If by floating, you mean move with the page, I'm sure there are scripts on DD that do that.

[masquerade]

I applied but have a few problems 1) I want the text inside it black
2)some of the names on the menu I applied appear invisible
3)I not sure that links open (my net is very slow )
to understand my problem http://www.angelfire.com/planet/artzone/page8.html

[boogyman]

change


<table border="1" width="230" cellspacing="0" cellpadding="0">
<tr>
<td width="100&#37;" bgcolor="#000000">
<p align="center"><b><font size="4">Menu</font></b></td>
</tr>
<tr>
<td width="200%" bgcolor="#FF0004">
<p align="left"> <a href="http://www.angelfire.com/planet/artzone/index.html">Home </a><br>

<a href="http://www.angelfire.com/planet/artzone/page2.html">A few facts about me </a><br>
<a href="http://www.angelfire.com/planet/artzone/page3.html">Contact me</a><br>
<a href="http://www.angelfire.com/planet/artzone/page4.html">Computer Graphics</a><br>
<a href="http://www.angelfire.com/planet/artzone/page5.html">Newest sketches</a><br>
<a href="http://www.angelfire.com/planet/artzone/page6.html">Old sketches</a><br>
<a href="http://www.angelfire.com/planet/artzone/page7.html">Pastels</a><br>

<a href="http://www.angelfire.com/planet/artzone/page8.html">Tutorials and tips </a></td>
</tr>
</table>

to


<ul id="menu">
<h2>Menu</h2>
<li><a href="http://www.angelfire.com/planet/artzone/index.html">Home </a></li>
<li><a href="http://www.angelfire.com/planet/artzone/page2.html">A few facts about me </a></li>
<li><a href="http://www.angelfire.com/planet/artzone/page3.html">Contact me</a></li>
<li><a href="http://www.angelfire.com/planet/artzone/page4.html">Computer Graphics</a></li>
<li><a href="http://www.angelfire.com/planet/artzone/page5.html">Newest sketches</a></li>
<li><a href="http://www.angelfire.com/planet/artzone/page6.html">Old sketches</a></li>
<li><a href="http://www.angelfire.com/planet/artzone/page7.html">Pastels</a></li>
<li><a href="http://www.angelfire.com/planet/artzone/page8.html">Tutorials and tips </a></li>
</ul>


and add this to the <head> tag



<style type="text/css">
<!--
ul h2 {
background: #000000;
color: #ffffff;
}
ul#menu, ul#menu a {
background: #ff0000;
color: #000000;
}
ul#menu li{list-style: none;}
// -->
</style>



each of the links in that menu will go to its destination, but were you trying to make it so that the images will link too? you would need to add links in for that.

[masquerade]

it didn't work ,or I am not getting it
all the problems I mentioned earlier are still there plus now its not floating

[boxxertrumps]

Not to be a nuisance, but you should consider a new host.
The ads are rather ugly, and don't match the page...
There is allot of redundant code on your page, like the window open JS...
use this function:
function popup(page) {
window.open ("http://www.angelfire.com/planet/artzone/"+ page +", "popwindow");
}
and call it like so:
<a href="#" onclick="popup('index.html')">
just replace index.html with the page you want in planet/artzone...


<tr><td style="width:140; height:36; padding-top:2px; padding-bottom:0px; font-size:14px; font-family:Bitstream Charter; text-align:center; background-color:#FF0000; color: #000000; border-width:3px; border-style:solid; border-color:#FB5858 #7D2252 #7D2252 #FB5858; padding-top:2px; padding-bottom:0px"
onmouseover="this.style.backgroundColor='#FF9595'; this.style.color='#302400';"
onmousedown="this.style.backgroundColor='#8F8363'; this.style.color='#302400'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=0; this.style.paddingBottom=2;"
onmouseup= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB'; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onmouseout= "this.style.backgroundColor='#FF0000'; this.style.color='#F660AB '; this.style.borderColor='#FB5858 #7D2252 #7D2252 #FB5858'; this.style.paddingTop=2; this.style.paddingBottom=0;"
onclick="popup1()"
title="Home " ><script>document.write("Home")</script></td></tr>

use this for each table cell element..
CSS:
.luv {width:140px; height:36px; padding-top:2px; padding-bottom:0px; font-size:14px; font-family:Bitstream Charter; text-align:center; background-color:#FF0000; color: #000000; border-width:3px; border-style:solid; border-color:#FB5858 #7D2252 #7D2252 #FB5858; padding-top:2px; padding-bottom:0px}
HTML:
<td class="luv">
You can condense those functions down aswell...

There are too many errors to count...
Use # before hex codes, always use px/&#37;/em(units) when defining lengths in CSS(except zero), never just a number...

I have a feeling that you used a WYSIWYG editor, because there is no way anyone took the time to write that by hand...
Please reference this: http://www.w3schools.com/html/default.asp and this: http://www.w3schools.com/css/default.asp and start coding by hand...

also, running your site through the validators below will tell you how bad WYSIWYG editors are.

[mburt]

I have a suggestion: USE A DD SCRIPT. :)
Sometimes people reach their limit when they code, and I do believe this is one of them.