HTML Help

WomenOnGuard · Joined: 22 Sep 2008 Posts: 8

I am trying to add links on the left side of my product pages for each category. I want to add the specific product links under where I have a "join email list" button. I have followed what is currently there for other links but when I put the html in the header box at the top of the page that describes the category, so to speak, and the products shift to the far right and I end up with a large pink screen. This is what I put in:

<table width="100%" border="0" cellpadding="0" cellspacing="0"><img src="images/spacer.gif" width="1" height="4"><br><tr><td height="17"><a href="http://store.womenonguard.com/-strse-815/solar-radio-flashlight-emergency/Detail.bok" class="nav">Solar Radio Flashlight</a></td>
</tr></table>

My website is womenonguard.com if you want to view source. Thanks

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1402 Location: Biloxi, MS

You have tables nested within table and trying to add another nested table which does not follow the previous links table at all. Makes for getting your layout to behave very hard.

Some CSS Errors.

Lots of HTML Errors.

WomenOnGuard · Joined: 22 Sep 2008 Posts: 8

Thanks, not sure what to do about all the errors but will give it a good look and check in to making the changes as necessary.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1402 Location: Biloxi, MS

Aside from the fact that tables are a no-no today for using as a page layout, your links should be setup in an unordered list to make them more Search Engine friendly. It's not an absolute requirement to put links in a list, but does help.

WomenOnGuard · Joined: 22 Sep 2008 Posts: 8

Not sure what you mean by an unordered list. I am very, very new to html, tables etc. My website was setup by a company called Website Pros, now called Web.com. I have been teaching myself just by going on what they had done when they set up my site. I have been studying the html and learning on this site. Search engine friendly is what I have been trying to do with the site. I am getting bits and pieces of knowledge here and there on optimizing my site. Just thought the list of the product detail pages would help in each category. So, what do you mean by an unordered list?

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1402 Location: Biloxi, MS

Converting this (one example):
Code: <table width="100%" border="0" cellpadding="0" cellspacing="0">

<tr>
<td height="19"><a href="https://store.womenonguard.com/Search.bok?category=Mace Defensive Sprays" title="">Buy Mace Products</a></td>
</tr>

<tr>
<td height="17"><a href="https://store.womenonguard.com/Search.bok?category=Pepper Sprays" title="">Buy Pepper Spray</a></td>
</tr>

<tr>
<td height="17"><a href="https://store.womenonguard.com/Search.bok?category=Stun Devices" title="">Buy Stun Gun</a></td>
</tr>

<tr>
<td height="17"><a href="https://store.womenonguard.com/Search.bok?category=Personal Alarms" title="">Personal Alarms </a></td>
</tr>

<tr>
<td height="17" title=""><a href="https://store.womenonguard.com/Search.bok?category=Home+Protection" title="">Home Protection</a></td>
</tr>

<tr>
<td height="17"><a href="https://store.womenonguard.com/Search.bok?category=Tasers" title="">Buy Taser Products</a></td>
</tr>

<tr>
<td height="17"><a href="https://store.womenonguard.com/Search.bok?category=Surveillance" title="">Hidden Cameras</a></td>
</tr>

<tr>
<td height="17"><a href="https://store.womenonguard.com/Search.bok?category=Other Products" title="">Other Products</a></td>
</tr>
</table>

To this:

Code: <ul>
<li><a class="nav" href="https://store.womenonguard.com/Search.bok?category=Mace Defensive Sprays" title="Buy Mace Products">Buy Mace Products</a></li>
<li><a class="nav" href="https://store.womenonguard.com/Search.bok?category=Pepper Sprays" title="Buy Pepper Spray">Buy Pepper Spray</a></li>
<li><a class="nav" href="https://store.womenonguard.com/Search.bok?category=Stun Devices" title="Buy Stun Gun">Buy Stun Gun</a></li>
<li><a class="nav" href="https://store.womenonguard.com/Search.bok?category=Personal Alarms" title="Personal Alarms">Personal Alarms</a></li>
<li><a class="nav" href="https://store.womenonguard.com/Search.bok?category=Home+Protection" title="Home Protection">Home Protection</a></li>
<li><a class="nav" href="https://store.womenonguard.com/Search.bok?category=Tasers" title="Buy Taser Products">Buy Taser Products</a></li>
<li><a class="nav" href="https://store.womenonguard.com/Search.bok?category=Surveillance" title="Hidden Cameras">Hidden Cameras</a></li>
<li><a class="nav" href="https://store.womenonguard.com/Search.bok?category=Other Products" title="Other Products">Other Products</a></li>
</ul>

If you don't like the bullets, those can be removed very easily with CSS: list-style-type: none;

Adding the title="" attribute to your link tags provides that nice little popup tooltip description of link on a mouseover.

WomenOnGuard · Joined: 22 Sep 2008 Posts: 8

Thanks Ron! I recall seeing some of that code somewhere in the site. Cannot remember exactly where right off hand. Will check it out. That will be a task to take on. Should I just do the home page like that? Or all of the pages? I appreciate your help.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1402 Location: Biloxi, MS

You're welcome. All pages should be done the same if you have the same nav menu on all of them. I would like to see you get rid of the tables, but you may not want to take that on yet of converting from tables to div/css only.

Just post back when you need some help.

WomenOnGuard · Joined: 22 Sep 2008 Posts: 8

I am not experienced enough in html to take that on. Sounds like I might have to hire someone for that. Thanks again!

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1402 Location: Biloxi, MS

It would be a good way to learn by using this forum to work on a test home page first until you have the hang of it. Would save hiring someone, but either way, have fun and beware of so-called "web designers". :)