Customizing ProductCart - Header navigation bar issue...

Print Page | Close Window

Header navigation bar issue...

Printed From: ProductCart E-Commerce Solutions
Category: ProductCart
Forum Name: Customizing ProductCart
Forum Description: Exchange messages with other users that are customizing ProductCart.
URL: https://forum.productcart.com/forum_posts.asp?TID=556
Printed Date: 23-November-2024 at 11:42pm
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com

Topic: Header navigation bar issue...

Posted By: Exuberance
Subject: Header navigation bar issue...
Date Posted: 14-December-2006 at 4:14pm

Hi,

Here's another reason why a designer shouldn't attempt programming...

I am working with the header file, and I am trying to place a left navigation bar in which advertisements and links to other areas of the web site will go. (I don't want the categories, etc. that product cart gives in their default folder, but rather three blocks in which I can place images.) Trying to accomplish this using tables in the header file in dreamweaver.

I need the catalogue data to sit to the right of this navigation bar, but when I upload and view, all of the produt cart catologue data falls underneath my navigation bar. It makes for a very long, very sparse web page. First the header, then my nav bar, underneath that all the catologue info and finally the footer data.

Has anyone run into this, and do you have a solution? I am sure it is something fairly easy for those in the know....just can't figure it out on this end, and been banging up against it for days and days.

Thanks for your help!

Jodi

P.S. Here's the code of the bar with my attempt at a left side navigation bar...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<%if pcv_PageName<>"" then%>
<title><%=pcv_PageName%></title>
<%end if%>
<%GenerateMetaTags()%>
<%Response.Buffer=True%>
<%
Set conlayout=Server.CreateObject("ADODB.Connection")
conlayout.Open scDSN
Set RSlayout = conlayout.Execute("Select * From layout Where layout.ID=2")
Set rsIconObj = conlayout.Execute("Select * From icons WHERE id=1")
%>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="ExuberanceStyleSheet.css" rel="stylesheet" type="text/css">
<link type="text/css" rel="stylesheet" href="pcStorefront.css" />
<style type="text/css">

</style>
</head>
<body>
<div align="center">
<table width="914" border="0" cellpadding="0" cellspacing="1" bgcolor="#453601">
    <tr>
      <td align="center"><img src="../../images/Christmas-Banner.gif" width="911" height="20"></td>
    </tr>
    <tr>
      <td height="96" valign="top" align="center">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
           <tr>
               <td align="left" valign="middle" bgcolor="#FFFFFF" style="padding-left:10px;"><img src="../../images/Exuberance-Linear-Logo-brow.gif" width="236" height="22" hspace="15"></td>
               <td align="right" valign="middle" bgcolor="#FFFFFF" style="padding-right:10px;">
                                    <span class="ToptitleBar"><span class="UltraTopLinks">
                                        <br>
                                        <a href="viewcontent.asp?idpage=5">body of knowledge</a><br>
                     <a href="viewContent.asp?idpage=18">organic & natural products</a><br>
                     <a href="viewcontent.asp?idpage=8">press</a><br>
                     <a href="viewcontent.asp?idpage=9">philosophy</a><b r>
                     <a href="viewCategories.asp">shop the boutique</a><br>
                                        <br>
                       </span></span>
            </td>
           </tr>
        </table>
      </td>
    </tr>
        <tr>
            <td width="100%" valign="top" bgcolor="#FFFFFF">
        <table width="144" border="0" cellpadding="0" cellspacing="0">
        
        <tr>
            <td width="144" height="79" valign="top"> < /td>
          </tr>
</table>
        <table width="144" border="0" cellpadding="0" cellspacing="0">
          
          <tr>
           <td width="144" height="64" valign="top"> < /td>
          </tr>
        </table>

Replies:

Posted By: netprofits
Date Posted: 14-December-2006 at 4:36pm

You aren't closing the left hand navigation column so all product cart's data will be right below your two content tables.

After your final table above, add a closing </td> to close the left column and then an opening <td> tag to start the Product Cart center column. You may want to check the original header.asp code to define this td tag since there are some CSS styles defined there, i.e. <td id="pcCenter">

-------------
NetProfits Internet Consulting

Certified ProductCart Developer

http://www.nicwebdesign.com" rel="nofollow - Our Site

Posted By: Exuberance
Date Posted: 14-December-2006 at 4:50pm

Thanks for the wonderfully quick response!

I've tried your suggestion, and something is definitely happening (and it is way more than I accomplished with all my trials and errors) but it isn't quite there yet, unfortunately...

The catologue content has moved up, (yeay) but it is now all placing itself to the very far right, (off the original page in fact), so that my web site is now about 3000 px wide. The web site l;ooks normal - it's jsut the inner content that has popped itself off to the right. Any ideas?

(Oh- and I can't tell you how much I appreciate your help!)

Jodi

Here's the new and improved code (you'l note I now have three boxes in the nav bar- but that is just a cosmetic change (intended to be anyway))

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<%if pcv_PageName<>"" then%>
<title><%=pcv_PageName%></title>
<%end if%>
<%GenerateMetaTags()%>
<%Response.Buffer=True%>
<%
Set conlayout=Server.CreateObject("ADODB.Connection")
conlayout.Open scDSN
Set RSlayout = conlayout.Execute("Select * From layout Where layout.ID=2")
Set rsIconObj = conlayout.Execute("Select * From icons WHERE id=1")
%>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="ExuberanceStyleSheet.css" rel="stylesheet" type="text/css">
<link type="text/css" rel="stylesheet" href="pcStorefront.css" />
<style type="text/css">

</style>
</head>
<body>
<div align="center">
<table width="914" border="0" cellpadding="0" cellspacing="1" bgcolor="#453601">
    <tr>
      <td align="center"><img src="../../images/Christmas-Banner.gif" width="911" height="20"></td>
    </tr>
    <tr>
      <td height="96" valign="top" align="center">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
           <tr>
               <td align="left" valign="middle" bgcolor="#FFFFFF" style="padding-left:10px;"><img src="../../images/Exuberance-Linear-Logo-brow.gif" width="236" height="22" hspace="15"></td>
               <td align="right" valign="middle" bgcolor="#FFFFFF" style="padding-right:10px;">
                                    <span class="ToptitleBar"><span class="UltraTopLinks">
                                        <br>
                                        <a href="viewcontent.asp?idpage=5">body of knowledge</a><br>
                     <a href="viewContent.asp?idpage=18">organic & natural products</a><br>
                     <a href="viewcontent.asp?idpage=8">press</a><br>
                     <a href="viewcontent.asp?idpage=9">philosophy</a><b r>
                     <a href="viewCategories.asp">shop the boutique</a><br>
                                        <br>
                       </span></span>
            </td>
           </tr>
        </table>
      </td>
    </tr>
        <tr>
            <td width="100%" valign="top" bgcolor="#FFFFFF">        <table width="199" border="0" cellpadding="0" cellspacing="0">
        
        <tr>
            <td width="199" height="55" valign="top" bgcolor="#33CCCC">&nbsp ;</td>
          </tr>
</table>
        <table width="199" border="0" cellpadding="0" cellspacing="0">
          
          <tr>
           <td width="199" height="65" valign="top" bgcolor="#0000FF">&nbsp ;</td>
          </tr>
          <tr>
           <td height="58" valign="top"><table width="199" border="0" cellpadding="0" cellspacing="0">
               
               <tr>
                 <td width="199" height="58" valign="top" bgcolor="#3300CC">&nbsp ;</td>
               </tr>
           </table></td>
          </tr>
        </table></td>
            <td>

Posted By: netprofits
Date Posted: 14-December-2006 at 4:53pm

Hi Jodi, can you post your URL so I can look at the source code of the live page?

-------------
NetProfits Internet Consulting

Certified ProductCart Developer

http://www.nicwebdesign.com" rel="nofollow - Our Site

Posted By: Exuberance
Date Posted: 14-December-2006 at 4:57pm

I'd love too...but it's not yet live. Can I email you directly the link and info to access the working page so you can take a peek?

Scratch that last post...I'm giving my inexperience away! Here's the link to one of the pages.

http://exuberanceb.web121.discountasp.net/store/pc/viewConte nt.asp?idpage=5

Posted By: netprofits
Date Posted: 14-December-2006 at 4:58pm

Actually I think I see the problem...you're closing the whole table at the bottom of the file when you should only be closing the left column.

Remove this code from the bottom:

</tr>
</table></td>
so that your code looks like this:

td height="58" valign="top"><table width="199" border="0" cellpadding="0" cellspacing="0">
               
               <tr>
                 <td width="199" height="58" valign="top" bgcolor="#3300CC">&nbsp ;</td>
               </tr>
           </table></td>
           <td>

-------------
NetProfits Internet Consulting

Certified ProductCart Developer

http://www.nicwebdesign.com" rel="nofollow - Our Site

Posted By: Exuberance
Date Posted: 14-December-2006 at 5:23pm

Hi...

Waiting with baited breath hoping you don't get tired of this puzzle...!

I tried the above, but everything moved down from the top and I was left with big gaps. Also, the footer file isn't showing up correctly now. Next, I tried putting in new tables and then doing the same thing; but now both items have shifted over the left. Here's the link...

http://exuberanceb.web121.discountasp.net/store/pc/viewConte nt.asp?idpage=5

and here is the code.(I'm hoping you're the tenacious sort... !!!)

Jodi

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<%if pcv_PageName<>"" then%>
<title><%=pcv_PageName%></title>
<%end if%>
<%GenerateMetaTags()%>
<%Response.Buffer=True%>
<%
Set conlayout=Server.CreateObject("ADODB.Connection")
conlayout.Open scDSN
Set RSlayout = conlayout.Execute("Select * From layout Where layout.ID=2")
Set rsIconObj = conlayout.Execute("Select * From icons WHERE id=1")
%>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="ExuberanceStyleSheet.css" rel="stylesheet" type="text/css">
<link type="text/css" rel="stylesheet" href="pcStorefront.css" />
<style type="text/css">

</style>
</head>
<body>
<div align="center">
<table width="914" border="0" cellpadding="0" cellspacing="1" bgcolor="#453601">
    <tr>
      <td align="center"><img src="../../images/Christmas-Banner.gif" width="911" height="20"></td>
    </tr>
    <tr>
      <td height="96" valign="top" align="center">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
           <tr>
               <td align="left" valign="middle" bgcolor="#FFFFFF" style="padding-left:10px;"><img src="../../images/Exuberance-Linear-Logo-brow.gif" width="236" height="22" hspace="15"></td>
               <td align="right" valign="middle" bgcolor="#FFFFFF" style="padding-right:10px;">
                                    <span class="ToptitleBar"><span class="UltraTopLinks">
                                        <br>
                                        <a href="viewcontent.asp?idpage=5">body of knowledge</a><br>
                     <a href="viewContent.asp?idpage=18">organic & natural products</a><br>
                     <a href="viewcontent.asp?idpage=8">press</a><br>
                     <a href="viewcontent.asp?idpage=9">philosophy</a><b r>
                     <a href="viewCategories.asp">shop the boutique</a><br>
                                        <br>
                       </span></span>
            </td>
           </tr>
      </table>      </td>
    </tr>
        <tr>
            <td width="199" valign="top" bgcolor="#FFFFFF"><tr><td height="58" valign="top"> < /td>
           <td>
        <table width="199" border="0" cellpadding="0" cellspacing="0">
          
          <tr>
           <td width="199" height="55" valign="top"><div align="left"><img src="../../images/beautyblog.gif" width="216" height="50"></div></td>
          </tr>
          <tr>
           <td height="49" valign="top"><table width="224" border="0" cellpadding="0" cellspacing="0">
               
               <tr>
                 <td width="199" height="48" valign="top" bgcolor="#99CC00">&nbsp ;</td>
               </tr>
           </table></td>
        <td>

Posted By: netprofits
Date Posted: 14-December-2006 at 5:51pm

You have one table (with several tabes nested inside of that). The top and bottom rows only have one column but your center row has two columns. That is throwing everything off. Also the total width of your center row is wider then the top or bottom rows.

You can do two things:
1. Make sure you use colspan="2" in the top and bottom rows so they coordinate with the center row.
2. Split it into three tables. One for the banner section on top, one for the content area including the left navigation, and one for the footer area.

Hope this helps.

-------------
NetProfits Internet Consulting

Certified ProductCart Developer

http://www.nicwebdesign.com" rel="nofollow - Our Site