how to center webpage

This is a discussion on "how to center webpage" within the Web Page Design section. This forum, and the thread "how to center webpage are both part of the Design Your Website category.



Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices


Reply
 
LinkBack Thread Tools
  #1 (permalink)  
Old Dec 1st, 2007, 12:39
New Member
Join Date: Dec 2007
Location: Brussels
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
how to center webpage

I don't know much about html, but finally I managed to do it a little bit,
now I still need to center my page in webbrowser

the code is:

HTML: Select all
<font face="Arial" class="fsx07" color="#0080c0" SIZE="2"><B> </B></font>
                 <div align="center">



                        </div>
<table width='98%' height='100%' border='0' cellpadding='0' cellspacing='0'><tr><td valign='top' >

<DIV ID="overDiv" STYLE="position: absolute; visibility: hide; z-index: 1; left: 12; top: -1; width: 4; height: 19"></DIV>
<SCRIPT LANGUAGE="JavaScript" SRC="overgang.js"></SCRIPT>

<table border=0 cellspacing=0 cellpadding=0 width='100%' align='center'>
 <tr>   <td width='10%' align='center'>
  <td width='48%' align='center'>
   <map id="ok1" name="ok1">
<area onMouseOver="return overlib('<center><B>&nbsp;Frankrijk&nbsp;</B></center>', FGCOLOR, '#FFFFFF');" onMouseOut="nd();" shape="poly" coords="108,204,104,208,101,211,105,219,104,227,104,239,95,239,87,238,80,248,71,246,62,243,59,232,60,221,60,214,55,210,52,204,43,196,57,192,64,190,68,187,73,185,76,177,82,178,86,180,90,184,94,185,98,189,102,191,111,192,109,199" href="./search.php?c=4" title="" />
<area onMouseOver="return overlib('<center><B>&nbsp;Spanje&nbsp;</B></center>', FGCOLOR, '#FFFFFF');" onMouseOut="nd();" shape="poly" coords="61,274,63,277,63,281,61,284,60,288,56,290,53,294,49,295,45,295,40,296,32,301,28,295,24,291,26,283,26,278,26,274,28,270,28,266,29,261,30,255,27,240,37,242,44,241,50,241,56,244,62,247,69,249,79,251,66,266,62,271" href="./search.php?c=5" title="" />
<area onMouseOver="return overlib('<center><B>&nbsp;Spanje&nbsp;</B></center>', FGCOLOR, '#FFFFFF');" onMouseOut="nd();" shape="poly" coords="55,242,79,255,67,263,61,273,24,249,22,249,20,250,18,249,18,249,16,248,15,248,14,247,14,245,13,244,14,243,15,242,15,242,16,241,16,241,17,241,17,241,18,240,18,240,18,240,19,239,19,239,21,239,22,239,24,240,31,240" href="./search.php?c=5" title="" />
<area onMouseOver="return overlib('<center><B>&nbsp;België / Luxemburg&nbsp;</B></center>', FGCOLOR, '#FFFFFF');" onMouseOut="nd();" shape="poly" coords="98,178,99,179,99,181,97,182,95,182,93,181,92,181,91,180,91,180,91,180,91,179,90,179,89,179,89,179,88,178,88,178,87,177,84,175,85,174,87,174,89,174,90,174,91,174,91,174,92,174,93,174,95,174,97,174,97,176,98,177" href="./search.php?c=6" title="" />
<area onMouseOver="return overlib('<center><B>&nbsp;België / Luxemburg&nbsp;</B></center>', FGCOLOR, '#FFFFFF');" onMouseOut="nd();" shape="poly" coords="96,184,101,188,104,185,102,179" href="./search.php?c=6" title="" />
<area onMouseOver="return overlib('<center><B>&nbsp;Frankrijk&nbsp;</B></center>', FGCOLOR, '#FFFFFF');" onMouseOut="nd();" shape="poly" coords="124,244,120,244,116,249,116,256,123,255" href="./search.php?c=4" title="" />
<area onMouseOver="return overlib('<center><B>&nbsp;Spanje&nbsp;</B></center>', FGCOLOR, '#FFFFFF');" onMouseOut="nd();" shape="poly" coords="87,269,82,269,76,274,87,276" href="./search.php?c=5" title="" />
<area  onMouseOver="return overlib('<center><B>&nbsp;Italië&nbsp;</B></center>', FGCOLOR, '#FFFFFF');" onMouseOut="nd();" shape="poly" coords="121,270,121,270,121,271,121,271,121,272,121,274,120,275,119,275,119,275,117,276,117,275,117,272,117,271,116,271,116,270,116,270,116,270,116,269,116,268,116,267,116,264,117,263,119,262,120,261,121,262,122,264,121,268,121,269,121,269,121,270" href="./search.php?c=8" title="" />
<area  onMouseOver="return overlib('<center><B>&nbsp;Italië&nbsp;</B></center>', FGCOLOR, '#FFFFFF');" onMouseOut="nd();" shape="poly" coords="136,227,136,228,136,230,136,232,145,245,146,257,136,248,130,240,128,237,127,234,126,233,125,232,123,231,121,230,111,230,109,227,110,223,112,220,119,220,121,218,123,217,126,216,128,212,130,211,134,211,137,212,141,214,142,218,138,223,136,226" href="./search.php?c=8" title="" />
<area  onMouseOver="return overlib('<center><B>&nbsp;Italië&nbsp;</B></center>', FGCOLOR, '#FFFFFF');" onMouseOut="nd();" shape="poly" coords="163,259,165,261,170,265,163,265,162,267,162,271,157,266,155,264,155,264,154,262,154,262,153,261,151,261,151,261,150,260,150,259,149,258,139,252,131,242,120,220,150,251,153,252,155,253,155,253,156,254,157,254,158,256,159,257,159,257,160,258" href="./search.php?c=8" title="" />
<area  onMouseOver="return overlib('<center><B>&nbsp;Italië&nbsp;</B></center>', FGCOLOR, '#FFFFFF');" onMouseOut="nd();" shape="poly" coords="163,279,163,279,163,279,163,279,163,279,163,280,163,280,163,280,163,280,163,280,163,279,163,279,163,279,163,279,163,279,163,279,163,279,163,279,163,279,163,277,163,273,163,273,164,274,165,275,163,279,163,279,163,279,163,279" href="./search.php?c=8" title="" />
<area  onMouseOver="return overlib('<center><B>&nbsp;Italië&nbsp;</B></center>', FGCOLOR, '#FFFFFF');" onMouseOut="nd();" shape="poly" coords="154,292,154,292,154,293,154,294,153,294,153,295,152,295,151,294,151,294,151,294,151,293,150,293,150,293,150,292,149,292,149,292,149,292,141,288,143,287,147,288,149,288,150,288,151,288,151,288,152,288,152,289,153,290,154,290,154,291,154,292" href="./search.php?c=8" title="" />
<area onMouseOver="return overlib('<center><B>&nbsp;Portugal&nbsp;</B></center>', FGCOLOR, '#FFFFFF');" onMouseOut="nd();" shape="poly" coords="24,261,24,262,23,263,23,265,23,268,23,271,21,276,20,293,14,293,11,281,13,269,15,263,15,262,15,262,15,261,15,261,15,261,15,260,14,259,14,258,14,255,14,252,16,252,17,253,19,254,21,254,25,253,26,254,26,257,25,260" href="./search.php?c=9" title="" />
<area onMouseOver="return overlib('<center><B>&nbsp;Turkije&nbsp;</B></center>', FGCOLOR, '#FFFFFF');" onMouseOut="nd();" shape="poly" coords="326,277,328,291,302,296,285,296,276,297,270,297,266,301,260,301,256,299,252,296,246,298,238,299,233,295,228,290,222,284,224,277,222,270,234,267,237,262,244,262,249,262,253,259,256,256,260,254,265,254,270,255,276,257,283,259,293,262,323,264" href="./search.php?c=10" title="" />
<area onMouseOver="return overlib('<center><B>&nbsp;Turkije&nbsp;</B></center>', FGCOLOR, '#FFFFFF');" onMouseOut="nd();" shape="poly" coords="265,312,265,312,264,313,264,313,263,313,263,313,262,313,262,313,262,313,262,313,262,313,261,313,260,313,259,313,259,312,259,312,259,312,259,311,260,311,261,311,261,310,262,310,262,310,262,310,262,310,263,310,266,308,267,308,266,310,266,311" href="./search.php?c=10" title="" />
<area onMouseOver="return overlib('<center><B>&nbsp;Turkije&nbsp;</B></center>', FGCOLOR, '#FFFFFF');" onMouseOut="nd();" shape="poly" coords="234,258,242,261,231,260,231,260,229,260,228,260,227,260,227,261,227,261,226,261,226,261,223,262,222,262,222,260,222,259,223,258,223,257,222,256,223,255,223,253,224,253,225,252,227,253,227,253,228,253,228,255,229,256,230,256,230,257,233,257" href="./search.php?c=10" title="" />
<area shape="default" nohref="nohref" alt="" />
</map>
   <img src="ok1.gif" alt="" usemap="#ok1" style="border-style:none" />
  </td><td width='5%' align='right'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
  <td width='37%' align='center'>

