March 7, 201016 yr Hello. I just joined this forum seeking a little help and guidance, I looked around for a request/help thread but could not find one. Tryed searching on google for a very long time on how to do this, just not my lucky day or i suck at google'ing, either way I need help! I have designed a website in photoshop, and exported in HTML and images, edited it with my information ect.. But, i don't know how to centre the layout.. I'm finding it hard to explain, sorry. The black is the background colour and the Gray striped is the bit I want centred so it fits every screen size. Any help? code: <html> <head> <title>Principal Hairdressing - home</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> img{border:none; margin:0; padding:0;} </style> </head> <body bgcolor="#00000" leftmargin="335" topmargin="0" marginwidth="335" marginheight="0"> <!-- Save for Web Slices (Untitled-3.psd) --> <table id="Table_01" width="1024" height="769" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="10"> <img src="images/Index_01.gif" width="1024" height="175" alt=""></td> </tr> <tr> <td colspan="2" rowspan="3"> <img src="images/Index_02.gif" width="174" height="90" alt=""></td> <td rowspan="2"> <a href="index.html" <img src="images/home.gif" width="150" height="46" alt=""></td></a> <td rowspan="3"> <img src="images/Index_04.gif" width="29" height="90" alt=""></td> <td rowspan="2"> <a href="salon.html" <img src="images/salon.gif" width="148" height="46" alt=""></td></a> <td colspan="5"> <img src="images/Index_06.gif" width="523" height="1" alt=""></td> </tr> <tr> <td rowspan="2"> <img src="images/Index_07.gif" width="25" height="89" alt=""></td> <td> <a href="services.html" <img src="images/services.gif" width="150" height="45" alt=""></td></a> <td rowspan="2"> <img src="images/Index_09.gif" width="26" height="89" alt=""></td> <td> <a href="contact.html" <img src="images/contact.gif" width="150" height="45" alt=""></td></a> <td rowspan="2"> <img src="images/Index_11.gif" width="172" height="89" alt=""></td> </tr> <tr> <td> <img src="images/Index_12.gif" width="150" height="44" alt=""></td> <td> <img src="images/Index_13.gif" width="148" height="44" alt=""></td> <td> <img src="images/Index_14.gif" width="150" height="44" alt=""></td> <td> <img src="images/Index_15.gif" width="150" height="44" alt=""></td> </tr> <tr> <td> <img src="images/Index_16.gif" width="8" height="503" alt=""></td> <td colspan="9"> <img src="images/Index_17.gif" width="1016" height="503" alt=""></td> </tr> <tr> <td> <img src="images/spacer.gif" width="8" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="166" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="150" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="29" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="148" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="25" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="150" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="26" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="150" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="172" height="1" alt=""></td> </tr> </table> <!-- End Save for Web Slices --> </body> </html>
March 7, 201016 yr give this a try <style type="text/css"> * {margin: 0; padding: 0; } img{border:none; margin:0 auto;} </style>
March 7, 201016 yr first of all, how come you are using a table layout? in answer to our question, you will need to have a div which all of your content will go into, and set a css property of #wrapper { margin: 0px auto; } (wrapper is the name i use)
March 7, 201016 yr Author I am very inexperienced in both HTML and CSS. I am not sure why Photoshop used tables really. Will that make the image centred and the background fit the computers resolution?
March 7, 201016 yr Author give this a try <style type="text/css"> * {margin: 0; padding: 0; } img{border:none; margin:0 auto;} </style> That worked, but it does not centre the images, there on the left. Thanks for all the reply's!
March 7, 201016 yr without a wrapper div it will be difficult try <style type="text/css"> * {margin: 0; padding: 0; } table {margin:0 auto;} td img{border:none; margin:0 auto;} </style>
March 8, 201016 yr Author without a wrapper div it will be difficult try <style type="text/css"> * {margin: 0; padding: 0; } table {margin:0 auto;} td img{border:none; margin:0 auto;} </style> I believe that did it! Thank you so much, i will rep++ if this forum has that option! Thank you to everyone else that helped!
Create an account or sign in to comment