13 Replies - 3138 Views - Last Post: 21 December 2009 - 07:40 PM

#1 rpd  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 65
  • Joined: 13-August 07

Help with webpage navigation list (affecting table format)

Post icon  Posted 18 December 2009 - 08:48 AM

Hi
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">&nbsp;</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">&nbsp;</td>
				</tr>
			<tr>
				<td class="bg3">&nbsp;</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">&nbsp;</td>
				</tr>
			<tr>
				<td>&nbsp;</td>
				<td background="index17.gif">&nbsp;</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>&nbsp;</td>
							</tr>
						<tr>
							<td colspan="5"><img src="spacer.gif" alt="" width="1" height="15"></td>
							</tr>
						<tr valign="top">
							<td>&nbsp;</td>
							<td colspan="3" class="align-justify">
							  <p class="MsoNormal">&nbsp;
							  </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">&nbsp;</p>
								<p class="MsoNormal" align="left" style="margin-top: 15px">&nbsp;</p>
								</center>
							  </div>
							  <p style="text-align: center"><b>
								<font size="4" color="#000000">More to Come!</font></b></p>
							  <p>&nbsp;								
								</td>
							<td>&nbsp;</td>
							</tr>
						<tr>
							<td>&nbsp;</td>
							<td>&nbsp;</td>
							<td>&nbsp;</td>
							<td>&nbsp;</td>
							<td>&nbsp;</td>
							</tr>
						</table></td>
				<td background="index18.gif">&nbsp;</td>
				<td>&nbsp;</td>
				</tr>
			</table>
			<table width="100%"  border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td class="bg5">&nbsp;</td>
					<td width="20"><img src="index20.gif" alt="" width="20" height="45"></td>
					<td width="610" valign="top" background="index21.gif">&nbsp;</td>
					<td width="20"><img src="index22.gif" alt="" width="20" height="45"></td>
					<td class="bg6">&nbsp;</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>&nbsp;</td>
					<td colspan="3" align="center" class="text3">Copyright (c)
					  2009-2010 drwebebooks Enterprises, LP. All rights reserved.</td>
					<td>&nbsp;</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

Is This A Good Question/Topic? 0
  • +

Replies To: Help with webpage navigation list (affecting table format)

#2 rpd  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 65
  • Joined: 13-August 07

Re: Help with webpage navigation list (affecting table format)

Posted 18 December 2009 - 12:27 PM

[quote name='rpd' date='18 Dec, 2009 - 07:48 AM' post='870772']

OK- I finally figured it out & fixed it myself after struggling with this since my original post.

It simply needed the navigation table width increasing. (I find tables can be frustrating sometimes).
Here is my amendment:
<td width="735"><img border="0" src="header.gif" width="735" height="131"></td>


Increasing the table width here now allows the extra button to be placed properly without the table below being disrupted!-SORTED.
Simples.....

Is everyone away at Christmas parties? Well if there is anyone there-Happy Christmas to you!
Was This Post Helpful? 0
  • +
  • -

#3 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1366
  • View blog
  • Posts: 3,443
  • Joined: 28-November 09

Re: Help with webpage navigation list (affecting table format)

Posted 18 December 2009 - 01:00 PM

Tables != design

Tables = Tabular Data ONLY

Read:
http://www.dreaminco...howtopic=143632

http://www.dreaminco...howtopic=144613
Was This Post Helpful? 0
  • +
  • -

#4 rpd  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 65
  • Joined: 13-August 07

Re: Help with webpage navigation list (affecting table format)

Posted 19 December 2009 - 04:52 PM

[quote name='Lemur' date='18 Dec, 2009 - 12:00 PM' post='870946']
Hi Lemur
Thanks for your advice.
I do not think I can edit this page all in CSS-can you or any expert here take a look & help please
I added a css navigation menu to this page & I cannot get the tables to match up.

Here is the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="generator" content= "HTML Tidy for Windows (vers 18 June 2008), see www.w3.org" />
  <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=us-ascii" />
  <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=us-ascii" />
  <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">&nbsp;</td>
<td width="10"><img src="index03.gif" alt="" width="10" height="131" /></td>
<td width="770"><img border="0" src="drwebookheader.gif" width="700" height="131" /></td>
<td width="10"><img src="index04.gif" alt="" width="10"height="131" /></td>
<td class="bg2">&nbsp;</td>
</tr>
<tr>
<td class="bg3">&nbsp;</td>
<td><img src="index08.gif" alt="" width="10" height= "44" /></td>



<td><table width="750" border="0" cellpadding="0" cellspacing="0">