<table border=0 cellspacing=0 cellpadding=0 width='90%' bgcolor=EEEEDD>
<tr> <td>
<table border=0 cellspacing=0 cellpadding=0 bgcolor=FE722C width='100%'>
 <tr>
  
  <td rowspan=2 class=c1 align="center" height="20" width="82%" valign=bottom><img src="head.png" border="0" height="20"></td>
 
</table>

<tr><td>
<table border=0 cellspacing=0 cellpadding=0 class='c1' bordercolor=2D6BBD width='100%'><tr><td>
<table border=0 cellspacing=0 cellpadding=0 class='c3' bordercolor=2D6BBD width='100%'>
<tr class='c2'>
 <td height=8 colspan=6></td>
<tr>

 <form method="get" name=form_search action="index.php">
<input type=hidden name=user value=listproperties><table>
<tr width="100%">
<td align="right" valign="middle">
Max. prijs :
</td>
<td align="LEFT">
<input type="text" name="pricehome" value=''>
</td>
</tr>

<tr>
<td align="right">
Land :
</td>
<td align="LEFT">
<select name="countryhome" size="1" onChange="changeregion();">
<OPTION selected value='...'>...</OPTION>
<OPTION value="Romania">Romania</OPTION>
</SELECT>
</td>
</tr>

