Jump to content

Getting A Div Behind A Table


camdaddy09
 Share

Recommended Posts

ok heres my problem. i made a layout in photoshop and then modified it in fireworks than exported to dreamweaver. The layout has a header bar and a footer bar, those bars dont go all the way across the page, but i did get the header image to work. and i have a feeling i can use divs (or something idk) to put my footer image in and then put that behind the table that has my layout in it. so it gives the illusion of a solid bar extending across the entire page no matter what you screen resolution is. please help, if you need any more information just ask.thanks.

Link to comment
Share on other sites

How complicated is the site layout? By the time you've used Photoshop, Fireworks and Dreamweaver, from my experience you tend to have a very, very complicated stylesheet and hundreds of unnecessary elements on the page. Plus, you now have a table for your layout. This is bad for a number of reasons. If you can post the code here, or a screenshot of your layout, it might turn out being easier just redoing it by hand.

Link to comment
Share on other sites

How complicated is the site layout? By the time you've used Photoshop, Fireworks and Dreamweaver, from my experience you tend to have a very, very complicated stylesheet and hundreds of unnecessary elements on the page. Plus, you now have a table for your layout. This is bad for a number of reasons. If you can post the code here, or a screenshot of your layout, it might turn out being easier just redoing it by hand.
footer.jpg
Link to comment
Share on other sites

Doesn't look too complicated. Do you know much HTML/CSS or just how to tweak it in those programs?

Link to comment
Share on other sites

Well, it would definately be possible to fix the problem if I could see your code, but better would be a rewrite. Tables are a bad idea for layout for accessibility reasons, flexibility reasons, and styling reasons. Using the elements semantically is the best way to start - write the HTML with no CSS, just give everything the most appropriate tags. Then, style it later, adding as few extra elements as possible. It's nearly 3am here, so I'm off in a sec, but you can think whether you want just a fix to this problem (if it completes the site, then no one would blame you) or do a rewrite for the sake of nice, clean coding practises.

Link to comment
Share on other sites

Well, it would definately be possible to fix the problem if I could see your code, but better would be a rewrite. Tables are a bad idea for layout for accessibility reasons, flexibility reasons, and styling reasons. Using the elements semantically is the best way to start - write the HTML with no CSS, just give everything the most appropriate tags. Then, style it later, adding as few extra elements as possible. It's nearly 3am here, so I'm off in a sec, but you can think whether you want just a fix to this problem (if it completes the site, then no one would blame you) or do a rewrite for the sake of nice, clean coding practises.
I just want a fix to this problem, ive been redoing the design all day and i just really want to know if its possible, if it is id like to know how without deleting and doing a lot of editing and deleting.
Link to comment
Share on other sites

Well, post code and let's see :)

Link to comment
Share on other sites

