www.webdeveloper.com
Results 1 to 14 of 14

Thread: Centering a webpage

  1. #1
    Join Date
    Mar 2014
    Posts
    6

    Centering a webpage

    Hi, I have a problem that I have been working on for several days and would appreciate some help.

    I have a website that shows up centered when viewing in IE at any resolution. However, when viewing the site in Google Chrome it is not centered, but rather aligned to the left of the screen. I would like it to be centered in Chrome as well.

    Here is what I am currently doing, and I'm sure the problem is in here somewhere.

    This is the html I am using on my page:

    <!-- *******START TABLE CODE******* -->
    <link rel="stylesheet" href="http://www.chiefswarpath.com/style.css" type="text/css">
    <div id="container"><TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="1003" BORDERCOLORLIGHT="#000000" BORDERCOLORDARK="#000000" FRAME="VOID" RULES="NONE" HSPACE="0" VSPACE="0">
    <tR>
    <tD VALIGN=TOP BGCOLOR=#FFFFFF HEIGHT= "" WIDTH="1003"><div><FONT SIZE="3" COLOR="#000000" FACE="Arial,Helvetica,sans-serif">
    <!-- *******END TABLE CODE******* -->

    Content here

    </tD>
    </tR>
    </TABLE>


    My css file looks like this:

    #container {
    margin-left: 0 auto;
    margin-right: 0 auto;
    width: 900px;
    text-align: left;
    }

    body {
    margin: 0 0 0px 0;
    text-align: center;
    }




    Any help would be greatly appreciated.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,160
    It would be much easier to help you if you enclosed the code in an "html" box when you post so that it gets formatted nicely here. It would also help if we could see all of your code. For example, what <!DOCTYPE> are you using?

    You've got the 'width' attribute on the <table> tag set to "1003", but it's nested in the #container <div> whose CSS rules set the width at 900px. That should be resolved by matching the two settings, setting the <table> to 100%, or (best of all) removing all of those attributes from the <table> tag and do everything in the stylesheet.

  3. #3
    Join Date
    Mar 2014
    Location
    UAE
    Posts
    98
    Height and width 100% will solved your issued

  4. #4
    Join Date
    Mar 2014
    Posts
    6
    Ok, thanks for the help. I changed the table width to 1003 in my style.css but that didn't change anything. Ditalgarden - are you saying to change the height and width in the syle.css to 100%? Thanks for all the help.

  5. #5
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,033
    cjkorf, I think you might have gotten confused with what rtrethewey was telling you. In terms of your CSS, he was suggesting that you define all of your style rules in your style.css file, not directly in the <table> tag itself. Secondly, your <table> should have a width of 100%, not 1003 pixels. There is a <div> outside of the table (#container) that has a width of 900 pixels. Thus it makes little sense for the table to have a width of 1003 pixels given the container is smaller.

    Once you update that your last problem lies in your CSS for the #container <div>. You set the margin-left and margin-right properties with a value of '0 auto', which is invalid. If you are wanting to center a block element you should simply use:
    Code:
      margin: 0 auto;

  6. #6
    Join Date
    Mar 2014
    Posts
    6
    Thanks for all the help. I tried your suggestions but still not working. Not sure what is wrong.

  7. #7
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,033
    Would you mind posting your updated HTML and CSS here just so we can verify?

  8. #8
    Join Date
    Mar 2014
    Posts
    24
    For centering the web page we can use the div tag that align the webpage to center and set the height and width of the web page.....

  9. #9
    Join Date
    Mar 2014
    Posts
    40
    You can use <div align="center"> YOUR CONTENT </div>

  10. #10
    Join Date
    Mar 2014
    Posts
    6
    Ok, thanks for all the help. Now that I've made some changes, my webpage is centered when viewing in google chrome, but not in IE, where before it was the opposite. Still can't get it centered in both browsers.

    Sup3rkirby, here is my html and css file:
    Code:
    <HTML>
    <HEAD>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
    <TITLE>RSS Feeds </TITLE> 
    <div id="container">
    <SCRIPT language="JavaScript">
    var TlxPgNm='rssfeeds';
    </SCRIPT>
    <META http-equiv="GENERATOR" CONTENT="Created with CuteSITE Builder, HTML Exporter 5.0.150"> 
    <style type="text/css">
    <!--
    A.Top:link {color:#FFFFCC}
    A.Top:active {color:#CCCC99}
    A.Top:visited {color:#CCCC99}
    A.Bottom:link {color:#000000}
    A.Bottom:active {color:#000000}
    A.Bottom:visited {color:#000000}
    A.Left:link {color:#FFFFFF}
    A.Left:active {color:#FFFFFF}
    A.Left:visited {color:#FFFFFF}
    A.Right:link {color:#000000}
    A.Right:active {color:#000000}
    A.Right:visited {color:#000000}
    A:link {color:#000000}
    A:active {color:#000000}
    A:visited {color:#000000}
    -->
    </style>
    </HEAD>
    <body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>
    <table cellpadding=0 cellspacing=0 border=0><tr>
    <td valign="top" colspan=3 height=100
     BGCOLOR="#FFFFFF" TEXT="#080000">
        <div><FONT SIZE="1" COLOR="#FFCC66" FACE="Arial,Helvetica,sans-serif"><B><!-- Start Gem Build Your Own Web Gem -->
    <!-- *******START TABLE CODE******* -->  
    <link rel="stylesheet" href="http://www.chiefswarpath.com/style.css" type="text/css">
    <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%" BORDERCOLORLIGHT="#000000" BORDERCOLORDARK="#000000" FRAME="VOID" RULES="NONE" HSPACE="0" VSPACE="0">
                        <tR>
                            <tD  VALIGN=TOP BGCOLOR=#FFFFFF HEIGHT= ""  WIDTH="100%"><div><FONT SIZE="3" COLOR="#000000" FACE="Arial,Helvetica,sans-serif"> 
    <!-- *******END TABLE CODE******* -->
    <!-- *******START HEADER CODE******* -->
    <div style="text-align:RIGHT; ">
    <body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0 bgcolor="#707070">
    <table cellpadding=0 cellspacing=0 border=0><tr>
    <td valign="top" colspan=3 height=100
     BGCOLOR="#FFFFFF" TEXT="#000000" bgproperties="fixed" background="http://www.chiefswarpath.com/images/header.jpg">
    <div align="right">
    <!-- *******START GOOGLE AD******* -->
    <script type="text/javascript"><!--
    google_ad_client = "ca-pub-5751025377763738";
    /* Warpath Header */
    google_ad_slot = "4339788378";
    google_ad_width = 468;
    google_ad_height = 60;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    <!-- *******END GOOGLE AD******* -->
    <!-- *******START IPHONE CODE******* -->
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <!-- *******END IPHONE CODE******* -->
    <!-- *******START FAVICON CODE******* -->
    <link rel="shortcut icon" href="http://www.chiefswarpath.com/favicon.ico" />
    <!-- *******END FAVICON CODE******* -->
    <!-- *******END HEADER CODE******* -->
    <!-- End Gem Build Your Own Web Gem -->
    </B></FONT></div>
    </td>
    </tr><tr>
    <td valign="top" width=162
     BGCOLOR="#BF0000" TEXT="#F7F7FF" background="fb5a5072dvldal.png">
        <div name="margins" style="margin-left:8px; margin-top:5px; margin-right:8px; ">
    <div style="text-align:CENTER; "><FONT SIZE="1" COLOR="#FFFFFF" FACE="Verdana"><!-- Start Gem Build Your Own Web Gem -->
    <!--///Menu///--><script LANGUAGE="JavaScript1.2" SRC="http://www.chiefswarpath.com/includes/javamenu.js"></script><!--///End of Menu///-->
    
    <!--///Highlight///-->
    <style> 
    a:hover{color:#bf0000; }
    </style>
    <!--///End of Highlight///-->
     
    <!--///Logger///-->
    <script> 
    a=new Image();
    refer=document.referrer;
    doc=document.location;
    x=screen.width;
    y=screen.height;
    a.src="http://www.chiefswarpath.com/cgi-bin/advlogger/logger.cgi?ref="+escape(refer)+"&doc="+escape(doc)+"&res="+x+"x"+y;
    </script>
    <!--///End of Logger///-->
    
    <!-- End Gem Build Your Own Web Gem -->
    </FONT></div>
    </div>
    <IMG BORDER="0" SRC="1x1.gif" HEIGHT=1 WIDTH=162></td>
    <td valign="top" height=330
     width="100%" BGCOLOR="#FFFFFF" TEXT="#080000">
        <div name="margins" style="margin-left:15px; margin-top:10px; margin-right:15px; ">
    <div style="text-align:CENTER; "><FONT SIZE="3" COLOR="#BF0000" FACE="Verdana"><B><!-- Start Gem Build Your Own Web Gem -->
    <img src="/pageheaders/rssfeeds.gif" alt="RSS Feeds" title="RSS Feeds">
    <!-- End Gem Build Your Own Web Gem -->
    </B></FONT></div>
    <div><IMG BORDER="0" SRC="1x1.gif" HEIGHT="11" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0"
    ></div>
    <div><FONT SIZE="2" COLOR="#000000" FACE="Verdana">The following RSS feeds are available on ChiefsWarpath.com:</FONT></div>
    <bR>
    <div style="margin-left:24px; text-indent:-24px; "><FONT SIZE="2" COLOR="#000000" FACE="Verdana"><A HREF="http://www.chiefswarpath.com/news/feed/" TARGET="_top"    TITLE="http://www.chiefswarpath.com/news/feed/"><B><IMG BORDER="0" SRC="Wing0a73007700c800000000.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">All News</B></A></FONT></div>
    <div><IMG BORDER="0" SRC="1x1.gif" HEIGHT="4" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0"
    ></div>
    <div style="margin-left:24px; text-indent:-24px; "><FONT SIZE="2" COLOR="#000000" FACE="Verdana"><A HREF="http://www.chiefswarpath.com/news/category/latestnews/feed/" TARGET="_top"    TITLE="http://www.chiefswarpath.com/news/catego"><B><IMG BORDER="0" SRC="Wing0a73007700c800000000.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Latest News</B></A></FONT></div>
    <div><IMG BORDER="0" SRC="1x1.gif" HEIGHT="4" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0"
    ></div>
    <div style="margin-left:24px; text-indent:-24px; "><FONT SIZE="2" COLOR="#000000" FACE="Verdana"><A HREF="http://www.chiefswarpath.com/news/category/commentary/feed/" TARGET="_top"    TITLE="http://www.chiefswarpath.com/news/catego"><B><IMG BORDER="0" SRC="Wing0a73007700c800000000.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Commentary</B></A></FONT></div>
    <div><IMG BORDER="0" SRC="1x1.gif" HEIGHT="4" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0"
    ></div>
    <div style="margin-left:24px; text-indent:-24px; "><FONT SIZE="2" COLOR="#000000" FACE="Verdana"><A HREF="http://www.chiefswarpath.com/news/category/chiefheadlines/feed/" TARGET="_top"    TITLE="http://www.chiefswarpath.com/news/catego"><B><IMG BORDER="0" SRC="Wing0a73007700c800000000.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Chief Headlines</B></A></FONT></div>
    <div><IMG BORDER="0" SRC="1x1.gif" HEIGHT="4" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0"
    ></div>
    <bR>
    <div><FONT SIZE="2" COLOR="#000000" FACE="Verdana"><B>What is RSS?</B></FONT></div>
    <bR>
    <div><FONT SIZE="2" COLOR="#000000" FACE="Verdana">RSS allows sites like this one to syndicate content to other sites and news readers. It will allow you to keep track of when this site is updated.</FONT></div>
    <bR>
    <div><FONT SIZE="2" COLOR="#000000" FACE="Verdana"><B>How do I use RSS feeds?</B></FONT></div>
    <bR>
    <div><FONT SIZE="2" COLOR="#000000" FACE="Verdana">All modern browsers have built in RSS readers. There are also a number of services like iGoogle, MyYahoo! and MSN that allow you to put RSS feed URL's into your personal pages and show you a feed of the latest content from this site.</FONT></div>
    </div>
    </td>
    <td valign="top" width=180
     BGCOLOR="#DDDDDD" TEXT="#080000">
        <div name="margins" style="margin-left:10px; margin-top:5px; margin-right:10px; ">
    <div style="text-align:CENTER; "><FONT SIZE="1" COLOR="#000000" FACE="Verdana"><!-- Start Gem Build Your Own Web Gem -->
    <!-- *******START RIGHT FRAME HP******* --> 
    <div style="text-align:CENTER; "><FONT SIZE="1" COLOR="#000000" FACE="Verdana"><a href="http://www.chiefswarpath.com/rssfeeds.htm"><IMG SRC="http://www.chiefswarpath.com/images/rss.jpg" border=0 width="25" height="25" ALT="RSS" title="RSS"  ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></a> &nbsp;&nbsp;&nbsp;<a href="http://www.facebook.com/chiefswarpath" target="_blank"><IMG SRC="http://www.chiefswarpath.com/images/fbook.jpg" border=0 width="25" height="25" ALT="Facebook" title="Facebook" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></a> &nbsp;&nbsp;&nbsp;<a href="http://twitter.com/chiefswarpath_" target="_blank"><IMG SRC="http://www.chiefswarpath.com/images/twit.jpg" border=0 width="25" height="25" ALT="Twitter"  title="Twitter" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></a></div><p>
    <font face="verdana" size="1" color="#000000">
    </font>
    <!-- *******START GOOGLE AD******* -->
    <script type="text/javascript"><!--
    google_ad_client = "ca-pub-5751025377763738";
    /* Warpath Side Ad */
    google_ad_slot = "8906668207";
    google_ad_width = 120;
    google_ad_height = 600;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    <!-- *******END GOOGLE AD******* -->
    <p>
    <a href="http://www.chiefswarpath.com/features/fanshop.htm"><img src="/images/125x125ff.jpg" alt="Warpath Fan Shop" title="Warpath Fan Shop" border="0"></a>
    <p>
    <!-- *******END RIGHT FRAME HP******* --> 
    <!-- End Gem Build Your Own Web Gem -->
    </FONT></div>
    </div>
    <IMG BORDER="0" SRC="1x1.gif" HEIGHT=1 WIDTH=180></td>
    </tr><tr>
    <td valign="top" colspan=3 height=50
     BGCOLOR="#000000" TEXT="#F7F7FF">
        <div name="margins" style="margin-left:10px; margin-top:10px; margin-right:10px; ">
    <div style="text-align:CENTER; "><FONT SIZE="1" COLOR="#FFFFFF" FACE="Verdana"><!-- Start Gem Build Your Own Web Gem -->
    <!--///Footer///--><script LANGUAGE="JavaScript1.2" SRC="http://www.chiefswarpath.com/includes/footer.js"></script><!--///End of Footer///-->
    
    <!-- *******START TABLE CODE******* -->
    </FONT></div>
    </tD>
    </tR>
    </TABLE>
    <!-- *******END TABLE CODE******* -->
    
    <!-- End Gem Build Your Own Web Gem -->
    </FONT></div>
    </div>
    </td>
    </tr></table></body>
    </HTML>

  11. #11
    Join Date
    Mar 2014
    Posts
    6
    And here is the CSS File:

    CSS File:

    Code:
    body { 	
    text-align: center; 	
    } 
    
    #container { 	
    margin-left: auto;	
    margin-right: auto;
    width: 900px; 	
    text-align: left; 	
    }

  12. #12
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,033
    Oh boy... Your HTML is pretty messy. You have 2 <body> tags as well as the <div id="container"> inside of your <head> tag (which is a no-no). I also see some use of the <font> tag, which is no longer supported in HTML5. Which, on a similar note I feel I should mention to Samphywii that the align attribute of the <div> element is also deprecated in HTML5.

    Moving on, I also see a <link> tag that is in the <body> of the page. <link> tags should only be found in the <head> of a page. Frankly it's a bit hard to fix your centering problem because the HTML itself is malformed. You have several tags that are opened but never properly closed and vice versa. I don't want to seem rude here but I do think if you want your page to work properly in all browsers you're going to need to rebuild your HTML code properly.

    Maybe someone here can help you reform your code. If anything I'll give it a look when I get home tonight.

  13. #13
    Join Date
    Oct 2013
    Posts
    609
    http://validator.w3.org

    At a minimum your current errors include having 2 <body> tags and having <link> tags within the body instead in the <head>. Lots of other errors, many of which can mess with your layout.

    EDIT: Got distracted and ended up posting well after Sup3rkirby. But "Oh boy..." was also my reaction to the code.
    Last edited by Kevin2; 03-20-2014 at 02:53 PM.

  14. #14
    Join Date
    Mar 2014
    Posts
    6
    Thanks for all the help guys. I know the code is pretty outdated. I use a very old program to create my site and I guess it's days are over. I will probably just move my site over to another program such as wordpress. Thanks again.

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