Bottom Bar underneath sidebar

awieds · 04-04-2005, 01:47 AM

I have the following page:
http://www.sygnet-tech.com/newsite/products.asp

Please take a look at the bottom bar. On my monitor (and everyone elses I've seen so far) The bottom bar goes from all the way to the left underneath the sidebar.
My boss has a wide screen. On his computer the bottome bar is right underneath the text (or on that page the graphics) on the main part and starting with the main, not underneath the sidebar. How can I fix this so that it always displays correctly?

Thanks

sde · 04-04-2005, 06:36 AM

just close your main table out, then put it in its own 100% width table. it should lay neatly under the table above it.

i highly recomend you download firefox if you don't have it. the site looks pretty bad in it. might just be a table cell you forgot to close or something.

i see you are currently working on it since there have been changes in the last hour, so i'm not going to view source since it might be something you're already working to do.

awieds · 04-04-2005, 10:25 PM

Thanks, I will try the tables now.
ABout Firefox, yes I downloaded it. I think it's my stylesheets that aren't formatting properly in Firefox. What can I do about that? Should I remove the stylesheets ans put it into tables? But then I need to do my whole sidebar on every page?

sde · 04-04-2005, 10:34 PM

i recommend using style sheets for the basic font formatting.

anything where you are using columns, i would recommend using a table. if you really like to use CSS, then just keep your tables to a minimum and only use it for your column layout.

if you can somehow cut that top graphic into 2 sections, then you could make the top scaleable to however wide (or thin) the user's computer is. the left side of the graphic would need to fade to a solid blue, or something that can tile. the right graphic would need to fade from that solid tile into whatever you want justified to the right.

here's an example of how the header might look, along with the columns of the nav/content, and the footer.

HTML Code:

<body>
<!-- here's the header -->
<table border=0 cellspacing=0 cellpadding=0 width=100%>
<tr>
  <td width=400><img src=images/top-left.jpg width=400></td>
  <td background=images/bg-tile.jpg>&nbsp;</td>
  <td align=right width=200><img src=images/top-right.jpg width=200></td>
</tr>
</table>

<!-- now for the content -->
<table border=0 cellspacing=0 cellpadding=0 width=100%>
<tr>
  <td width=150 align=top> here is my left bar</td>
  <td valign=top> here is my content>
</tr>
</table>

<!-- bottom bar to stretch allt he way across -->
<table border=0 cellspacing=0 cellpadding=0 width=100%>
<tr>
  <td align=center> my bottom bar </td>
</tr>
</table>

all this formatting would be supported across browsers, .. and you could go to town with the CSS on most everything else.

sde · 04-04-2005, 10:47 PM

this aint pretty, but here are 3 images which would work with the logic above to make your header tile across anyone's screen.

note: the right image is a different width than i put in the html code above.

awieds · 04-04-2005, 10:56 PM

Wow, thanks so much. I'm gonna try that. I have a small graphic for tiling on the right. Do I need one for the left too or can't I just tile to the right?

sde · 04-04-2005, 11:00 PM

well with your current graphic, you have strong left and right pieces, which means you would need to tile the middle.

if you modified the graphic, then you could put everything to the left, and make it fade to a tileable image, then just tile to the right ( like how we do here at code newbie )

the html would then go something like this:

HTML Code:

<!-- here's the header -->
<table border=0 cellspacing=0 cellpadding=0 width=100%>
<tr>
  <td width=400><img src=images/top-left.jpg width=400></td>
  <td background=images/top-tile.jpg>&nbsp;</td>
</tr>
</table>

did that answer your question?

awieds · 04-04-2005, 11:37 PM

Thanks I'll speakto the graphic designer and see what she can do. One more question, when I use tables there is a gap between the topbar and the top and the left bar and the left, there is some white space. Before I got rid of it with CSS, how else can I get rid of it now?
Thanks

awieds · 04-05-2005, 12:55 AM

The graphic designer will make the top bar smaller however what size should it be? Is there a standard length and then I can pattern the end from there?

sde · 04-05-2005, 05:42 AM

it doesn't necessarily have to be smaller in width, it just has to have an area that can tile.

i would recommend that the parts of the image that are not tiling don't add up to a width wider than 768 so you keep your 800x600 viewers happy. (not sure i did that on this site)

as for the border, add these to your CSS body attribute:

HTML Code:

body{
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px ;
}

that will take care of the padding.

awieds · 04-05-2005, 10:43 PM

Thanks for helping me out!

awieds · 04-06-2005, 06:08 AM

Ahhh! On the wide screen the bottom bar is still not displaying accureately! What could
be wrong????
Thanks

sde · 04-06-2005, 06:31 AM

it helps a lot when you post the code in question .. i viewed source of your page and see this at the bottom:

HTML Code:

<!--bottom bar-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<td align="center"><img src="images/home/pas-buttom.jpg" width="1004" height="53" /></td>
</table>

you have no <tr> </tr> tags in that table. maybe this is the problem?

one thing i recommend for debugging html tables is to set your border attribute to 1. i.e.

HTML Code:

<table border=1>

this will make it easy to figure out which table is causing the problem. then you can find the code to begin to modify easier.

sde · 04-06-2005, 06:48 AM

view source, .. you have style and head tags in the middle of your html body too. also, take the align="left" out of the navigation table.

after taking a look at it a little more, your bottom table is fine, you need to create an image that tiles and make it your background so you can fill in the color of the rest of it.

are you using a wysiwyg editor like dreamweaver? that is really garbling up the code. if you are planning on maintaining ASP or any other site driven by server-side technology, i would recommend getting very aquainted with html.

by viewing the source of your page, you could have easily found the multiple header tags.

i cleaned up your script. i took the css link out of there and just put everything in the style tag. either way is correct, i would just recommend sticking with one or the other.

i also made a background image that will tile on the bottom. you will notice a background attribute with an image in the bottom cell. this will only work if you upload the attached image to your website.

here's the source:

HTML Code:

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

  <title>Sygnet-Technologies</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

  <style type="text/css">
  body{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    padding: 0px;
    margin: 0px;
  }
  td {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
  }
  #mySideNav {
    border-right: 1px solid #000000;
  }
  #myTopNav {
    border-bottom:1px solid #000000;
  }
  a.side{
    text-decoration: none;
  }
  
  a.side:visited,a.side:link,a.side:active {
     color: black;
  }
  
  a.label{
    color:#0000FF;
    text-decoration: none;
  }
  </style>