<tr>
<td align="right" >
Verhuring :
</td>
<td align="LEFT">
<select name="weekdayshome" size="1">
<OPTION selected value="-1">...</OPTION>
<OPTION value="0">Per dag</OPTION>
<OPTION value="1">Per week</OPTION>
</SELECT>
</td>
</tr>

<tr>
<td align="right" >
Streek :
</td>
<td align="LEFT">
<select name="regionhome" size="1" onChange="changetown();">
<OPTION selected value='...'>...</OPTION>
<OPTION value="Iasi">Iasi</OPTION>
</SELECT>
</td>
</tr>

<tr><td align="right" >Stad : </td><td align="LEFT" colspan="3"><select name="townhome"

size="1"><OPTION selected value='...'>...</OPTION><OPTION

value="Iasi">Iasi</OPTION></SELECT></td></tr>
<tr>
<td align="right" >
Slaapkamers :
</td>
<td align="LEFT">
<select name="camerehome" size="1">
<OPTION selected value=0>...</OPTION>
<OPTION value=1>1</OPTION>
<OPTION value=2>2</OPTION>
<OPTION value=3>3</OPTION>
<OPTION value=4>4</OPTION>
<OPTION value=5>5</OPTION>
<OPTION value=6>6</OPTION>
<OPTION value=7>7</OPTION>
<OPTION value=8>8 and over</OPTION>
</SELECT>
</td>
</tr>
<tr><td colspan="2" align="center">
<input type="hidden" name="user" value="listproperties">
<input type="submit" class='tdmicseach' value="Zoek vakantieverblijf">

