I am most grateful for help to solve a problem I have editing a webpage navigation button menu in table format.
I need to add another button to the navigation menu but when I do this the table header and page format get disrupted.
Here is the webpage sourcecode:
<html> <head> <meta http-equiv="Content-Language" content="en-us"> <meta name="GENERATOR" content="Microsoft FrontPage 6.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title> :: .com :: </title> <meta Name="description" content=" "> <meta Name="keywords" content=" "> <meta Name="owner" content="www.drwebebooks.com"> <meta Name="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta Name="copyright" content="Copyright © 2009 www.drwebebooks.com"> <meta Name="distribution" content="worldwide"> <meta Name="revisit-after" content="12 days"> <meta Name="rating" content="General"> <meta Name="resource-type" content="document"> <link href="default.css" rel="stylesheet" type="text/css"> </head> <body> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="bg1"> </td> <td width="10"><img src="index03.gif" alt="" width="10" height="131"></td> <td width="730"><img border="0" src="header.gif" width="730" height="131"></td> <td width="10"><img src="index04.gif" alt="" width="10" height="131"></td> <td class="bg2"> </td> </tr> <tr> <td class="bg3"> </td> <td><img src="index08.gif" alt="" width="10" height="44"></td> <td><table width="730" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="109"><a href="http://www..com"> <img border="0" src="button1.jpg" width="109" height="44"></a></td> <td width="103"> <a href="http://www..com/freebies"> <img border="0" src="button2_new.jpg" width="103" height="44"></a></td> <td width="103"> <a href="http://www..com/products"> <img border="0" src="button3.jpg" width="103" height="44"></a></td> <td width="103"> <a href="http://www..com/affcenter"> <img border="0" src="button4.jpg" width="103" height="44"></a></td> <td width="103"> <a href="http://www..com/products"> <img border="0" src="button3.jpg" width="103" height="44"></a></td> <td width="109"> <a target="_blank" href="http://www..com"> <img border="0" src="button6_new.jpg" width="109" height="44"></a></td> <td><img src="index08.gif" alt="" width="10" height="44"></td> </tr> </table></td> <td><img src="index09.gif" alt="" width="10" height="44"></td> <td class="bg4"> </td> </tr> <tr> <td> </td> <td background="index17.gif"> </td> <td bgcolor="#FFFFFF"><table width="730" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="30"><img src="spacer.gif" alt="" width="30" height="24"></td> <td width="376"><img src="spacer.gif" alt="" width="376" height="1"></td> <td width="41"><img src="spacer.gif" alt="" width="41" height="1"></td> <td width="153"><img src="spacer.gif" alt="" width="153" height="1"></td> <td width="30"><img src="spacer.gif" alt="" width="30" height="1"></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td> </td> </tr> <tr> <td colspan="5"><img src="spacer.gif" alt="" width="1" height="15"></td> </tr> <tr valign="top"> <td> </td> <td colspan="3" class="align-justify"> <p class="MsoNormal"> </p> <p class="MsoNormal" align="center"><b><font color="#000000" size="5">Welcome to DRWEBEBOOKS</font></b> </p> <div align="center"> <center> <p class="MsoNormal" align="left" style="margin-top: 15px"> <b><font size="3" color="#000000">Software . . .</font></b></p> <ul> <li> <p class="MsoNormal" align="left" style="margin-top: 15px"> <font size="3" color="#000000"><b> <a target="_blank" href="http://www..com"> <font color="#0000FF">DRWEBEBOOKS</font></a></b> - EBooks...</font></li> <li> <p class="MsoNormal" align="left" style="margin-top: 15px"> <font size="3" color="#000000"><b> <a target="_blank" href="http://www..com"> <font color="#0000FF">DRWEBEBOOKS</font></a></b> - EBooks...</font></li> <li> <p class="MsoNormal" align="left" style="margin-top: 15px"> <font size="3" color="#000000"><b> <a target="_blank" href="http://www..com"> <font color="#0000FF">DRWEBEBOOKS</font></a></b> - EBooks...</font></li> <li> <p class="MsoNormal" align="left" style="margin-top: 15px"> <font size="3" color="#000000"><b> <a target="_blank" href="http://www..com"> <font color="#0000FF">DRWEBEBOOKS</font></a></b> -Ebooks...</font></li> <li> <p class="MsoNormal" align="left" style="margin-top: 15px"> <font size="3" color="#000000"><b> <a target="_blank" href="http://www..com"> <font color="#0000FF">DRWEBEBOOKS</font></a></b> - EBooks...</font></li> <li> <p class="MsoNormal" align="left" style="margin-top: 15px"> <font size="3" color="#000000"><b> <a target="_blank" href="http://www..com"> <font color="#0000FF">DRWEBEBOOKS</font></a></b> - Ebooks</font></li> <li> <p class="MsoNormal" align="left" style="margin-top: 15px"> <font size="3" color="#000000"><b>DRWEBEBOOKS</b> - Coming Soon!</font></li> <li> <p class="MsoNormal" align="left" style="margin-top: 15px"> <font size="3" color="#000000"><b>DRWEBEBOOKS</b> - Coming Soon!</font></li> <li> <p class="MsoNormal" align="left" style="margin-top: 15px"> <font size="3" color="#000000"><b>DRWEBEBOOKS</b> - Coming Soon!</font></li> </ul> <p class="MsoNormal" align="left" style="margin-top: 15px"> <b><font size="3" color="#000000">Books . . .</font></b></p> <ul> <li> <p class="MsoNormal" align="left" style="margin-top: 15px"> <font size="3" color="#000000"><b> <a target="_blank" href="http://www..com"> <font color="#0000FF">Banish Bad Habits</font></a></b> - </font></li> <li> <p class="MsoNormal" align="left" style="margin-top: 15px"> <font size="3" color="#000000"><b> <a target="_blank" href="http://www..com"> <font color="#0000FF">Adopt a baby</font></a></b> - </font> </li> <li> <p class="MsoNormal" align="left" style="margin-top: 15px"> <font size="3" color="#000000"><b> <a target="_blank" href="http://www..com"> <font color="#0000FF">Bartending for beginners</font></a></b> - </font></li> <li> <p class="MsoNormal" align="left" style="margin-top: 15px"> <font size="3" color="#000000"><b> <a target="_blank" href="http://www..com"> <font color="#0000FF">Beekeeping for beginners</font></a></b> - </font></li> <li> <p class="MsoNormal" align="left" style="margin-top: 15px"> <font size="3" color="#000000"><b> <a target="_blank" href="http://www..com"> <font color="#0000FF">Computer programming 101</font></a></b> - </font></li> <li> <p class="MsoNormal" align="left" style="margin-top: 15px"> <font size="3" color="#000000"><b> <a target="_blank" href="http://www..com/"> <font color="#0000FF">Coping with ADHD</font></a></b> - </font></li> <li> <p class="MsoNormal" align="left" style="margin-top: 15px"> <font size="3" color="#000000"><b>GPS Autotracking</b> - Coming Soon!</font></li> <li> </li> </ul> <p class="MsoNormal" align="left" style="margin-top: 15px"> <b><font size="3" color="#000000">Membership Sites . . .</font></b></p> <ul> <li> <p class="MsoNormal" align="left" style="margin-top: 15px"> <font size="3" color="#000000"><b> <a target="_blank" href="http://www..com"> <font color="#0000FF">Coming soon</font></a></b> - Closed</font></li> <li> <p class="MsoNormal" align="left" style="margin-top: 15px"> <font size="3" color="#000000"><b> <a target="_blank" href="http://www..com"> <font color="#0000FF">Coming soon</font></a></b> - Closed</font></li> <li> <p class="MsoNormal" align="left" style="margin-top: 15px"> <font size="3" color="#000000"><b> <a target="_blank" href="http://www..com"> <font color="#0000FF">Coming soon</font></a></b> - </font></li> <li> <p class="MsoNormal" align="left" style="margin-top: 15px"> <font size="3" color="#000000"><b> <a target="_blank" href="http://www..com"> <font color="#0000FF">Coming soon </font></li> </ul> <p class="MsoNormal" align="left" style="margin-top: 15px"> </p> <p class="MsoNormal" align="left" style="margin-top: 15px"> </p> </center> </div> <p style="text-align: center"><b> <font size="4" color="#000000">More to Come!</font></b></p> <p> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table></td> <td background="index18.gif"> </td> <td> </td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="bg5"> </td> <td width="20"><img src="index20.gif" alt="" width="20" height="45"></td> <td width="610" valign="top" background="index21.gif"> </td> <td width="20"><img src="index22.gif" alt="" width="20" height="45"></td> <td class="bg6"> </td> </tr> <tr> <td><img src="spacer.gif" alt="" width="1" height="1"></td> <td colspan="3"><img src="index24.gif" alt="" width="650" height="14"></td> <td><img src="spacer.gif" alt="" width="1" height="1"></td> </tr> <tr> <td> </td> <td colspan="3" align="center" class="text3">Copyright (c) 2009-2010 drwebebooks Enterprises, LP. All rights reserved.</td> <td> </td> </tr> </table></td> </tr> </table> </body> </html>
The .css file:
body { margin: 0px; padding: 0px; background-image: url(index01.gif); } body, th, td { font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #858585; } form { margin: 0px; padding: 0px; } .input1 { } .align-justify { text-align: justify; } .text1 { text-align: justify; font-size: 10px; } .text2 { color: #918269; } .text3 { font-size: 9px; color: #A2B2C7; } a { color: #918269; } a:hover { text-decoration: none; } /* backgrounds */ .bg1 { background-image: url(index02.gif); background-position: right top; background-repeat: repeat-x; } .bg2 { background-image: url(index05.gif); background-repeat: repeat-x; } .bg3 { background-image: url(index07.gif); background-position: right top; background-repeat: repeat-x; } .bg4 { background-image: url(index10.gif); background-repeat: repeat-x; } .bg5 { background-image: url(index19.gif); background-position: right top; background-repeat: repeat-x; } .bg6 { background-image: url(index23.gif); background-repeat: repeat-x; } /* Styles that are applied on the containing element like <TD></TD>. When applied, this will change both the text and the text links inside them. */ .style1 { background-image: url(index45.gif); background-repeat: no-repeat; } .style1 a { margin-left: 15px; margin-right: 15px; font-size: 10px; color: #8C7E67; text-decoration: none; } .style1 a:hover { text-decoration: underline; }
I hope from this code it can be seen where I want to add an extra navigation button and I am most grateful for all helpful replies to show my how I can add a button to the table without upsetting the whole page table format.
Many thanks and I look forward to replies