</head>

<body>
<!--topbar-->
<table border=0 cellspacing=0 cellpadding=0 width=100%> 
<tr>
  <td width="784"><img src="images/Pas-top-new2.jpg" width="784" height="83" /></td>  
  <td background="images/pas-background.jpg">&nbsp;</td>
</tr>
</table>
  
<table cellspacing="0" cellpadding="0">
<tr>
  <td width=112><a href="http://www.sygnet-tech.com/newsite/index.asp"><img src="images/buttons/button home page.jpg" alt="Home" border=0 width=112 height=20></a></td>
  <td width=112><a href="http://www.sygnet-tech.com/newsite/aboutus.asp"><img src="images/buttons/button About Us.jpg" alt="About Us" border=0 width=112 height=20></a></td>
  <td width=112><a href="http://www.sygnet-tech.com/newsite/press.asp"><img src="images/buttons/button news.jpg" alt="News" border=0 width=112 height=20></a></td>
  <td width=112><a href="http://www.sygnet-tech.com/newsite/support.asp"><img src="images/buttons/button support.jpg" alt="Support" border=0 width=112 height=20></a></td>
  <td width=112><a href="http://www.sygnet-tech.com/newsite/partners.asp"><img src="images/buttons/button partners.jpg" alt="Partners" border=0 width=112 height=20></a></td>
  <td width=112><a href="http://www.sygnet-tech.com/newsite/products.asp"><img src="images/buttons/button product.jpg" alt="Products" border=0 width=112 height=20></a></td>
  <td width=112><a href="http://www.sygnet-tech.com/store/index.htm"><img src="images/buttons/button buy now.jpg" alt="Buy Now" border=0 width=112 height=20></a></td>
  <td width=112><a href="http://www.sygnet-tech.com/newsite/sitemap.asp"><img src="images/buttons/button site map.jpg" alt="Site Map" border=0 width=112 height=20></a></td>
  <td width=108><a href="http://www.sygnet-tech.com/newsite/contact.asp"><img src="images/buttons/button contact us.jpg" alt="Contact Us" border=0 width=108 heightt=20></a></td>
  <td><image src="images/buttons/pas-button.jpg"></td>