</td></tr></table>
</form>


<!--- -->
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

     country = new Array();

     region = new Array();

     town = new Array();

country[1]='Romania';
region['Romania']='...,Iasi';
town['Iasi']='...,Iasi';



function changeregion() {
    obj = document.form_search;
    var country_now  = obj.countryhome.options[obj.countryhome.selectedIndex].value;
    if ( (country_now != '...') && (country_now != '0')) {
        var region_array = region[country_now].split(',');
        obj.regionhome.length=0;
        obj.townhome.length=0;
        for (var i=0; i < region_array.length; i++) {
                obj.regionhome.options[i] = new Option(region_array[i], region_array[i], 0, 0);
                obj.regionhome.options[0].selected =  true;
        }
    }else{
        obj.regionhome.length=0;
        obj.townhome.length=0;
    }
}
function changetown() {
    obj = document.form_search;
    var town_now  = obj.regionhome.options[obj.regionhome.selectedIndex].value;
    if (town_now != '...') {
        var town_array =  town[town_now].split(',');
        obj.townhome.length=0;
        for (var i=0; i < town_array.length; i++) {
                obj.townhome.options[i] = new Option(town_array[i], town_array[i], 0, 0);
                obj.townhome.options[0].selected =  true;
        }
    }else{
        obj.townhome.length=0;
    }
}

      //  End -->
</script>
 <td colspan=3 align='right'>


 <td height=8 colspan=6></td>
</tr>
</table>
</table>
</table>

    <br>

<table border=0 cellpadding=0 cellspacing=0 width='100%'>
 <tr>
  <td width='43%' valign='top'>
   <table border=0 cellpadding=0 cellspacing=0 width='100%'>
    <tr>
     <td><font face=verdana size=2></font><b>Wat bieden wij ?</b><br><br><font face=verdana size=1><b>Voor huurders:</b><br>Als </td>
    <tr>
     <td><br>
  
   </table>
  <td width='14%'>&nbsp;&nbsp;</td>
  <td width='43%' valign='top'>
   <table border=0 cellpadding=0 cellspacing=0 width='100%'>
    <tr>
     <td><br><br><font face=verdana size=1><b>Voor verhuurders:</b><br><br><br></font></td>
    <tr>

   </table>
</table>


  <td nowrap width='70%'></td>
  <td nowrap align='right'></td>
  <td nowrap align='right'></td>
</table></table>

</form>

thanx
Reply With Quote

  #2 (permalink)  
Old Dec 1st, 2007, 12:42
Marc's Avatar
Moderator

SuperMember
Join Date: Apr 2007
Location: Scotland, UK
Age: 15
Posts: 1,637
Thanks: 0
Thanked 6 Times in 6 Posts
Send a message via MSN to Marc Send a message via Skype™ to Marc
Re: how to center webpage

Have a look here: http://creativecoding.webforumz.com/...august/faq/#q2 - How to center your website horizontally. The way that you are using just now will work but wont validate.
Reply With Quote
  #3 (permalink)  
Old Dec 1st, 2007, 12:56
New Member
Join Date: Dec 2007
Location: Brussels
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Re: how to center webpage

i tried with the div, but still no result, I think the content is badly configurated
Reply With Quote
  #4 (permalink)  
Old Dec 1st, 2007, 12:57
Marc's Avatar
Moderator

SuperMember
Join Date: Apr 2007
Location: Scotland, UK
Age: 15
Posts: 1,637
Thanks: 0
Thanked 6 Times in 6 Posts
Send a message via MSN to Marc Send a message via Skype™ to Marc
Re: how to center webpage

Yes, i suggest you drop the tables and use CSS.
Reply With Quote
  #5 (permalink)  
