Hi all, I've tried going through tutorials to get my web pages centered using an external css style sheet, but only the banner and nav bar get centered, the images don't Please can anyone look at my website and see whether there is a simple way for me to get the pages centered in the browser instead of being on the left hand side? I'll post the code for the home page. The web address is: www.simonspetportraits.co.uk Thanks.
<!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>Pet Portraits - Dog and Cat portraits in Pastel</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> td img {display: block;}.style1 {color: #597CB4} #Layer1 {position:absolute; left:136px; top:126px; width:166px; height:421px; z-index:1; } #Layer2 {position:absolute; left:330px; top:126px; width:392px; height:421px; z-index:2; } #Layer3 {position:absolute; left:11px; top:577px; width:280px; height:195px; z-index:3; } #Layer4 {position:absolute; left:306px; top:578px; width:150px; height:206px; z-index:4; } #Layer5 { position:absolute; left:467px; top:579px; width:244px; height:179px; z-index:5; background-color: 2; } #Layer6 { position:absolute; left:467px; top:566px; width:0px; height:11px; z-index:5; } #Layer7 { position:absolute; left:468px; top:579px; width:243px; height:179px; z-index:6; } </style> <!--Fireworks 8 Dreamweaver 8 target. Created Thu May 15 21:21:44 GMT+0100 (GMT Standard Time) 2008--> <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_nbGroup(event, grpName) { //v6.0 var i,img,nbArr,args=MM_nbGroup.arguments; if (event == "init" && args.length > 2) { if ((img = MM_findObj(args[2])) != null && !img.MM_init) { img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src; if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array(); nbArr[nbArr.length] = img; for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args)) != null) { if (!img.MM_up) img.MM_up = img.src; img.src = img.MM_dn = args[i+1]; nbArr[nbArr.length] = img; } } } else if (event == "over") { document.MM_nbOver = nbArr = new Array(); for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args)) != null) { if (!img.MM_up) img.MM_up = img.src; img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])?args[i+1] : img.MM_up); nbArr[nbArr.length] = img; } } else if (event == "out" ) { for (i=0; i < document.MM_nbOver.length; i++) { img = document.MM_nbOver; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; } } else if (event == "down") { nbArr = document[grpName]; if (nbArr) for (i=0; i < nbArr.length; i++) { img=nbArr; img.src = img.MM_up; img.MM_dn = 0; } document[grpName] = nbArr = new Array(); for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args)) != null) { if (!img.MM_up) img.MM_up = img.src; img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up; nbArr[nbArr.length] = img; } } } 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/basic page_r2_c2_f3.gif','images/basic page_r2_c2_f2.gif','images/basic page_r3_c2_f3.gif','images/basic page_r3_c2_f2.gif','images/basic page_r4_c2_f3.gif','images/basic page_r4_c2_f2.gif','images/basic page_r5_c2_f3.gif','images/basic page_r5_c2_f2.gif','images/basic page_r7_c2_f3.gif','images/basic page_r7_c2_f2.gif')"> <div id="Layer6"></div> <div id="Layer7"><img src="images/Dog4.jpg" alt="Dog2" width="280" height="178" border="1" /></div> <table border="0" cellpadding="0" cellspacing="0" width="700"> <!-- fwtable fwsrc="basic page.png" fwbase="basic page.gif" fwstyle="Dreamweaver" fwdocid = "118679524" fwnested="0" --> <tr> <td><img src="images/spacer.gif" width="2" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="107" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="591" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td> </tr> <tr> <td colspan="3"><img name="basicpage_r1_c1" src="images/basic page_r1_c1.gif" width="700" height="136" border="0" id="basicpage_r1_c1" alt="" /></td> <td><img src="images/spacer.gif" width="1" height="136" border="0" alt="" /></td> </tr> <tr> <td rowspan="7"><img name="basicpage_r2_c1" src="images/basic page_r2_c1.gif" width="2" height="414" border="0" id="basicpage_r2_c1" alt="" /></td> <td><a href="index.html" target="_top" onclick="MM_nbGroup('down','navbar1','basicpage_r2_c2','images/basic page_r2_c2_f3.gif',1)" onmouseover="MM_nbGroup('over','basicpage_r2_c2','images/basic page_r2_c2_f2.gif','images/basic page_r2_c2_f3.gif',1)" onmouseout="MM_nbGroup('out');"><img name="basicpage_r2_c2" src="images/basic page_r2_c2.gif" width="107" height="30" border="0" id="basicpage_r2_c2" alt="" /></a></td> <td rowspan="7"><div id="Layer1"> <p class="style1">INTRODUCTION</p> <p>Artist Simon Davies creates high quality pet portraits from photographs using soft pastels. He specializes in capturing a perfect likeness of your pet in a style that brings out its beauty. </p> <p>Any kind of pet can be the subject of a portrait ranging from cats and dogs to the more exotic.</p> </div> <div id="Layer2"><img src="images/toby3.jpg" alt="dog portrait" width="394" height="424" border="1" /></div></td> <td><img src="images/spacer.gif" width="1" height="30" border="0" alt="" /></td> </tr> <tr> <td><a href="pet_portraits_from_photographs.html" target="_top" onclick="MM_nbGroup('down','navbar1','basicpage_r3_c2','images/basic page_r3_c2_f3.gif',1)" onmouseover="MM_nbGroup('over','basicpage_r3_c2','images/basic page_r3_c2_f2.gif','images/basic page_r3_c2_f3.gif',1)" onmouseout="MM_nbGroup('out');"><img name="basicpage_r3_c2" src="images/basic page_r3_c2.gif" width="107" height="30" border="0" id="basicpage_r3_c2" alt="" /></a></td> <td><img src="images/spacer.gif" width="1" height="30" border="0" alt="" /></td> </tr> <tr> <td><a href="pet_portrait_pricing.html" target="_top" onclick="MM_nbGroup('down','navbar1','basicpage_r4_c2','images/basic page_r4_c2_f3.gif',1)" onmouseover="MM_nbGroup('over','basicpage_r4_c2','images/basic page_r4_c2_f2.gif','images/basic page_r4_c2_f3.gif',1)" onmouseout="MM_nbGroup('out');"><img name="basicpage_r4_c2" src="images/basic page_r4_c2.gif" width="107" height="30" border="0" id="basicpage_r4_c2" alt="" /></a></td> <td><img src="images/spacer.gif" width="1" height="30" border="0" alt="" /></td> </tr> <tr> <td><a href="people_portraits.html" target="_top" onclick="MM_nbGroup('down','navbar1','basicpage_r5_c2','images/basic page_r5_c2_f3.gif',1)" onmouseover="MM_nbGroup('over','basicpage_r5_c2','images/basic page_r5_c2_f2.gif','images/basic page_r5_c2_f3.gif',1)" onmouseout="MM_nbGroup('out');"><img name="basicpage_r5_c2" src="images/basic page_r5_c2.gif" width="107" height="30" border="0" id="basicpage_r5_c2" alt="" /></a></td> <td><img src="images/spacer.gif" width="1" height="30" border="0" alt="" /></td> </tr> <tr> <td><img name="basicpage_r6_c2" src="images/basic page_r6_c2.gif" width="107" height="1" border="0" id="basicpage_r6_c2" alt="" /></td> <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td> </tr> <tr> <td><a href="contact_portrait_artist.html" target="_top" onclick="MM_nbGroup('down','navbar1','basicpage_r7_c2','images/basic page_r7_c2_f3.gif',1)" onmouseover="MM_nbGroup('over','basicpage_r7_c2','images/basic page_r7_c2_f2.gif','images/basic page_r7_c2_f3.gif',1)" onmouseout="MM_nbGroup('out');"><img name="basicpage_r7_c2" src="images/basic page_r7_c2.gif" width="107" height="30" border="0" id="basicpage_r7_c2" alt="" /></a></td> <td><img src="images/spacer.gif" width="1" height="30" border="0" alt="" /></td> </tr> <tr> <td><img name="basicpage_r8_c2" src="images/basic page_r8_c2.gif" width="107" height="263" border="0" id="basicpage_r8_c2" alt="" /></td> <td><img src="images/spacer.gif" width="1" height="263" border="0" alt="" /></td> </tr> </table> <div id="Layer3"><img src="images/dogs2.jpg" alt="portrait of dogs" width="280" height="195" border="1" /></div> <div id="Layer4"><img src="images/cat3.jpg" alt="cat portrait" width="150" height="206" border="1" /></div> <p> </p> <p> </p> </body> </html>
You're going to hate me for this, but my advice is to throw that code out the airlock of the International Space Station and start over from scratch with clean, minimal, semantic and valid markup that separates the structure and content from its appearance. (By the way, beautiful portraits. They're lovely and very well done. Do you ship those to the States by any chance?)
I agree with Dan Schulz, that code is quite messy and hard to read in the first place. But, if you must, just put a <div align="center"> just after the <body> tag, and a </div> just above the </body> tag.
No that's the worst thing to do it actually - I'm not sure if that even works properly. The proper way to center a site is to put all your body into "wrapper" div and assign this css attribute to it: By the way, Dan Schulz is right - throw out the whole code and make t simple, clean and semantic - I'll demonstrate a simple semantic css layout your site could use. Give me a minute.
As I've promised, bellow is a simple semantic valid CSS layout that would suit your website perectly Here goes the example index.html file: Here goes stylesheet (style.css in this sample): Of course you'll need to modify it a bit to bit your site... but you need just to edit dimensions and such - other than that it's ready for your website One more thing: I would throw out also the whole sidebar javascript code and make it simple and valid using CSS. If you don't know how to do something, send me a pm, I will put it together for you.
Not bad, risoknop. I'd drop the comments (the ID and classnames are meaningful and semantic, so if you indent your code, there'll be no need for them; plus comments like that can cause problems with floats in IE 5.x and 6). I'd also drop the minimum width and declared width to 750px so that printers can print the entire Web page without requiring a special printer stylesheet (though I still recommend using one, of course). One other thing I'd do is declare the media type in the link element by adding media="screen,projection" so that it's limited to the traditional browser screen (and so Opera uses the same stylesheet when in full screen mode since it uses the projection media in that setting).
Thanks for the code. I'll have a try at re doing the site with it when I get time. Thanks, I tried that but it just seemed to move the banner and nav bar into the center, but not the images or txt.
Thanks, I'm sure I could ship one to the states no problem I realized the code was probably very messy and not very well structured, but I created the site in Dreamweaver and as a beginner didn't even look at the code much! I'll probably pay to get a more professional looking site done eventually.