<div id="navigation">
			<ul>											  
					<li><a href="index.html"title="EEb home page">Home</a></li>
					<li><a href="EEb ebooktitles.html"title="EEb ebook titles">Ebook titles</a></li>
										<li><a href="EEb free ebooks.html" title="EEb free ebooks">Free Ebooks</a></li>
					<li><a href="EEb Contact.html" title="EEb.com Contact and Site Help">Contact</a></li>
				</ul>	 
			   
		 </div>
<tr>


			<td><img src="index09.gif" alt="" width="10" height="44" /></td>
			<td class="bg4">&nbsp;</td>
		  </tr>
		  <tr>
			<td>&nbsp;</td>
			<td background="index17.gif">&nbsp;</td>
			<td bgcolor="#FFFFFF"><table width="730" border="0" cellspacing="0" cellpadding="0">
						<tr> <br /><center>   
			   <b><font color="#000000" size="5">Welcome to DRWEBEBOOKS</font></b> <br />
							<img alt= "www.drwebebooks.com (4K)" src="www.drwebebooks.com.gif" height="23" width="286" /></center><br />
			<center><font color="#FF0000" >   <b>Here you will find quality resources for all your eBook needs<br />
			  Sign up for free to gain access to all our resources
			  and get our free EBook and quarterly ebook
			  newsletter<br />
			  See below our growing list of quality ebooks for sale
			  at discount prices representing great value for money
			  and all backed up by a 30 day money back guarantee if
			  not to your full satisfaction</b></center></font>

			 
				<tr>
				  <td width="30"><img src="spacer.gif" alt="" width="30" height="24" /></td>
				</tr>

				<br /><br /> <br /><br /> <br /><br />

				   <b><font size="3" color= "#000000">EBooks to buy. . .</font></b></p>

						<ul>
						  <li>
							<p  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></p>
						  </li>

						  <li>
							<p  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></p>
						  </li>

						  <li>
							<p  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></p>
						  </li>

						  <li>
							<p  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></p>
						  </li>

						  <li>
							<p  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></p>
						  </li>

						  <li>
							<p  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></p>
						  </li>

						  <li>
							<p  align="left"
							style="margin-top: 15px"><font size="3"
							color="#000000"><b>GPS Autotracking</b>
							- Coming Soon!</font></p>
						  </li>
						</ul>

						<p  align="left" style=
						"margin-top: 15px"><b><font size="3" color=
						"#000000">How to make money with EBooks. . .</font></b></p>

						<ul>
						  <li>
							<p  align="left"
							style="margin-top: 15px"><font size="3"
							color="#000000"><b><a target="_blank"
							href="http://www..com"><font color=
							"#0000FF">Making money with
							ebooks</font></a></b> -</font></p>
						  </li>
						</ul>

						<p  align="left" style=
						"margin-top: 15px"><b><font size="3" color=
						"#000000">Software . . .</font></b></p>

						<ul>
						  <li>
							<p  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></p>
						  </li>

						  <li>
							<p  align="left"
							style="margin-top: 15px"><font size="3"
							color="#000000"><b>DRWEBEBOOKS</b> -
							Coming Soon!</font></p>
						  </li>
						</ul>

						<p  align="left" style=
						"margin-top: 15px"><b><font size="3" color=
						"#000000">Membership Sites . .
						.</font></b></p>

						<ul>
						  <li>
							<p  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></p>
						  </li>
						   </ul>
					  

					<p style="text-align: center"><b><font size="4"
					color="#000000">More to Come!</font></b></p><br />

					<p>&nbsp; <a href="http://www.eminentlyebooks.com">www.eminentlyebooks.com</a></p>
				  </td>

				 
				<tr>
				  <td>&nbsp;</td>

				   </tr>
			  </table>
			</td>

			<td background="index18.gif">&nbsp;</td>

			<td>&nbsp;</td>
		  </tr>
		</table>

		<table width="100%" border="0" cellspacing="0" cellpadding="0">
		  <tr>
			<td class="bg5">&nbsp;</td>

			<td width="20"><img src="index20.gif" alt="" width="20"height="45" /></td>

			<td width="760" valign="top" background="index21.gif">
			&nbsp;</td>

			<td width="20"><img src="index22.gif" alt="" width="20" height="45" /></td>

			<td class="bg6">&nbsp;</td>
		  </tr>

		  <tr>
			<td><img src="spacer.gif" alt="" width="1" height="1" /></td>

			<td colspan="3"><img src="index24.gif" alt="" width="750" height="14" /></td>

			<td><img src="spacer.gif" alt="" width="1" height="1" /></td>
		  </tr>

		  <tr>
			<td>&nbsp;</td>

			<td colspan="3" align="center" class="text3">Copyright
			(c) 2009-2010 drwebebooks Enterprises. All rights
			reserved.</td>

			<td>&nbsp;</td>
		  </tr>
		</table>
	  </td>
	</tr>
  </table>