Old Dec 1st, 2007, 12:59
New Member
Join Date: Dec 2007
Location: Brussels
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Re: how to center webpage

Help ???
Reply With Quote
  #6 (permalink)  
Old Dec 1st, 2007, 23:27
Highly Reputable Member
Join Date: Sep 2007
Age: 15
Posts: 717
Blog Entries: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Re: how to center webpage

To elaborate on what Marc said: Use css instead of tables by styling divs. For example, you can make two columns like this:
HTML: Select all
<div id="left">Left Column</div>
<div id="right">Right Column</div>
And use css to place the divs next to each other, instead of one below the other:
Code: Select all
#left {
float:left;
width:500px;
}

#right {
float:right;
width:200px;
}
Those are the basics... You can do a lot more to organize your content without using tables! If you're still stuck, just ask...

Cheers
Last Blog Entry: Windows Vista vs. Mac Leopard (Nov 4th, 2007)
Reply With Quote
  #7 (permalink)  
Old Dec 2nd, 2007, 20:45
SuperMember

SuperMember
Join Date: Aug 2003
Location: Castle Rock, CO
Age: 36
Posts: 164
Thanks: 0
Thanked 0 Times in 0 Posts
Re: how to center webpage

Center a Website in FrontPage offers basic solution if you need to still rely on tables. You have
Code: Select all
                 <div align="center">



                        </div>
but this closing divide should be at the end of your code. Right now you have
Code: Select all
</table></table>

</form>
So add the </div> there instead. But you should look over your code as well some because you elements are not closed properly
Reply With Quote
  #8 (permalink)  
Old Dec 5th, 2007, 17:00
Junior Member
Join Date: Jul 2007
Location: Arkansas, USA
Age: 21
Posts: 45
Blog Entries: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to nashultz07 Send a message via MSN to nashultz07
Re: how to center webpage

So, what Corey is saying is to put your code like this:

Code: Select all
<div align="center">
<table width='98%' height='100%' border='0' cellpadding='0' cellspacing='0'>
 
...
 
</table></table>
</form>
</div>
But I would also have to agree with Marc and swagner about using CSS instead of tables.
Last Blog Entry: First Post! (Apr 18th, 2008)
Reply With Quote
  #9 (permalink)  
Old Dec 6th, 2007, 06:37
Most Reputable Member
Join Date: Feb 2004
Location: Borneo
Age: 27
Posts: 1,603
Blog Entries: 2
Thanks: 0
Thanked 4 Times in 3 Posts
Send a message via Yahoo to Monie
Re: how to center webpage

or like this..

HTML: Select all
#myContent {
margin: 0 auto;
}
HTML: Select all
<div id="myContent">
<form>
<table width='90%' height='100%' border='0' cellpadding='0' cellspacing='0'>
 
...
 
</table>
</form>
</div>
Last Blog Entry: ASP Programming Tips and Technique (Oct 26th, 2007)
Reply With Quote
  #10 (permalink)  
Old Dec 29th, 2007, 21:57
New Member
Join Date: Dec 2007
Location: Gujranwala
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via MSN to itHighway
Re: how to center webpage

Which brower you are using?

Last edited by Daniel; Dec 30th, 2007 at 14:17. Reason: No sig until you have 10 posts.
Reply With Quote
  #11 (permalink)  
Old Dec 31st, 2007, 05:16
Most Reputable Member
Join Date: Feb 2004
Location: Borneo
Age: 27
Posts: 1,603
Blog Entries: 2
Thanks: 0
Thanked 4 Times in 3 Posts
Send a message via Yahoo to Monie
Re: how to center webpage

Firefox!
It worked in IE 7 as well!
Last Blog Entry: ASP Programming Tips and Technique (Oct 26th, 2007)
Reply With Quote
  #12 (permalink)  
Old Dec 31st, 2007, 11:12
Marc's Avatar
Moderator

