SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
Thread: Tables driving me crazy
-
Feb 20, 2009, 11:03 #1
- Join Date
- May 2006
- Location
- York, Uk
- Posts
- 916
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Tables driving me crazy
Ok... I'm writting this with my head about to melt - on this site -
http://pausetest.fastfreenet.com/ Ive been trying ato align the tetley banners with the Free delivery banner.
Now I did not opt to write this site in tables but I;m having to make a tweek
resentfully using tables which I havent done in a while. Here is the code for the page:
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Proposed Design - Links to Example Pages</title> <style type="text/css"> <!-- body { margin-left: 0px; margin-top: 0px; margin-right: 0px; } --> </style> <link href="resources/css/all.css" rel="stylesheet" type="text/css" /> <link href="css/global.css" rel="stylesheet" type="text/css" webWidget="true" /> <link href="resources/css/all.css" rel="stylesheet" type="text/css" webWidget="true" /> <script src="js/brainjar.js" type="text/javascript" webWidget="true"></script> </head> <body> <!-- General page structure is two main tables:- - A header table which contains the Company logo and navigation links using circular images - this table spans the whole page width - A body table which splits into two columns:- - this table is designed to fit in a 1024 wide screen and is centered - the left column is for the navigation that applies to the selected page - the right column is for the page content - Note the body table contains a footer row which contains the site wide links --> <!-- First heading table - An outer table set to 100% to fill the avaialble screen width - An inner table set to 966 and centered - this contains the company logo and the navigation links --> <!-- Start of outer heading table --> <table bgcolor="#712453" align="center" width="100%" border="0" cellspacing="0" cellpadding="0"> <tr valign="top"> <td><!-- Start of inner heading table --> <table bgcolor="#712453" align="center" width="985" border="0" cellspacing="0" cellpadding="0"> <tr valign="middle"> <td align="right" width="235"><a href="index.html" title="Click here to go to the pause home page"><img src="resources/images/logo.gif" width="207" height="103" vspace="6" border="0" /></a></td> <!-- Start of spacer column --> <td width="15"> </td> <!-- End of spacer column --> <td><!-- Start of table that contains top level navigation widgets, one of each main section of the website --> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <colgroup width="104"> </colgroup> <colgroup width="104"> </colgroup> <colgroup width="104"> </colgroup> <colgroup width="104"> </colgroup> <colgroup width="104"> </colgroup> <colgroup width="104"> </colgroup> <colgroup width="104"> </colgroup> <tr> <td align="center"><span widgetcategory="link_image_replace" widgetname="pause_topWhoWeAre" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/link_image_replace/pause_topWhoWeAre.htm" --> </span></td> <td align="center"><span widgetCategory="link_image_replace" widgetName="pause_topWhatWeDo" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/link_image_replace/pause_topWhatWeDo.htm" --> </span></td> <td align="center"><span widgetCategory="link_image_replace" widgetName="pause_topHappyCustomers" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/link_image_replace/pause_topHappyCustomers.htm" --> </span></td> <td align="center"><span widgetCategory="link_image_replace" widgetName="pause_topSayHello" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/link_image_replace/pause_topSayHello.htm" --> </span></td> <td align="center"><span widgetCategory="link_image_replace" widgetName="pause_topUsefulThings" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/link_image_replace/pause_topUsefulThings.htm" --> </span></td> <td align="center"><span widgetCategory="link_image_replace" widgetName="pause_toOnlineShopVisitor" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/link_image_replace/pause_toOnlineShopVisitor.htm" --> </span></td> <td align="center"><span widgetCategory="link_image_replace" widgetName="pause_toOnlineShopLoggedIn" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/link_image_replace/pause_toOnlineShopLoggedIn.htm" --> </span></td> <td align="center"><span widgetCategory="link_image_replace" widgetName="pause_topShowYouCare" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/link_image_replace/pause_topShowYouCare.htm" --> </span></td> </tr> </table> <!-- End of table that contains top level navigation widgets, one of each main section of the website --> </td> </tr> </table> <!-- End of inner heading table --> </td> </tr> </table> <!-- End of outer heading table --> <!-- White space table, which comprises : - A row with a blank image for spacing. --> <!-- Start of white space table --> <table align="center" width="985" border="0" cellspacing="0" cellpadding="0"> <tr valign="top"> <!-- Start of left hand column --> <td width="235"><img src="resources/images/1px_blank.gif" width="10" height="34" border="0" /></td> <!-- End of left hand column --> </tr> </table> <!-- End of white space table --> <!-- Main body table, which comprises : - A left hand colum which contains the navigation that is relevant to the selected page. - A space column to provide white space - A right hand column which contains the main page content. --> <!-- Start of main body table --> <table align="center" width="985" border="0" cellspacing="0" cellpadding="0"> <tr valign="top"> <!-- Start of left hand column --> <td width="235"><!-- Start of sub section navigation table --> <table align="center" width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="pageNavTopCell"><a class="pageNavTop" title="Click here to go back to the main on-line shop page" href="home.jsp">on-line shop...</a></td> </tr> <tr> <td valign="top"><!-- Start of table with page navigation links --> <table class="pageNavSub" bgcolor="#F0E9ED" width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><span widgetCategory="link_text" widgetName="pause_FAQs" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/link_text/pause_FAQs.htm" --> </span></td> <td width="15"><img src="resources/images/1px_blank.gif" alt="blank image for spacing" width="15" height="10" /></td> </tr> <tr> <td><span widgetCategory="link_text" widgetName="pause_login" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/link_text/pause_login.htm" --> </span></td> </tr> <tr> <td><span widgetCategory="logout_text" widgetName="pause" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/logout_text/pause.htm" --> </span><img src="resources/images/1px_blank.gif" width="10" height="2" /></td> </tr> </table> <!-- End of table with page navigation links --> </td> </tr> <tr> <td> </td> </tr> <tr> <td class="pageNavTopCell"><span widgetCategory="link_text_replace" widgetName="pause_catalogue" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/link_text_replace/pause_catalogue.htm" --> </span></td> </tr> <tr> <td><table bgcolor="#F0E9ED" width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><span widgetCategory="catalogue_root_list" widgetName="pause" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/catalogue_root_list/pause.htm" --> </span></td> <td width="15"><img src="resources/images/1px_blank.gif" alt="blank image for spacing" width="15" height="10" /></td> </tr> </table></td> </tr> <tr> <td> </td> </tr> <tr> <td class="pageNavTopCell"><span widgetCategory="link_text" widgetName="pause_myAccountTitle" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/link_text/pause_myAccountTitle.htm" --> </span></td> </tr> <tr> <td class="pageNavTopCell"><span widgetCategory="link_text" widgetName="pause_dontHaveProfileTitle" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/link_text/pause_dontHaveProfileTitle.htm" --> </span></td> </tr> <tr> <td><!-- Start of table with page navigation links --> <table class="pageNavSub" bgcolor="#F0E9ED" width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><span widgetCategory="link_text" widgetName="pause_newCustomer" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/link_text/pause_newCustomer.htm" --> </span></td> </tr> <tr> <td><span widgetCategory="link_text" widgetName="pause_existingCustomer" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/link_text/pause_existingCustomer.htm" --> </span></td> </tr> <tr> <td><span widgetCategory="link_text" widgetName="pause_basket" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/link_text/pause_basket.htm" --> </span></td> <td width="15"><img src="resources/images/1px_blank.gif" alt="blank image for spacing" width="15" height="10" /></td> </tr> <tr> <td><span widgetCategory="link_text" widgetName="pause_basketSaved" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/link_text/pause_basketSaved.htm" --> </span></td> </tr> <tr> <td><span widgetCategory="nested_navigation_bar" widgetName="pauseEnquiriesProducts" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/nested_navigation_bar/pauseEnquiriesProducts.htm" --> </span></td> </tr> <tr> <td><span widgetCategory="nested_navigation_bar" widgetName="pauseEnquiriesOrders" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/nested_navigation_bar/pauseEnquiriesOrders.htm" --> </span></td> </tr> <tr> <td></td> </tr> <tr> <td><span widgetCategory="nested_navigation_bar" widgetName="pauseEnquiriesInvoices" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/nested_navigation_bar/pauseEnquiriesInvoices.htm" --> </span></td> </tr> <tr> <td><span widgetCategory="nested_navigation_bar" widgetName="pauseEnquiriesTransactions" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/nested_navigation_bar/pauseEnquiriesTransactions.htm" --> </span></td> </tr> <tr> <td><span widgetCategory="link_text" widgetName="pause_details" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/link_text/pause_details.htm" --> </span></td> </tr> </table> <!-- End of table with page navigation links --> </td> </tr> <tr> <td><img src="resources/images/1px_blank.gif" alt="blank image for spacing" width="10" height="32" /></td> </tr> <tr> <td align="center"><a href="faq.jsp#payments" title="Click here for more information"><img src="resources/images/creditCardsSmall.gif" border="0" alt="Montage of accepted credit cards, Solo, Visa, Visa Electron, Mastercard, Maestro and JCB" /></a></td> </tr> </table> <!-- End of sub section navigation table --> </td> <!-- End of left hand column --> <!-- Start of spacer column --> <td width="15"><img src="resources/images/1px_blank.gif" width="15" height="10" /></td> <!-- End of spacer column --> <!-- Start of right hand column --> <td><!-- Start of table to contain main content for page --> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><!-- Start of table containing page title --> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="260"><img src="resources/images/pageTitle_onLineShop.gif" width="260" height="38" /></td> <td><img src="resources/images/1px_blank.gif" width="20" height="10" alt="blank image for spacing" /></td> <td valign="top"><img src="resources/images/call_us.gif" alt="image with text For phone orders give us a call on 01924 363091 or 01279 755251. We're ready and waiting from 8:30am to 5:30pm Mon - Fri!" width="452" height="28" /></td> <td><img src="resources/images/1px_blank.gif" width="2" height="10" alt="blank image for spacing" /></td> </tr> </table> <!-- End of table containing page title and logout --> </td> </tr> <tr> <td> </td> </tr> <tr> <td><!--Start of table for login and links to register for cash or credit acounts --> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="300" rowspan="2" valign="bottom"><img src="resources/images/login.gif" align="absbottom" width="105" height="22" /></td> <td width="408" class="titleText14Center">To order you'll need to create an online profile...</td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td width="300" valign="top"><!-- Start of table with login widget --> <table width="200" border="0" cellspacing="0" cellpadding="0"> <tr> <td><span widgetCategory="login" widgetName="pause" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteSVN/conf/login/pause.htm" --> </span></td> </tr> <tr> <td><img src="resources/images/caseSensitive.gif" alt="image with text case senstive" width="103" height="17" hspace="5" /></td> </tr> </table> <!-- End of table with login widget --> </td> <td width="400" valign="top"><!-- Start of table with widgets to link to both cash and credit account requests --> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><span widgetCategory="link_image_replace" widgetName="pause_requestCashAccount" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/link_image_replace/pause_requestCashAccount.htm" --> </span></td> <td><span widgetCategory="link_image_replace" widgetName="pause_requestCreditAccount" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/link_image_replace/pause_requestCreditAccount.htm" --> </span></td> </tr> </table> <!-- End of table with widgets to link to both cash and credit account requests --> </td> <td> </td> </tr> <tr> <td width="300"><img src="resources/images/1px_blank.gif" alt="blank image for spacing" width="10" height="20 " /> </td> <td width="400"> </td> <td> </td> </tr> </table> <table width =100%> <tr> <td><img src="resources/images/tetley_bag_offer.JPG" alt="click before offer ends!" img height="50" width="350" / align="left"></td> <td><img src="resources/images/tetley_bag_offer.JPG" alt="click before offer ends!" img height="50" width="350"/ align="left"></td> </tr> </table> <!--End of table for login and links to register for cash or credit acounts --> </td> </tr> <tr> <td align="left"><a href="faq.jsp" title="Click here for more information"><img src="resources/images/free_delivery_8.gif" alt="Enjoy free next working day delivery on all orders over £45. To mainland UK - Order taken before 3pm." width="716"/></a></td> </tr> <tr> <td><img src="resources/images/1px_blank.gif" alt="blank image for spacing" width="10" height="10 " /></td> </tr> <tr> <td><img src="resources/images/1px_blank.gif" alt="blank image for spacing" width="10" height="10" /></td> </tr> </table> <!-- End of table to contain main content for page --> </td> <!-- End of right hand column --> </tr> </table> <!-- End of main body table --> <!-- Footer table, which comprises : - A row to contain the dots to separate the main page content from the footer - A left hand colum which is empty but is there to match the spacing of the navigation that is relevant to the selected page. - A right hand column which contains the sitewide links. --> <!-- Start of footer table --> <table align="center" width="985" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="resources/images/1px_blank.gif" width="10" height="10" /> <tr> <td colspan="3"><img src="resources/images/footerDots.gif" width="985" height="7" vspace="3" /></td> </tr> <tr valign="top"> <!-- Start of left hand column --> <td width="235"><img src="resources/images/1px_blank.gif" width="235" height="5" /></td> <!-- End of left hand column --> <!-- Start of right hand column --> <td width="750"><!-- Start of table with footer links --> <table class="footerNav" width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="62"><span widgetCategory="link_text" widgetName="pause_home" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/link_text/pause_home.htm" --> </span></td> <td width="1"><img src="resources/images/footerDivider.gif" /></td> <td width="48"><span widgetCategory="link_text" widgetName="pause_press" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/link_text/pause_press.htm" --> </span></td> <td width="1"><img src="resources/images/footerDivider.gif" /></td> <td width="118"><span widgetCategory="link_text" widgetName="pause_largeOrganisations" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/link_text/pause_largeOrganisations.htm" --> </span></td> <td width="1"><img src="resources/images/footerDivider.gif" /></td> <td width="65"><span widgetCategory="link_text" widgetName="pause_brochure" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/link_text/pause_brochure.htm" --> </span></td> <td width="1"><img src="resources/images/footerDivider.gif" /></td> <td width="46"><span widgetCategory="link_text" widgetName="pause_legal" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/link_text/pause_legal.htm" --> </span></td> <td width="1"><img src="resources/images/footerDivider.gif" /></td> <td width="91"><span widgetCategory="link_text" widgetName="pause_promise" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/link_text/pause_promise.htm" --> </span></td> <td width="1"><img src="resources/images/footerDivider.gif" /></td> <td width="95"><span widgetCategory="link_text" widgetName="pause_showYouCare" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/link_text/pause_showYouCare.htm" --> </span></td> <td width="1"><img src="resources/images/footerDivider.gif" /></td> <td width="137"><span widgetCategory="link_text" widgetName="pause_copyright" type="WEB_ENABLER_WIDGET"> <!--#include virtual="file:///C|/Documents and Settings/Mike Bishop/My Documents/Customers/Aramark/QVSE/WebsiteToApprovedDesign/conf/link_text/pause_copyright.htm" --> </span></td> <td width="1"><img src="resources/images/footerDivider.gif" /></td> <td width="88"><img src="resources/images/1px_blank.gif" width="88" height="5" /></td> </tr> </table> <!-- End of table with footer links --> </td> <!-- End of right hand column --> </tr> </table> <!-- End of footer table --> </body> </html>
Any insights welcome...I have had a perfectly wonderful
evening, but this wasn't it-
Julius "GROUCHO" Marx - 1890-1977
http://www.davidclick.com
-
Feb 20, 2009, 17:29 #2
- Join Date
- Apr 2007
- Posts
- 36
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Change the table containing the two banners to:
Code:<table width="732" cellspacing="0" cellpadding="0" style="padding-bottom:14px;"> <tbody> <tr> <td><img src="resources/images/tetley_bag_offer.JPG" alt="click before offer ends!" img="" align="left" height="50" width="350"></td> <td><img src="resources/images/tetley_bag_offer.JPG" alt="click before offer ends!" img="" align="left" height="50" width="350"></td> </tr> </tbody> </table>
TaliaJ
-
Feb 21, 2009, 08:28 #3
- Join Date
- May 2006
- Location
- York, Uk
- Posts
- 916
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thank you so much :-) your solution worked. I agree about your other insights, the designer unfortunately has been very naughty using frames!
I have had a perfectly wonderful
evening, but this wasn't it-
Julius "GROUCHO" Marx - 1890-1977
http://www.davidclick.com
Bookmarks