</tr>
</table>

<!--Content-->
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td width="220">
  
  <!-- side bar -->
  <table id="mySideNav" cellpadding="0" cellspacing="0">
    <tr><td><br></td></tr>
    <tr><td><b><font size="3" color="#0000FF"><a href="http://www.sygnet-tech.com/newsite/products.asp" class="label">&nbsp;&nbsp;Products</a></font></b></td></tr>
    <tr><td><br></td></tr>
    <tr><td><b><font size="2">&nbsp;&nbsp;Bluetooth Headsets</font></b></td></tr>
    <tr><td><font size="2"><a href="http://www.sygnet-tech.com/newsite/scala500.asp" class="side">&nbsp;&nbsp;Scala500</a></font></td></tr>
    <tr><td><font size="2"><a href="http://www.sygnet-tech.com/newsite/easyrider.asp" class="side">&nbsp;&nbsp;ScalaRider</a></font></td></tr>
    <tr><td><br /></td></tr>
    <tr><td><b><font size="2">&nbsp;&nbsp;Mobile Phone Headsets</font></b></td></tr>
    <tr><td><font size="2"><a href="http://www.sygnet-tech.com/newsite/walkandtalk.asp" class="side">&nbsp;&nbsp;Walk & Talk</a></font></td></tr>
    <tr><td><font size="2"><a href="http://www.sygnet-tech.com/newsite/radfree.asp" class="side">&nbsp;&nbsp;RadFree</a></font></td></tr>
    <tr><td><font size="2"><a href="http://www.sygnet-tech.com/newsite/headsets.asp" class="side">&nbsp;&nbsp;Headsets</a></font></td></tr>
    <tr><td><br /></td></tr>
    <tr><td><b><font size="2">&nbsp;&nbsp;Mobile Phone Accessories &nbsp;&nbsp;</font></b></td></tr>
    <tr><td><font size="2"><a href="http://www.sygnet-tech.com/newsite/cases.asp" class="side">&nbsp;&nbsp;Cases</a></font></td></tr>
    <tr><td><font size="2"><a href="http://www.sygnet-tech.com/newsite/chargers.asp" class="side">&nbsp;&nbsp;Chargers</a></font></td></tr>
    <tr><td><font size="2"><a href="http://www.sygnet-tech.com/newsite/panels.asp" class="side">&nbsp;&nbsp;Panels</a></font></td></tr>
    <tr><td><font size="2"><a href="http://www.sygnet-tech.com/newsite/beltclips.asp" class="side">&nbsp;&nbsp;Belt Clips</a></font></td></tr>
    <tr><td><font size="2"><a href="http://www.sygnet-tech.com/newsite/lanyards.asp" class="side">&nbsp;&nbsp;Lanyards</a></font></td></tr>
    <tr><td><br></td></tr>
    <tr><td><b><font size="3" color="#0000FF">&nbsp;&nbsp;About Us</font></b></td></tr>
    <tr><td><br></td></tr>
    <tr><td><font size="2"><a href="http://www.sygnet-tech.com/newsite/careers.asp" class="side">&nbsp;&nbsp;Carreer Opportunities</a></font></td></tr>
    <tr><td><font size="2"><a href="http://www.sygnet-tech.com/newsite/tradeshows.asp" class="side">&nbsp;&nbsp;Tradeshows</a></font></td></tr>
    <tr><td><font size="2"><a href="http://www.sygnet-tech.com/newsite/investors.asp" class="side">&nbsp;&nbsp;Investors</a></font></td></tr>
    <tr><td><font size="2"><a href="http://www.sygnet-tech.com/newsite/contact.asp" class="side">&nbsp;&nbsp;Contact Information</a></font></td></tr>
    <tr><td><br></td></tr>
    <tr><td><b><font size="3" color="#0000FF">&nbsp;&nbsp;News</font></b></td></tr>
    <tr><td><br></td></tr>
    <tr><td><font size="2"><a href="http://www.sygnet-tech.com/newsite/press.asp" class="side">&nbsp;&nbsp;Press Releases</a></font></td></tr>
    <!--<tr><td><font size="2">&nbsp;&nbsp;Sygnet in the News</font></td></tr>
    <tr><td><font size="2">&nbsp;&nbsp;Industry Links</td></tr>-->
    <tr><td><br></td></tr>
    <tr><td><b><font size="3" color="#0000FF">&nbsp;&nbsp;Support</font></b></td></tr>
    <tr><td><br></td></tr>
    <tr><td><font size="2"><a href="http://www.sygnet-tech.com/newsite/support.asp" class="side">&nbsp;&nbsp;Product Support</a></font></td></tr>
    <tr><td><font size="2"><a href="http://www.sygnet-tech.com/newsite/faq.asp" class="side">&nbsp;&nbsp;FAQ's</a></font></td></tr>
    <tr><td><br></td></tr>
    <tr><td><b><font size="3" color="#0000FF"><a href="http://www.sygnet-tech.com/newsite/partners.asp" class="label">&nbsp;&nbsp;Partners</a></font></b></td></tr>
    <tr><td><br></td></tr>
    <tr><td><font size="2"><a href="http://www.sygnet-tech.com/newsite/reseller.asp" class="side">&nbsp;&nbsp;Reseller Application</a></font></td></tr>
    <tr><td><font size="2">&nbsp;&nbsp;Where to Buy</font></td></tr>
    <tr><td><br></td>
  </tr>
  </table>
  
  <!-- end side bar -->

  </td>
  <td valign="top">
  <br>
  <p>
  Sygnet delivers unique off-the-shelf products to maximize mobile phone 
  users’&nbsp; talking pleasure.
  </p>
  <p>
  Enjoy Sygnet’s variety of products. We are constantly developing new 
  products to meet the growing needs of our customers.
  </p>
  <p>
  If you have additional questions about Sygnet’s products, check out 
  Sygnet ‘s Support Center - 
  <a href="http://www.sygnet-tech.com/newsite/faq.asp">Frequently Asked Questions page</a>
  or contact 
  Sygnet’s 
  <a href="mailto:info@sygnet-tech.com">
  customers service
  </a>.
  <br><br>
  

  <table>
    <tr>
    <td><a href="http://www.sygnet-tech.com/newsite/scala500.asp" ><img src="images/ProductsHome/scala-500.jpg" width="95" height="91" border="0" alt="Scala500"></a></td>
    <td><a href="http://www.sygnet-tech.com/newsite/easyrider.asp" ><img src="images/ProductsHome/scalarider.jpg" width="95" height="91" border="0" alt="ScalaRider"></a></td>
    <td><a href="http://www.sygnet-tech.com/newsite/walkandtalk.asp" ><img src="images/ProductsHome/walk-&-talk.jpg" width="95" height="91" border="0" alt="Walk & Talk"></a></td>
    <td><a href="http://www.sygnet-tech.com/newsite/radfree.asp" ><img src="images/ProductsHome/radfree.jpg" width="95" height="91" border="0" alt="RadFree"></a></td>
    <td><a href="http://www.sygnet-tech.com/newsite/headsets.asp" ><img src="images/ProductsHome/headsets.jpg" width="95" height="91" border="0" alt="Headsets"></a></td>
  </tr>
  <tr>
    <td><a href="http://www.sygnet-tech.com/newsite/cases.asp"><img src="images/ProductsHome/cases.jpg" width="95" height="91" border="0" alt="Cases"></a></td>
    <td><a href="http://www.sygnet-tech.com/newsite/chargers.asp"><img src="images/ProductsHome/chargers.jpg" width="95" height="91" border="0" alt="Chargers"></a></td>
    <td><a href="http://www.sygnet-tech.com/newsite/panels.asp"><img src="images/ProductsHome/panels.jpg" width="95" height="91" border="0" alt="Panels"></a></td>
    <td><a href="http://www.sygnet-tech.com/newsite/beltclips.asp"><img src="images/ProductsHome/belt-clips.jpg" width="95" height="91" border="0" alt="Belt Clips"></a></td>
    <td><a href="http://www.sygnet-tech.com/newsite/lanyards.asp"><img src="images/ProductsHome/lanyards.jpg" width="95" height="91" border="0" alt="Lanyards"></a></td>
    </tr>  
  </table>
  
  </td>
</tr>
</table>

<!--bottom bar-->
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
  <td align="center" background="images/bottom-bg.gif"><img src="images/home/pas-buttom.jpg" width="1004" height="53" /></td>
</tr>
</table>

</body>
</html>