Well, post code and let's see :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!-- saved from url=(0014)about:internet --><html xmlns="http://www.w3.org/1999/xhtml"><head><title>A touch of class</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">td img {display: block;}body { background-image: url(header_image.png); background-repeat: repeat-x;}#footer { background-image: url(footer_image.png); height: 75px;}</style><!--Fireworks CS3 Dreamweaver CS3 target. Created Wed Aug 26 17:40:48 GMT-0500 (CDT) 2009--><script language="JavaScript1.2" type="text/javascript"><!--function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document); if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;}function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}}//--></script></head><body bgcolor="#65b8f9" marginheight="0" leftmargin="0" onload="MM_preloadImages('images/A_touch_of_class2_r2_c2_f2.jpg','images/A_touch_of_class2_r2_c3_f2.jpg','images/A_touch_of_class2_r2_c4_f2.jpg','images/A_touch_of_class2_r2_c5_f2.jpg','images/A_touch_of_class2_r2_c6_f2.jpg','images/A_touch_of_class2_r2_c7_f2.jpg');"><table width="1024" border="0" align="center" cellpadding="0" cellspacing="0"> <!-- fwtable fwsrc="Untitled" fwpage="Page 1" fwbase="A_touch_of_class2.jpg" fwstyle="Dreamweaver" fwdocid = "346385877" fwnested="0" --> <tr> <td><img src="images/spacer.gif" width="52" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="90" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="90" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="90" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="104" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="114" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="134" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="350" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td> </tr> <tr> <td colspan="8"><img name="A_touch_of_class2_r1_c1" src="images/A_touch_of_class2_r1_c1.jpg" width="1024" height="121" border="0" id="A_touch_of_class2_r1_c1" alt="" /></td> <td><img src="images/spacer.gif" width="1" height="121" border="0" alt="" /></td> </tr> <tr> <td rowspan="2"><img name="A_touch_of_class2_r2_c1" src="images/A_touch_of_class2_r2_c1.jpg" width="52" height="968" border="0" id="A_touch_of_class2_r2_c1" alt="" /></td> <td><a href="java script:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('A_touch_of_class2_r2_c2','','images/A_touch_of_class2_r2_c2_f2.jpg',1);"><img name="A_touch_of_class2_r2_c2" src="images/A_touch_of_class2_r2_c2.jpg" width="90" height="44" border="0" id="A_touch_of_class2_r2_c2" alt="" /></a></td> <td><a href="java script:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('A_touch_of_class2_r2_c3','','images/A_touch_of_class2_r2_c3_f2.jpg',1);"><img name="A_touch_of_class2_r2_c3" src="images/A_touch_of_class2_r2_c3.jpg" width="90" height="44" border="0" id="A_touch_of_class2_r2_c3" alt="" /></a></td> <td><a href="java script:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('A_touch_of_class2_r2_c4','','images/A_touch_of_class2_r2_c4_f2.jpg',1);"><img name="A_touch_of_class2_r2_c4" src="images/A_touch_of_class2_r2_c4.jpg" width="90" height="44" border="0" id="A_touch_of_class2_r2_c4" alt="" /></a></td> <td><a href="java script:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('A_touch_of_class2_r2_c5','','images/A_touch_of_class2_r2_c5_f2.jpg',1);"><img name="A_touch_of_class2_r2_c5" src="images/A_touch_of_class2_r2_c5.jpg" width="104" height="44" border="0" id="A_touch_of_class2_r2_c5" alt="" /></a></td> <td><a href="java script:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('A_touch_of_class2_r2_c6','','images/A_touch_of_class2_r2_c6_f2.jpg',1);"><img name="A_touch_of_class2_r2_c6" src="images/A_touch_of_class2_r2_c6.jpg" width="114" height="44" border="0" id="A_touch_of_class2_r2_c6" alt="" /></a></td> <td><a href="java script:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('A_touch_of_class2_r2_c7','','images/A_touch_of_class2_r2_c7_f2.jpg',1);"><img name="A_touch_of_class2_r2_c7" src="images/A_touch_of_class2_r2_c7.jpg" width="134" height="44" border="0" id="A_touch_of_class2_r2_c7" alt="" /></a></td> <td rowspan="2"><img name="A_touch_of_class2_r2_c8" src="images/A_touch_of_class2_r2_c8.jpg" width="350" height="968" border="0" id="A_touch_of_class2_r2_c8" alt="" /></td> <td><img src="images/spacer.gif" width="1" height="44" border="0" alt="" /></td> </tr> <tr> <td colspan="6"><img name="A_touch_of_class2_r3_c2" src="images/A_touch_of_class2_r3_c2.jpg" width="622" height="924" border="0" id="A_touch_of_class2_r3_c2" alt="" /></td> <td><img src="images/spacer.gif" width="1" height="924" border="0" alt="" /></td> </tr> </table><!--Bottom border below the layout--><div class="footer" id="footer"></div></body></html>its a lot of junk because i needed rollover effects for my links at the top, and since i dont know javascript i used fireworks.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...