I've had a more traditional visual design background and not HTML programming and am trying to create a centred layout table when viewed on various browsers. I am using Dreamweaver 8 on a PC The problem I have is in order to keep the cells all fixed in width, I need an autostrectch cell on one side. This then creates spacers in all of the cells to keep them regular. However I then end up with the site on the left hand side of the screen and not centered. Any suggestions. Many thanks, Andy
give your table an ID that you can reference in your css file, then add this: #tableID { margin: auto; } this is will automatically change the margins on the right and left to keep the table centered.
Hi Gopher, thanks for this, is the text to be added to the html or is it a setting in the CSS? Many thanks
Do something like this in the HTML for your table: <table id="center"> Then, in the stylesheet, add: #center {margin: auto;}
Hi thanks for this, I think i'm a bit of a muppet when comes to HTML, I'm just not sure where it's all supposed to go, I've spent a few hours trying to work it out in a host of different places. I think my big mistake has been to create the website in the layout mode which seems not to take into account cell explosion and collapse when there is too much or nothing in the cells, it just throws everything all over the place. My background is visual, so it's a bit disappointing to find that I've probably done it the wrong way. It would be good if the empty cells could have the spacer images put in with a click of a button as opposed to only when autostrecth is used. Basically I can get the table to lay in the middel of the page under fixed dimensions but all of the cells do their own thing, which I now understand why. If there is an easy fix it would be good to know as I have spent quite some time on the site and is a pain to have to start all over again. I have copied the html below for the table and the main cells, I don't know if it makes things any more obvious where I'm going wrong. All thanks for your help. Andy <title>Driffold-home</title> <style type="text/css"> <!-- .style5 {font-size: smaller; color: #004080; font-weight: bold; font-family: Arial, Helvetica, sans-serif;} a:link { color: #1A3D68; text-decoration: none; } a:visited { color: #1A3D68; text-decoration: none; } a:active { color: #BBCEF2; text-decoration: none; } a:hover { text-decoration: none; color: #BBCEF2; } a { font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; } .style11 { font-size: 14px; color: #666666; font-family: Verdana, Arial, Helvetica, sans-serif; } body { background-color: #FFFFFF; } .style22 {color: #999999; font-family: Arial, Helvetica, sans-serif; font-size: smaller;} .style23 {font-size: smaller; color: #1A3D68; font-weight: bold; font-family: Arial, Helvetica, sans-serif; } .style24 { color: #333333; font-weight: bold; } .style27 { color: #B9B9B9; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight: bold; } .style28 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small; color: #666666; } .style34 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: medium; color: #1A3D68; font-weight: bold; } .style36 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small; color: #1A3D68; font-weight: bold; } --> </style> <script type="text/JavaScript"> <!-- 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 onload="MM_preloadImages('../Images/Rollovers/home2.jpg')"> <div align="center"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <!--DWLayoutTable--> <tr> <td height="19" colspan="22" valign="top" bgcolor="#FFFFFF"><img src="../Images/Others/spacer.gif" width="902" height="32" /></td> <td width="1"></td> </tr> <tr> <td width="100" rowspan="12" valign="top"><!--DWLayoutEmptyCell--> </td> <td height="100" colspan="2" valign="top"><!--DWLayoutEmptyCell--> </td> <td colspan="3" align="right" valign="middle" bgcolor="#FFFFFF"><div align="center"><img src="../Images/Gallery Logo/gallery logo shape LETTERS 100PX.jpg" width="80" height="100" border="0" /></div></td> <td width="22" valign="top"><!--DWLayoutEmptyCell--> </td> <td colspan="13" align="center" valign="middle" bgcolor="#FFFFFF"><img src="../Images/Gallery Logo/driffold gallery title 700PX.jpg" width="700" height="70" /></td> <td width="12" valign="top"><!--DWLayoutEmptyCell--> </td> <td width="100%" rowspan="12" align="center" valign="top" bgcolor="#FFFFFF"><!--DWLayoutEmptyCell--> </td> <td></td> </tr> <tr> <td height="29" colspan="20" valign="bottom" bgcolor="#FFFFFF"><!--DWLayoutEmptyCell--> </td> <td></td> </tr> <tr> <td width="5" height="19" valign="top" bgcolor="#E1E1E1"><!--DWLayoutEmptyCell--> </td> <td colspan="2" align="left" valign="middle" bgcolor="#DCE5E6" class="style5"><div align="center">Home</div></td> <td width="4" valign="top" bgcolor="#E1E1E1" class="style5"><!--DWLayoutEmptyCell--> </td> <td colspan="3" align="center" valign="middle" bgcolor="#FFFFFF" class="style5"><div align="center"><a href="specimens.html">Specimens</a> </div></td> <td width="4" valign="top" bgcolor="#E1E1E1"><!--DWLayoutEmptyCell--> </td> <td colspan="3" valign="middle" bgcolor="#FFFFFF" class="style5"><div align="center"><a href="invest.html" target="_parent">Invest & Enjoy</a> </div></td> <td width="4" valign="top" bgcolor="#E1E1E1"><!--DWLayoutEmptyCell--> </td> <td width="96" valign="middle" bgcolor="#FFFFFF"><div align="center" class="style5"><strong><a href="about.html" target="_parent">About Us</a></strong> </div></td> <td width="4" valign="top" bgcolor="#E1E1E1"><!--DWLayoutEmptyCell--> </td> <td colspan="3" align="center" valign="middle" bgcolor="#FFFFFF"><div align="center" class="style23"><a href="contact.html" target="_parent">Contact Us </a></div></td> <td width="4" valign="top" bgcolor="#E1E1E1"><!--DWLayoutEmptyCell--> </td> <td colspan="2" align="center" valign="middle" bgcolor="#FFFFFF" class="style22"><span class="style27">TREASURING QUALITY IMPORTANCE AND VALUE</span></td> <td></td> </tr>
Sorry to sound stupid, but if can get the table centred and with autostretch it seems that it will insert the spacers, keeping everything as it has been laid out an dget the table in th emiddle of the screen when viewed online. Please can you highlight the html above where the text goes. Also which part of the CSS to alter. AS I mentioned I'm from a visual background and am struggling with the very different way of working with Dreamweaver. Thanks a bundle, Andy
You're going to hate yourself for using tables for layout... It's much easier to manage and update with div tags. It will save you hours of headaches
Yes, using divs is a lot better. Also, I suggest that you stay away from using WYSIWYG (what you see is what you get) editors as once a problem comes up, it is hard to fix if you do not have previous knowledge of html and css.
thanks for these points. You are right, these issues have caused me hours of trouble and the WYSIWYG system with Dreamweaver really took me down the wrong street. I'm going to have to get up to speed on div tags and css as things have changed a lot from when I first built my website with Dreamweaver 4. I'm not sure there's much more I can do with the current site apart from autostretch to the right and let the site sit on the left side of the screen with allowance for most screen beingabout 1024 wide. thanks for the support, it's back to the drawing board for my next one.
If problem still persist, just provide link of your page and it will be far easy to suggest you the solution.