</body>
</html>



And here is the default.css code:
#navigation  {
float : left;
	height: 30px;
	width: 100%;
	border-top: solid #000 1px;
	border-bottom: solid #000 1px;
	background-color: #336699;
list-style-type: none;
}
#navigation ul {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	color: #FFF;
	line-height: 30px;
	white-space: nowrap;
list-style-type: none;
}
#navigation li {
	list-style-type: none;
	display: inline;
}
#navigation li a {
	text-decoration: none;
	padding: 7px 10px;
	color: #FFF;
}
#navigation li a:link {
	color: #FFF:
}
#navigation li a:visited {
	color: #CCC;
}
#navigation li a:hover {
	font-weight: bold;
	color: #FFF;
	background-color: #3366FF;
}




body {
	margin: 0px;
	padding: 0px;
	background-image: url(index_01.gif);
}

body, th, td {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	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(index_02.gif);
	background-position: right top;
	background-repeat: repeat-x;
}

.bg2 {
	background-image: url(index_05.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 am very grateful for help with this page & look forward to helpful replies

Many thanks
Was This Post Helpful? 0
  • +
  • -

#5 skrilla  Icon User is offline

  • boots.

Reputation: 2
  • View blog
  • Posts: 3,096
  • Joined: 05-July 02

Re: Help with webpage navigation list (affecting table format)

Posted 19 December 2009 - 08:30 PM

you need to not use frontpage and handcode it. that will help, a LOT.

semantics, semantics, semantics.
Was This Post Helpful? 0
  • +
  • -

#6 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: Help with webpage navigation list (affecting table format)

Posted 20 December 2009 - 03:07 AM

Learn about the box model at these links:
Interactive Box Model
Box Model Explaination

Learn about css positioning at this link:
CSS Positioning

The box model and css positioning will give you more freedom with design than tables.
Was This Post Helpful? 0
  • +
  • -

#7 rpd  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 65
  • Joined: 13-August 07

Re: Help with webpage navigation list (affecting table format)

Posted 20 December 2009 - 03:50 AM

[quote name='hiddenghost' date='20 Dec, 2009 - 02:07 AM' post='872053']
Hi Skrilla and hiddenghost

Thanks for your replies-I will look at your suggestions & try & learn how to code properly. Meantime can you or anyone else please help sort out this code-I have spent hours on this now & it is driving me NUTS!
The page was fine with html nav buttons but since I put in the css nav buttons I cannot get the other elements to line up.
Here I show 2 images to demonstrate:
1.html nav buttons version:
see attachment Image2Webedit.jpg
Attached Image
2.css nav buttons
see attachment Image1webedit.jpg
Attached Image

Again I look forward to helpful replies to fix this, thanks
Was This Post Helpful? 0
  • +
  • -

#8 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: Help with webpage navigation list (affecting table format)

Posted 20 December 2009 - 11:21 AM

What does the new version look like in code.

You can use the <ul><li> list tags to make a navigation list.
Even without css list tags line up fine.
Try making html like this:
<span id = "linkBox">
	<ul>
		<li><a href = "">Link one</a></li>
		<li><a href = "">Link one</a></li>
		<li><a href = "">Link one</a></li>
	</ul>
</span>


Then make and id selector for css:
<style type = "text/css">
#linkBox {			  /* control span with links inside it */
	dispaly: block; /* it's a square */
	position: relative; /* positions - learn them */
	width: 100px; /* change your width */
	height: 100px; /* change your height */
	list-style: none; /* learn about the list-style for css */
}
</style>


Put the above in a separate file to experiment with before you integrate it with your original page.

This post has been edited by hiddenghost: 20 December 2009 - 11:36 AM

Was This Post Helpful? 0
  • +
  • -

#9 rpd  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 65
  • Joined: 13-August 07

Re: Help with webpage navigation list (affecting table format)

Posted 20 December 2009 - 11:54 AM

[quote name='hiddenghost' date='20 Dec, 2009 - 10:21 AM' post='872253']
What does the new version look like in code.

Like this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="generator" content= "HTML Tidy for Windows (vers 18 June 2008), see www.w3.org" />
  <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=us-ascii" />
  <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=us-ascii" />
  <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">&nbsp;</td>
<td width="10"><img src="index03.gif" alt="" width="10" height="131" /></td>
<td width="870"><img border="0" src="drwebookheader.gif" width="870" height="131" /></td>
<!--785--->
<td width="10"><img src="index04.gif" alt="" width="10"height="131" /></td>
<td class="bg2">&nbsp;</td>
</tr>


<td class="bg3">&nbsp;</td>

<td><img src="index08.gif" alt="" width="10" height= "44" />

<td><table width="870" border="0" cellpadding="0" cellspacing="0"></td>
<tr>
<div id="navigation">
		 <ul>											  
					<li><a href="index.html"title="EEb home page">Home</a></li>
					<li><a href="EEb ebooktitles.html"title="EEb ebook titles">Ebook titles</a></li>
										<li><a href="EEb free ebooks.html" title="EEb free ebooks">Free Ebooks</a></li>
					<li><a href="EEb Contact.html" title="EEb.com Contact and Site Help">Contact</a></li>
				</ul>	 
			
		 </div>
	   </tr>

<td><img src="index09.gif" alt="" width="10" height="44" /></td>

					
				<td>&nbsp;</td>
			<td class="bg4">&nbsp;</td>
		  <td>&nbsp;</td>
		 <tr>
			<td>&nbsp;</td>
			<td background="index17.gif">&nbsp;</td>
						
			<td bgcolor="#FFFFFF"><table width="730" border="0" cellspacing="0" cellpadding="0">
						
						<tr> <br /><center>   
			   <b><font color="#000000" size="5">Welcome to DRWEBEBOOKS</font></b> <br />
							<img alt= "www.drwebebooks.com (4K)" src="www.drwebebooks.com.gif" height="23" width="286" /></center><br />
			<center><font color="#FF0000" >   <b>Here you will find quality resources for all your eBook needs<br />
			  Sign up for free to gain access to all our resources
			  and get our free EBook and quarterly ebook
			  newsletter<br />
			  See below our growing list of quality ebooks for sale
			  at discount prices representing great value for money
			  and all backed up by a 30 day money back guarantee if
			  not to your full satisfaction</b></center></font>

			 
				<tr>
				  <td width="30"><img src="spacer.gif" alt="" width="30" height="24" /></td>
				</tr>

				<br /><br /> <br /><br /> <br /><br />

				   <b><font size="3" color= "#000000">EBooks to buy. . .</font></b></p>

						<ul>
						  <li>
							<p  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></p>
						  </li>

						  <li>
							<p  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></p>
						  </li>

						  <li>
							<p  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></p>
						  </li>

						  <li>
							<p  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></p>
						  </li>

						  <li>
							<p  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></p>
						  </li>

						  <li>
							<p  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></p>
						  </li>

						  <li>
							<p  align="left"
							style="margin-top: 15px"><font size="3"
							color="#000000"><b>GPS Autotracking</b>
							- Coming Soon!</font></p>
						  </li>
						</ul>

  <p  align="left" style="margin-top: 15px"><b><font size="3" color= "#000000">How to make money with EBooks. . .</font></b></p>

						<ul>
						  <li>
							<p  align="left"
							style="margin-top: 15px"><font size="3"
							color="#000000"><b><a target="_blank"
							href="http://www..com"><font color=
							"#0000FF">Making money with
							ebooks</font></a></b> -</font></p>
						  </li>
						</ul>

						<p  align="left" style=
						"margin-top: 15px"><b><font size="3" color=
						"#000000">Software . . .</font></b></p>

						<ul>
						  <li>
							<p  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></p>
						  </li>

						  <li>
							<p  align="left"
							style="margin-top: 15px"><font size="3"
							color="#000000"><b>DRWEBEBOOKS</b> -
							Coming Soon!</font></p>
						  </li>
						</ul>

						<p  align="left" style=
						"margin-top: 15px"><b><font size="3" color=
						"#000000">Membership Sites . .
						.</font></b></p>

						<ul>
						  <li>
							<p  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></p>
						  </li>
						   </ul>
					  

					<p style="text-align: center"><b><font size="4"
					color="#000000">More to Come!</font></b></p><br />

					<p>&nbsp; <a href="http://www.eminentlyebooks.com">www.eminentlyebooks.com</a></p>
				  </td>

				 
				<tr>
				  <td>&nbsp;</td>

				   </tr>
			  </table>
			</td>

			<td background="index18.gif">&nbsp;</td>

			<td>&nbsp;</td>
		  </tr>
		</table>

		<table width="100%" border="0" cellspacing="0" cellpadding="0">
		  <tr>
			<td class="bg5">&nbsp;</td>

			<td width="20"><img src="index20.gif" alt="" width="20"height="45" /></td>
<!--730--->
			<td width="770" valign="top" background="index21.gif">
			&nbsp;</td>

			<td width="20"><img src="index22.gif" alt="" width="20" height="45" /></td>

			<td class="bg6">&nbsp;</td>
		  </tr>

		  <tr>
			<td><img src="spacer.gif" alt="" width="1" height="1" /></td>

			<td colspan="3"><img src="index24.gif" alt="" width="830" height="14" /></td>
<!--770-->
			<td><img src="spacer.gif" alt="" width="1" height="1" /></td>
		  </tr>

		  <tr>
			<td>&nbsp;</td>

			<td colspan="3" align="center" class="text3">Copyright
			(c) 2009-2010 drwebebooks Enterprises. All rights
			reserved.</td>

			<td>&nbsp;</td>
		  </tr>
		</table>
	  </td>
	</tr>
  </table>
</body>
</html>



Thanks for your reply-This is driving me NUTS! I have spent hours & hours trying to fix this & learn css tables with no success yet.
I am most grateful for help please...
Was This Post Helpful? 0
  • +
  • -

#10 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1366
  • View blog
  • Posts: 3,443
  • Joined: 28-November 09

Re: Help with webpage navigation list (affecting table format)

Posted 20 December 2009 - 02:00 PM

CSS Tables? No...

Read these:

Basic HTML
http://www.dreaminco...howtopic=143221

Basic CSS
http://www.dreaminco...topic143632.htm

CSS Menus
http://www.dreaminco...howtopic=144613

NEVER use tables, period, until you can fully design a site in css/html, by then you should know their proper use. (Hint: it's for tabular data...)

Ditch frontpage asap, only use notepad to learn and it'll end far better for you. Only get into dreamweaver AFTER you know your code by heart, if you don't it becomes a crutch instead of a streamlining tool like it was intended to be.
Was This Post Helpful? 0
  • +
  • -

#11 rpd  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 65
  • Joined: 13-August 07

Re: Help with webpage navigation list (affecting table format)

Posted 20 December 2009 - 03:38 PM

[quote name='Lemur' date='20 Dec, 2009 - 01:00 PM' post='872347']
Hi Lemur
Thanks for your reply & tutorial links
I will try & fix my page code but I wonder if you have looked at it and can see what the errors are and can show me the correct code? That would be really helpful.
If anyone else would like to assist please do so (I am fairly sure this code can be fixed fairly easily by someone who knows about HTML & CSS? anyone?).

Again I look forward to replies & getting this code fixed, (meantime I will keep working on it and at the rate I'm making progress with this work my solution should be just ready for next Christmas...). Thanks
Was This Post Helpful? 0
  • +
  • -

#12 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1366
  • View blog
  • Posts: 3,443
  • Joined: 28-November 09

Re: Help with webpage navigation list (affecting table format)

Posted 20 December 2009 - 03:53 PM

Restart from scratch. Don't let yourself use any tables.
Was This Post Helpful? 0
  • +
  • -

#13 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: Help with webpage navigation list (affecting table format)

Posted 20 December 2009 - 09:01 PM

View Postrpd, on 20 Dec, 2009 - 03:38 PM, said:

Again I look forward to replies & getting this code fixed, (meantime I will keep working on it and at the rate I'm making progress with this work my solution should be just ready for next Christmas...). Thanks


Save your html file with a new name like ( name2.html ). Keep the original saved some where safe. This is in case you want to go back to what you had before.

In name2.html ( or what ever you have named it ) delete all of these tags:
<font></font>
<b></b>
<br>
<center></center>
Also delete any inline css like:
align="left"
style="margin-top: 15px"><font size="3"
color="#000000"

Replace all of these tags with <span><!-- replaced tag --></span>:
<table</table> becomes <span><!- table --> </span>
<tr></tr> becomes <span><!-- tr --> </span>
<td></td> becomes <span><!-- td --> </span>

You have an external style sheet.
<link href="default.css" rel="stylesheet" type="text/css" />


Place the code from that external style sheet in your inline style sheet.
<style type = "text/css">
styles from external style sheet
</style>


The internal style sheet is just to help with our view of your code.
One file with all html and css is easier to read. You can make your css external later.

Post your changed and unified name2.html file here in code tags to show the new design.
Do the above and me or some one else will have a better time of helping you.
After changing all those tags your page won't look close to the way you wanted. Just be patient and some one will help you with the css.
You may also want to zip your html file and images together, upload them as an attachment and add it to your post.
Was This Post Helpful? 0
  • +
  • -

#14 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1366
  • View blog
  • Posts: 3,443
  • Joined: 28-November 09

Re: Help with webpage navigation list (affecting table format)

Posted 21 December 2009 - 07:40 PM

spans or divs, depends on preference mainly though spans display inline and divs display block
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1