how to center webpage

daan · #1 Dec 1st, 2007, 12:39

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

Marc · #2 Dec 1st, 2007, 12:42

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.

daan · #3 Dec 1st, 2007, 12:56

i tried with the div, but still no result, I think the content is badly configurated

Marc · #4 Dec 1st, 2007, 12:57

Yes, i suggest you drop the tables and use CSS.

daan · #5 Dec 1st, 2007, 12:59

Help ???

Stuart · #6 Dec 1st, 2007, 23:27

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

Corey Bryant · #7 Dec 2nd, 2007, 20:45

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

nashultz07 · #8 Dec 5th, 2007, 17:00

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.

Monie · #9 Dec 6th, 2007, 06:37

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>

itHighway · #10 Dec 29th, 2007, 21:57

Which brower you are using?

Monie · #11 Dec 31st, 2007, 05:16

Firefox!
It worked in IE 7 as well!

Marc · #12 Dec 31st, 2007, 11:12

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!

rrrrutdk · #13 Jan 3rd, 2008, 05:12

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>

Monie · #14 Jan 3rd, 2008, 05:19

I've posted that earlier rrrrutdk!

Does all this thread solved any of your problem?

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
how to center webpage