HTML page layout not centering.. help please!

Page 1 of 1

11 Replies - 874 Views - Last Post: 20 January 2011 - 05:50 PM

#1 CamiloE  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 20-January 11

HTML page layout not centering.. help please!

Posted 20 January 2011 - 04:25 PM

Hello everyone..

Ok so im a noob here.. started to learn some html and some php and flash at the same time... so my knowledge is limited so far..

I picked up a template in the web that im trying to edit but having problems with.

The page will display on the very left of the browser.

http://www.mariservi...te/index-5.html

the zip file came with a style.css sheet but this is all it has on the css :

body {
	margin-left:auto;
	margin-top: 0px;
	margin-right:auto;
	margin-bottom: 0px;
}

.style1 {
	color: #2c2c2c;
	font-size: 11px;
	font-family: tahoma;
	text-decoration:none
}

.style2 {
	color: #424242;
	font-size: 11px;
	font-family: tahoma
}

.style3 {
	color: #37859E;
	font-size: 11px;
	font-family: tahoma
}


Im not sure if im supposed to edit the layout to be centered in the css or html.

Anyone with knowledge please help!! It would be very much appreciative.

Thanks.

Edited by Dogstopper: :code:

Is This A Good Question/Topic? 0
  • +

Replies To: HTML page layout not centering.. help please!

#2 Fungle  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 242
  • View blog
  • Posts: 336
  • Joined: 06-March 10

Re: HTML page layout not centering.. help please!

Posted 20 January 2011 - 04:34 PM

What you should firstly do, is set the image "til_1.gif" as a background image on the body tag in the css e.g:
body{
 background-image:url(images/til_1.gif);
 background-position:top;
 background-repeat:repeat-x 
}

and delete the table that is holding the image currently as this is pushing your site to one side.

You should then change the width property of this line:
 <td width="766" align="middle" valign="top">

to 100%, this should fix it for you.

You should also look into learning CSS Layouts using Div's as opposed to tables, as tables have become redundant for layouts, they are only really good for displaying a table of data ^^

Also, Most of the things that the flash does can be done in jQuery/CSS/HTML and for Webkit based browsers, the animation can be done in CSS3

This post has been edited by Fungle: 20 January 2011 - 04:35 PM

Was This Post Helpful? 0
  • +
  • -

#3 Janitor  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 56
  • Joined: 30-July 10

Re: HTML page layout not centering.. help please!

Posted 20 January 2011 - 04:48 PM

[/code]
and delete the table that is holding the image currently as this is pushing your site to one side.

You should then change the width property of this line:
 <td width="766" align="middle" valign="top">


[/quote]

Isn't table align="center" rather than middle?
Was This Post Helpful? 0
  • +
  • -

#4 CamiloE  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 20-January 11

Re: HTML page layout not centering.. help please!

Posted 20 January 2011 - 04:51 PM

Thanks for the fast reply...i believe i changed everything as you mention.. I changed the CSS to this: 

body{
 background-image:url(images/til_1.gif);
 background-position:top;
 background-repeat:repeat-x 
}

.style1 {
	color: #2c2c2c;
	font-size: 11px;
	font-family: tahoma;
	text-decoration:none
}

.style2 {
	color: #424242;
	font-size: 11px;
	font-family: tahoma
}

.style3 {
	color: #37859E;
	font-size: 11px;
	font-family: tahoma
}



Then i deleted the this line in the HTML doc : 
<td style="background-image:url(images/til_1.gif); background-position:top; background-repeat:repeat-x ">&nbsp;</td>
  </tr>


Then changed the width to 700...

here is the results : http://www.mariservi...te/index-5.html

Edited by Dogstopper: :code:~
Was This Post Helpful? 0
  • +
  • -

#5 Fungle  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 242
  • View blog
  • Posts: 336
  • Joined: 06-March 10

Re: HTML page layout not centering.. help please!

Posted 20 January 2011 - 04:51 PM

Table align has three values, Left, Right and Center.

However, You can align it with CSS using floats also.

The code in the quote was extracted from the source code.
Was This Post Helpful? 0
  • +
  • -

#6 CamiloE  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 20-January 11

Re: HTML page layout not centering.. help please!

Posted 20 January 2011 - 04:59 PM

Ok so i made the change from "middle" to "center" and still the same? I dont think im using floats on my css.. at lease i dont see any thing there with it.
Was This Post Helpful? 0
  • +
  • -

#7 Fungle  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 242
  • View blog
  • Posts: 336
  • Joined: 06-March 10

Re: HTML page layout not centering.. help please!

Posted 20 January 2011 - 05:00 PM

If you look at my first post, I posted how you can fix it there ^^
Was This Post Helpful? 0
  • +
  • -

#8 Janitor  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 56
  • Joined: 30-July 10

Re: HTML page layout not centering.. help please!

Posted 20 January 2011 - 05:01 PM

Change this, not perfectly centred though...

<div style="padding-left:24px; padding-top:200px"><img alt="" src="images/welcome_6.jpg" width="148" height="17"></div>


To this

<div style="padding-left:550px; padding-top:34px"><img alt="" src="images/welcome_6.jpg" width="148" height="17"></div>

This post has been edited by Janitor: 20 January 2011 - 05:02 PM

Was This Post Helpful? 0
  • +
  • -

#9 CamiloE  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 20-January 11

Re: HTML page layout not centering.. help please!

Posted 20 January 2011 - 05:03 PM

I believe i made the correct changes as you mention but seems as though the background image disappeared... Please let me know if im missing anything? I put the changes i made on the response?

Thanks
Was This Post Helpful? 0
  • +
  • -

#10 Janitor  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 56
  • Joined: 30-July 10

Re: HTML page layout not centering.. help please!

Posted 20 January 2011 - 05:21 PM

here you go centred it now :)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- saved from url=(0045)file:///C:/Users/Roberts/Desktop/Contacts.htm -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link href="./Contacts_files/style.css" type="text/css" rel="stylesheet">
<title>Contacts</title>
<script src="./Contacts_files/swfobject_modified.js" type="text/javascript"></script>
<style type="text/css" media="screen">#FlashID {visibility:hidden}</style><style type="text/css" media="screen">#FlashID {visibility:hidden}</style></head>
<body>
<table width="262%" height="184%" border="0" cellpadding="0" cellspacing="0" style="background-repeat:repeat-x; background-position:top; height:100% ">
  <tbody><tr>
    <td width="1863" align="center" valign="top"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
      <tbody><tr>
        <td height="387" align="left" valign="top"><div align="center">
          <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1313" height="387" align="left" id="FlashID" style="padding-right: 550px; visibility: inherit; " title="Marisflash">
            <param name="movie" value="flash/MarisFlashsite.swf">
            <param name="quality" value="high">
            <param name="wmode" value="opaque">
            <param name="swfversion" value="6.0.65.0">
            <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
            <param name="expressinstall" value="Scripts/expressInstall.swf">
            <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
            <!--[if !IE]>-->
            <object data="http://www.mariservices.com/TestSite/flash/MarisFlashsite.swf" type="application/x-shockwave-flash" width="1313" height="387" align="left">
              <!--<![endif]-->
              <param name="quality" value="high">
              <param name="wmode" value="opaque">
              <param name="swfversion" value="6.0.65.0">
              <param name="expressinstall" value="Scripts/expressInstall.swf">
              <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
              <div>
                <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
                <p><a href="http://www.adobe.com/go/getflashplayer"><img src="./Contacts_files/get_flash_player.gif" alt="Get Adobe Flash player"></a></p>
              </div>
              <!--[if !IE]>-->
            </object>
            <!--<![endif]-->
          </object>
        </div></td>
      </tr>
      <tr>
        <td height="10" align="left" valign="top"><img alt="" src="./Contacts_files/spacer.gif" width="1" height="10"></td>
      </tr>
      <tr>
        <td align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tbody><tr align="center" valign="top">
            <td width="237" style=" solid #CFCFCF "><div style="padding-left:200px; padding-top:17px">
              <div align="center"><img alt="" src="./Contacts_files/welcome_6.jpg" width="148" height="17"></div>
            </div>
            <div style="padding-left:200px; padding-top:11px">
              <div align="right"><a href="http://www.mariservices.com/TestSite/index-5.html#"><img alt="" src="./Contacts_files/con_1.jpg" width="161" height="80" border="0"></a></div>
            </div>            <div style="padding-left:300px; padding-top:12px; padding-bottom:25px">
              <div align="center"><strong>Mari's Cleaning Services.</strong><br>
                4120 Hunt Rd,<br> 
                Fairfax, VA 22032<br>
                <br style="line-height:12px ">
                
                Telephone:&nbsp;<img src="./Contacts_files/spacer.gif" alt="" width="2" height="1">+1 703-626-2030<br>
                
                E-mail: <a href="http://www.mariservices.com/TestSite/index-5.html#" class="style3">support@mariservices.com</a></div>
            </div></td>
            <td width="253" style="border-right:1px solid #CFCFCF "><div style="padding-left:100px; padding-top:17px">
              <div align="center"><img alt="" src="./Contacts_files/servi_6.jpg" width="173" height="17"></div>
            </div>              <div style="padding-left:100px; padding-top:11px; padding-right:30px">
                <div align="center"><strong>Lorem ipsum dolor</strong> sit amet, consec tetuer adipiscing elit. Praesent vestibu lum molestie lacus. Aenean nonummy hendrerit mauris.<br>
                  <br style="line-height:14px ">
                  <strong>Customer Service:</strong><br>
                  Freephone:  +1 800 559 6580
                  Telephone:   <img src="./Contacts_files/spacer.gif" alt="" width="2" height="1">+1 800 603 6035<br>
                  FAX:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+1 800 559 6580 
                  <br>
                  E-mail: <a href="http://www.mariservices.com/TestSite/index-5.html#" class="style3">customers@companyname.com</a><br>
                  <br style="line-height:14px ">
                  <strong>Risk management dept:</strong><br>
                  Freephone:  +1 800 559 6580
                  Telephone:   <img src="./Contacts_files/spacer.gif" alt="" width="2" height="1">+1 800 603 6035<br>
                  FAX:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+1 800 559 6580 
                  <br>
                  E-mail: <a href="http://www.mariservices.com/TestSite/index-5.html#" class="style3">risk@companyname.com</a></div>
              </div>              </td>
            <td><div style="padding-left:50px; padding-top:34px padding-right:300px">
              <div align="center"><img alt="" src="./Contacts_files/says_6.jpg" width="89" height="19"></div>
            </div>
            <div style="padding-left:50px; padding-top:7px; padding-right:24px">
              <p align="left">Praesent vestibu lum molestie lacus. Aenean </p>
              <p align="left">nonummy hendrerit mauris. Phasellus porta.</p>
              <p align="left"> Fus ce suscipit varius mi. turient montes.</p>
</div>            <div style="padding-left:0px; padding-top:15px; padding-bottom:9px">
              <form action="http://www.mariservices.com/TestSite/contact.php" method="get" style="margin:0px; padding:0px ">
                <div align="left" width="100">
                  <table width="228" border="0" cellspacing="0" cellpadding="0">
                    <tbody><tr align="right" valign="middle">
                      <td width="56" height="20">Your Name: </td>
                      <td width="172" height="20"><input type="text" name="your_name" style="width:150px; height:16px; font-family:tahoma; font-size:9px; color:#959595; border:1px solid #4D4D4D "></td>
                      </tr>
                      <tr align="right" valign="middle">
                        <td width="56" height="20">Telephone: </td>
                        <td height="20"><input type="text" name="phone" style="width:150px; height:16px; font-family:tahoma; font-size:9px; color:#959595; border:1px solid #4D4D4D "></td>
                        </tr>
                      <tr align="right" valign="middle">
                        <td width="56" height="20">E-mail: </td>
                        <td height="20"><input type="text" name="email" style="width:150px; height:16px; font-family:tahoma; font-size:9px; color:#959595; border:1px solid #4D4D4D "></td>
                        </tr>
                      <tr align="right" valign="top">
                        <td width="56" height="20"><div style="padding-left:0px; padding-top:4px">Message: </div></td>
                        <td height="20"><textarea cols="10" rows="10" name="message" style="width:150px; height:64px; font-family:tahoma; font-size:9px; color:#959595; border:1px solid #4D4D4D; overflow:auto "></textarea></td>
                        </tr>
                      <tr>
                        <td width="56" height="21" align="right" valign="bottom">&nbsp;</td>
                        <td align="right" valign="bottom"><input name="image2" type="image" src="./Contacts_files/cl_1.jpg" style="margin-right:16px ">
                          <input name="image2" type="image" src="./Contacts_files/cl_1.jpg"></td>
                        </tr>
                    </tbody></table>
                </div>
              </form>
            </div></td>
          </tr>
        </tbody></table></td>
      </tr>
      <tr>
        <td height="7" align="left" valign="top"><img alt="" src="./Contacts_files/spacer.gif" width="1" height="7"></td>
      </tr>
    </tbody></table></td>
    
  </tr><tr bgcolor="#DCDCDC">
    <td height="100%" align="left" valign="top"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
      <tbody><tr align="left" valign="top" class="style1">
        <td width="494"><div style="padding-left:29px; padding-top:29px"><span class="style1">Mariservices.Com © 2011 • <a href="http://www.mariservices.com/TestSite/index-6.html" class="style1">Privacy Policy</a> • <a href="http://www.mariservices.com/TestSite/index-5.html#" class="style1">Terms Of Use</a></span></div></td>
        <td class="style2"><div style="padding-left:0px; padding-top:28px"><strong>ONE CALL CLEANS IT ALL! 1-703-626-2030</strong></div></td>
      </tr>
    </tbody></table></td>
    <td width="10" height="100%">&nbsp;</td>
  </tr>
</tbody></table>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>


</body></html>



I'll attempt to fix background image later good luck!

It's easy for you to fix a few of the cosmetic problems...such as text.

Rather than using tables to align your website have a look into CSS. Tables are many for displaying data where you went wrong was with trying to centre multiple tables. As well as providing padding individual to each table and div. This caused various conflictions and within CSS this could have been done with a single line of code

.div
{
<!-- for example -->
padding-right:500px;
}

This post has been edited by Janitor: 20 January 2011 - 05:45 PM

Was This Post Helpful? 0
  • +
  • -

#11 CamiloE  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 20-January 11

Re: HTML page layout not centering.. help please!

Posted 20 January 2011 - 05:45 PM

That looks much better.. Thanks so much for all the great help!!!! im pulling my hairs here trying to figure it out...
Was This Post Helpful? 0
  • +
  • -

#12 Janitor  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 56
  • Joined: 30-July 10

Re: HTML page layout not centering.. help please!

Posted 20 January 2011 - 05:50 PM

View PostCamiloE, on 21 January 2011 - 12:45 AM, said:

That looks much better.. Thanks so much for all the great help!!!! im pulling my hairs here trying to figure it out...


Pulling your hairs out?

Thanks happy to help, anything you would like me to explain?
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1