SuperMember
Join Date: Apr 2007
Location: Scotland, UK
Age: 15
Posts: 1,637
Thanks: 0
Thanked 6 Times in 6 Posts
Send a message via MSN to Marc Send a message via Skype™ to Marc
Re: how to center webpage

Or you could just set the ID on the table instead of opening an extra div!! Less code = more efficient although sadly, it wont work for you as this is not the case with tables!
Reply With Quote
  #13 (permalink)  
Old Jan 3rd, 2008, 05:12
New Member
Join Date: Jan 2008
Location: China
Age: 24
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via MSN to rrrrutdk
Re: how to center webpage

try this:

HTML: Select all
<style type="text/css">
body {
    text-align: center;
}
 
#wrap {
    margin: 0 auto;
    text-align: left;
}
</style>
 
<div id="wrap">
    <your-code>place your code here</your-code>
</div>
Reply With Quote
  #14 (permalink)  
Old Jan 3rd, 2008, 05:19
Most Reputable Member
Join Date: Feb 2004
Location: Borneo
Age: 27
Posts: 1,603
Blog Entries: 2
Thanks: 0
Thanked 4 Times in 3 Posts
Send a message via Yahoo to Monie
Re: how to center webpage

I've posted that earlier rrrrutdk!

Does all this thread solved any of your problem?
Last Blog Entry: ASP Programming Tips and Technique (Oct 26th, 2007)
Reply With Quote
  #15 (permalink)  
Old Jan 3rd, 2008, 05:35
New Member
Join Date: Jan 2008
Location: China
Age: 24
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via MSN to rrrrutdk
Re: how to center webpage

Quote:
Originally Posted by Monie View Post
I've posted that earlier rrrrutdk!

Does all this thread solved any of your problem?

, your code wont work in any version of Internet Explorer except 7.0+
Reply With Quote
  #16 (permalink)  
Old Jan 3rd, 2008, 05:49
Most Reputable Member
Join Date: Feb 2004
Location: Borneo
Age: 27
Posts: 1,603
Blog Entries: 2
Thanks: 0
Thanked 4 Times in 3 Posts
Send a message via Yahoo to Monie
Re: how to center webpage

Oh yeah.. I forgot the {text-align: center;} things!
Last Blog Entry: ASP Programming Tips and Technique (Oct 26th, 2007)
Reply With Quote
  #17 (permalink)  
Old Jan 3rd, 2008, 09:19
SuperMember

SuperMember
Join Date: May 2007
Location: UK
Age: 27
Posts: 1,111
Thanks: 0
Thanked 0 Times in 0 Posts
Re: how to center webpage

Quote:
Originally Posted by rrrrutdk View Post
, your code wont work in any version of Internet Explorer except 7.0+
Not true.

It will work in IE6 and IE7, providing they are rendering in standards compliant mode.

{ text-align: center } is only necessary for IE5 (which is dead).
Reply With Quote
  #18 (permalink)  
Old Jan 3rd, 2008, 10:45
Jack Franklin's Avatar
Resources Administrator

SuperMember
Join Date: May 2007
Location: Cornwall, England
Posts: 1,266
Blog Entries: 7
Thanks: 10
Thanked 4 Times in 4 Posts
Re: how to center webpage

Would you say it is neccessary to code for IE5 now-a-days?
Last Blog Entry: My Latest Project - Grilling Gurus... (Jun 11th, 2008)
Reply With Quote
  #19 (permalink)  
Old Jan 3rd, 2008, 10:52
SuperMember

SuperMember
Join Date: May 2007
Location: UK
Age: 27
Posts: 1,111
Thanks: 0
Thanked 0 Times in 0 Posts
Re: how to center webpage

Quote:
Originally Posted by jackfranklin View Post
Would you say it is neccessary to code for IE5 now-a-days?
No. In my opinion, it's a complete waste of time. IE5 is dead.

So nowadays, the { text-align: center } hack is unnecessary.
Reply With Quote
  #20 (permalink)  
Old Jan 3rd, 2008, 14:57
Jack Franklin's Avatar
Resources Administrator

SuperMember