www.webdeveloper.com
Page 1 of 3 123 LastLast
Results 1 to 15 of 43

Thread: How do I centre a webpage?

Hybrid View

  1. #1
    Join Date
    Oct 2009
    Location
    urgh! sometimes even he doesn't know :S
    Posts
    12

    How do I centre a webpage?

    Hello everyone

    My first post here...

    I am planning on building a website to refer prospective clients to, and at the moment it is under construction.

    I'm planning on building the site myself with either plain old HTML, or Dw (DreamWeaver). I have access to Dw CS4.

    So, at the moment, I whipped up a 1024x768 design and it by default sits against the top and left edges.

    The issue is that, I wish for it to sit in the centre of the screen.

    Aligned both horizontally and vertically in the centre.

    I have provided the code that Ps (photoshop) spat out after slicing the image. I tweaked the title, bgcolor field and the bottom bit to allow people to email me (once I get the email bit working), otherwise, it is untouched.

    Code:
    <html>
    <head>
    <title>kd | Your Design & Print Specialist</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body bgcolor="#3399cc" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- Save for Web Slices (Kd_Under_Construction.psd) -->
    <table id="Table_01" width="1070" height="822" border="0" cellpadding="0" cellspacing="0">
    	<tr>
    		<td rowspan="2">
    			<img src="images/left.jpg" width="294" height="623" alt=""></td>
    		<td>
    			<img src="images/kocogludesigntop.jpg" width="471" height="246" alt=""></td>
    		<td rowspan="2">
    			<img src="images/rightin.jpg" width="196" height="623" alt=""></td>
    		<td rowspan="2">
    			<img src="images/rightout.jpg" width="109" height="623" alt=""></td>
    	</tr>
    	<tr>
    		<td>
    			<img src="images/textmid.jpg" width="471" height="377" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="4">
    			<img src="images/bottom_dont_wait.jpg" width="1070" height="124" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="4">
    			<a href="mailto:designs@kocogludesign.com"><img src="images/emailATbottom.jpg" width="1070" height="75" alt=""></a></td>
    	</tr>
    </table>
    <!-- End Save for Web Slices -->
    </body>
    </html>
    If anyone wishes to see the slices used, download from here please:
    Code:
    http://rapidshare.com/files/293659564/UnderConstruction.zip
    What changes do I need to make to get the desired effect I want?

    On another note (maybe this deserves its own thread), as I plan to design my own website... I wonder if I should code my site with HTML, or Dw?


    Warm Regards,

    isa

  2. #2
    Join Date
    Sep 2009
    Location
    Toronto, Ontario, Canada
    Posts
    163
    Quote Originally Posted by isa View Post
    I am planning on building a website to refer prospective clients to, and at the moment it is under construction.

    I'm planning on building the site myself with either plain old HTML, or Dw (DreamWeaver). I have access to Dw CS4.

    So, at the moment, I whipped up a 1024x768 design and it by default sits against the top and left edges.

    Why would you do that?

    With a wide-screen monitor, I like to have two windows open side-by-side. Each window is about 800px wide.
    The issue is that, I wish for it to sit in the centre of the screen.

    Add a width in % and margin: auto to the body CSS.

  3. #3
    Join Date
    Oct 2009
    Location
    Manitoba
    Posts
    36
    Change:

    HTML Code:
    <table id="Table_01" width="1070" height="822" border="0" cellpadding="0" cellspacing="0">
    to:
    HTML Code:
    <table id="Table_01" width="1070" height="822" border="0" cellpadding="0" cellspacing="0" align="center">

    I personaly think that widths shouldnt go over 750. unless you do a percent like cfajohnson said.

  4. #4
    Join Date
    Oct 2009
    Location
    urgh! sometimes even he doesn't know :S
    Posts
    12
    Thank you both very much...

    I must say that I am a newbie to web page building... design is not such an issue. It's the getting up on the web to satisfaction that is the matter...

    I looked at cfajohnson's post, and didn't understand a thing... perhaps, except that it was in a language not understood by me... sorry

    jamesplamondon, seems like your spoon-fed technique worked a charm

    I really gotta work on my html

    Thank you all once again

    www.kocogludesign.com up and running

    Will add more to it soon

  5. #5
    Join Date
    Oct 2009
    Location
    urgh! sometimes even he doesn't know :S
    Posts
    12
    I just opened up the page in Firefox, IE, Safari, Opera and Google Chrome...

    Safari, Opera and Google Chrome showed it fine, but the other two weren't so great... Any idea how to fix up those... ermm... 'glitches'? That is , if they are indeed fixable...

  6. #6
    Join Date
    Oct 2009
    Location
    Manitoba
    Posts
    36
    Im fixing your codeing right now.

  7. #7
    Join Date
    Oct 2009
    Location
    Manitoba
    Posts
    36
    HTML 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>kd | Your Design &amp; Print Specialist</title>
    <style type="text/css">
    <!--
    body {
    margin: 0;
    background-color: #6699cc;
    }
    -->
    </style>
    </head>
    
    <body> 
    <!-- Save for Web Slices (Kd_Under_Construction.psd) --> 
    <table id="Table_01" width="1070" border="0" cellpadding="0" cellspacing="0" align="center"> 
    	<tr> 
    		<td rowspan="2"> 
    			<img src="left.jpg" width="294" height="623" alt="" /></td> 
    		<td> 
    			<img src="kocogludesigntop.jpg" width="471" height="246" alt="" /></td> 
    		<td rowspan="2"> 
    			<img src="rightin.jpg" width="196" height="623" alt="" /></td> 
    		<td rowspan="2"> 
    			<img src="rightout.jpg" width="109" height="623" alt="" /></td> 
    	</tr> 
    	<tr> 
    		<td> 
    			<img src="textmid.jpg" width="471" height="377" alt="" /></td> 
    	</tr> 
    	<tr> 
    		<td colspan="4"> 
    			<img src="bottom_dont_wait.jpg" width="1070" height="124" alt="" /></td> 
    	</tr> 
    	<tr> 
    		<td colspan="4"> 
    			<a href="mailto:designs@kocogludesign.com"><img src="emailATbottom.jpg" alt="" width="1070" height="75" border="0"/></a></td> 
    	</tr> 
    </table> 
    <!-- End Save for Web Slices --> 
    </body>
    </html>

    Okay there was a few things I had to fix.


    You images's befor
    HTML Code:
    <img src="left.jpg" width="294" height="623" alt="">
    after:
    HTML Code:
    <img src="left.jpg" width="294" height="623" alt="" />
    You need to close them,


    You also need this in the top of your page. it might look dumb, but you just have to have to have it.
    HTML 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" />


    I aso changed your body atrubuites to CSS, it works better there.


    i also fixed the picture placement it was a little off.

    there is no height attribute in the table.


    I also validated it http://validator.w3.org/ it has zero errors
    Last edited by jamesplamondon; 10-17-2009 at 12:48 PM. Reason: forgotsumtin

  8. #8
    Join Date
    Oct 2009
    Location
    urgh! sometimes even he doesn't know :S
    Posts
    12
    I truly appreciate your help jamesplamondon

    If only the page showed up after I save your code...

    After / the img tags, and seeing no difference in the end result, I decided to wholesale copy and paste your coding. This is what I now see (and daresay the rest of the world that knows of my site as well):

    www.kocogludesign.com

    What am I overlooking?

  9. #9
    Join Date
    Oct 2009
    Location
    Manitoba
    Posts
    36
    basicly for everything you open you must close it. on some browsers it can mess it up, and cause a problem others it wont.

    USE THIS, i forgot to link your images back in their place from your code.
    HTML 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>kd | Your Design &amp; Print Specialist</title>
    <style type="text/css">
    <!--
    body {
    margin: 0;
    background-color: #6699cc;
    }
    -->
    </style>
    </head>
    
    <body> 
    <!-- Save for Web Slices (Kd_Under_Construction.psd) --> 
    <table id="Table_01" width="1070" border="0" cellpadding="0" cellspacing="0" align="center"> 
    	<tr> 
    		<td rowspan="2"> 
    			<img src="images/left.jpg" width="294" height="623" alt="" /></td> 
    		<td> 
    			<img src="images/kocogludesigntop.jpg" width="471" height="246" alt="" /></td> 
    		<td rowspan="2"> 
    			<img src="images/rightin.jpg" width="196" height="623" alt="" /></td> 
    		<td rowspan="2"> 
    			<img src="images/rightout.jpg" width="109" height="623" alt="" /></td> 
    	</tr> 
    	<tr> 
    		<td> 
    			<img src="images/textmid.jpg" width="471" height="377" alt="" /></td> 
    	</tr> 
    	<tr> 
    		<td colspan="4"> 
    			<img src="images/bottom_dont_wait.jpg" width="1070" height="124" alt="" /></td> 
    	</tr> 
    	<tr> 
    		<td colspan="4"> 
    			<a href="mailto:designs@kocogludesign.com"><img src="images/emailATbottom.jpg" alt="" width="1070" height="75" border="0"/></a></td> 
    	</tr> 
    </table> 
    <!-- End Save for Web Slices --> 
    </body>
    </html>

  10. #10
    Join Date
    Oct 2009
    Location
    urgh! sometimes even he doesn't know :S
    Posts
    12
    Thank you ever so much for your constant help. It is much appreciated.

    Again, I would like to thank you, and cfajohnson, and everyone else that endeavoured to to help me out of this rut.

    When I have more time, I will definitely look over the last two codings you put up jamesplamondon... Right now it is 5AM in Australia (Vic) and I am yet to get any shut-eye, and I gotta wake up early to boot (well, before 11am).

    I can't thank you enough for your immense help.

    Thank you.


    isa

  11. #11
    Join Date
    Oct 2009
    Posts
    15
    didn't read through everyone's posts and im only a noob as well but couldn't you just pagewrap it?

  12. #12
    Join Date
    Oct 2009
    Location
    Manitoba
    Posts
    36
    Quote Originally Posted by Jerm993 View Post
    didn't read through everyone's posts and im only a noob as well but couldn't you just pagewrap it?

    yes, but i just think going

    align="center" is easier

  13. #13
    Join Date
    Sep 2009
    Location
    Toronto, Ontario, Canada
    Posts
    163
    Quote Originally Posted by jamesplamondon View Post
    yes, but i just think going

    align="center" is easier

    But it is not valid HTML.

  14. #14
    Join Date
    Oct 2009
    Location
    Manitoba
    Posts
    36
    But it is not valid HTML.


    actually it is vaild html

  15. #15
    Join Date
    Oct 2009
    Location
    Manitoba
    Posts
    36
    , now try putting into a table. as what we are talking about in this thread.

    Result: Passed, 1 warning(s)

    The warrning is nothing, its the normal "Direct Input mode: UTF-8"

    HTML 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>Untitled Document</title>
    </head>
    
    <body>
    <table width="302" border="0" cellpadding="0" cellspacing="0" align="center">
      <!--DWLayoutTable-->
      <tr>
        <td width="29" height="13"></td>
        <td width="247"></td>
        <td width="26"></td>
      </tr>
      <tr>
        <td height="158"></td>
        <td valign="top">TABLE HERE </td>
        <td></td>
      </tr>
      <tr>
        <td height="33"></td>
        <td>&nbsp;</td>
        <td></td>
      </tr>
    </table>
    </body>
    </html>
    
    
    Last edited by jamesplamondon; 10-18-2009 at 07:51 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles