Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    10
    Rep Power
    0

    My tables won't align, I have checked HTML and CSS (I think)


    Hi all, i have checked all of my HTML and i have a template page which successfully centres the table. However once the code is run in the children pages the table moves, the wider the table the further right the table moves. First of all, why are my tables even different sizes when i have set them to 700px in the templates HTML. Secondly, why are these tables not centring? I have tried setting CSS margins to 50% left and 50% right, but to no avail. I would appreciate any help, thanks.
  2. #2
  3. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,007
    Rep Power
    2791
    Welcome to DevShed, j95harrington.

    Guess what I am going to ask you for.
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [ANSI C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    10
    Rep Power
    0
    No idea. Code?
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    10
    Rep Power
    0
    Also, i only have until 7pm to submit work.
  8. #5
  9. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,957
    Rep Power
    1046
    Well, then how about actually posting that HTML? Unless, of course, your task isn't all that important and you can still waste some time.

    Post a minimal example for each case. Anything else is simply too vague.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    10
    Rep Power
    0
    I'm not sure what to post without posting all of it, the only bits i know of, which relate to table alignment are right, otherwise i would have found the code that was wrong and corrected it!

    Here is the (i believe correct) code:

    Code:
     <table width="620" border="1" align="center">
    and this:

    Code:
    table {
    	margin-right: 50%;
    	margin-left: 50%;
    }
    If you want other code you are going to need to tell me what it is you want. I'm not a developer, just an A-Level student trying to learn :/
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    10
    Rep Power
    0
    Okay, I'm going to break the first rule i saw on this site, and post an entire template of code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    	
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    	<style type="text/css" media="screen">
    		html, body { height:100%; background-color: #000000;}
    body p {
    	font-size: 12px;
    }
    		body {
    	margin: 0;
    	padding: 0;
    	background-image: url(../her-hair-87216.jpg);
    	background-repeat: no-repeat;
    	bgproperties="fixed"
    ; 	background-attachment: fixed;
    }
    		#flashContent { width:100%; height:100%; }
    		body,td,th {
    	color: #FFFFFF;
    	font-size: 14px;
    	font-family: ITCEras-Demi;
    }
            body {
    	background-attachment: scroll;
    	background-color: #000;
    	background-image: url(file:///Macintosh%20HD/Users/joshua95harrington/Documents/Downloads/Phone%20number%20pure.jpg);
    	background-repeat: no-repeat;
    	background-position: left top;
    }
            body {
    	background-attachment: fixed;
    	background-color: #000;
    	background-image: url();
    	background-repeat: no-repeat;
    	margin-left: 50px;
    	margin-right: 50px;
    }
            table {
    	align: center;
    }
        a {
    	font-size: 36px;
    	color: #FFF;
    }
    a:link {
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    	color: #CCC;
    }
    a:hover {
    	text-decoration: underline;
    	color: #CCC;
    }
    a:active {
    	text-decoration: none;
    }
        #FlashID {
    	right: 1px;
    }
        #apDiv1 {
    	position: absolute;
    	width: 1258px;
    	height: 201px;
    	z-index: 1;
    	left: 0px;
    	top: 433px;
    }
        body table tr td {
    	background-color: #000;
    }
        body table tr td p {
    }
        body {
    	background-color: #000;
    	position: fixed;
    	background-attachment: fixed;
    	background-image: none;
    	background-repeat: no-repeat;
    	background-position: right;
    	color: #000000;
    }
        table {
    	margin-right: 50%;
    	margin-left: 50%;
    	color: #000000;
    }
        </style>
    <script src="../Scripts/swfobject_modified.js" type="text/javascript"></script>
    <script type="text/javascript">
    function MM_goToURL() { //v3.0
      var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
      for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    </script>
    &amp;
    	</head>
    	<body>
        <table width="620" border="1" align="center">
    	  <tr>
    	    <td width="600px" height="350" bgcolor="#000000"><!-- TemplateBeginEditable name="Header New" --><img src="../pure header.jpg" alt="" width="500" height="300" />
            <!-- TemplateEndEditable --></td>
    	    <td width="29%" bgcolor="#000000"><img src="../Phone number pure.jpg" alt="" width="287" height="64" /></td>
          </tr>
    	  <tr>
    	    <td height="984" rowspan="5" align="" valign="top" bgcolor="#000000"><!-- TemplateBeginEditable name="body" -->
    	      <p>bodbdfgbgbdf y d w      </p>
            <p>&nbsp;</p>
    	    <!-- TemplateEndEditable -->
            <div>
              <p>&nbsp;</p>
              <p>&nbsp;</p
              >
              <p>&nbsp;</p>
              <p>&nbsp;</p>
              <p>Visit our new Facebook page:</p>
              <p>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="212" height="112" id="FlashID" onfocus="MM_goToURL('parent','www.facebook.com');return document.MM_returnValue">
        <param name="movie" value="../facebook.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="9.0.45.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 type="application/x-shockwave-flash" data="../facebook.swf" width="212" height="112">
          <!--<![endif]-->
          <param name="quality" value="high" />
          <param name="wmode" value="opaque" />
          <param name="swfversion" value="9.0.45.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="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
            </div>
          <!--[if !IE]>-->
          </object>
        <!--<![endif]-->
      </object>
              </p>
            </div></td>
    	    <td height="59"><a href="../Home.html" target="_self">Home</a></td>
          </tr>
    	  <tr>
    	    <td height="57"><p><a href="../Booking.html">Book</a><a href="../Booking.html">i</a><a href="../Booking.html">ngs</a></p></td>
          </tr>
    	  <tr>
    	    <td height="58"><a href="../About Us.html">About Us</a></td>
          </tr>
    	  <tr>
    	    <td height="58"><a href="../Contact Us.html">Contact Us</a></td>
          </tr>
    	  <tr>
    	    <td>&nbsp;</td>
          </tr>
        </table>
        <script type="text/javascript">
    swfobject.registerObject("FlashID");
        </script>
    </body>
    </html>
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    10
    Rep Power
    0
    And this is the code for one of the child pages (home.html):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><!-- InstanceBegin template="../Unnamed Site 2/Templates/Home.dwt" codeOutsideHTMLIsLocked="false" -->
    <head>
    	
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    	<style type="text/css" media="screen">
    		html, body { height:100%; background-color: #000000;}
    body p {
    	font-size: 12px;
    }
    		body {
    	margin: 0;
    	padding: 0;
    	background-image: url(her-hair-87216.jpg);
    	background-repeat: no-repeat;
    	bgproperties="fixed"
    ; 	background-attachment: fixed;
    }
    		#flashContent { width:100%; height:100%; }
    		body,td,th {
    	color: #FFFFFF;
    	font-size: 14px;
    	font-family: ITCEras-Demi;
    }
            body {
    	background-attachment: scroll;
    	background-color: #000;
    	background-image: url(file:///Macintosh%20HD/Users/joshua95harrington/Documents/Downloads/Phone%20number%20pure.jpg);
    	background-repeat: no-repeat;
    	background-position: left top;
    }
            body {
    	background-attachment: fixed;
    	background-color: #000;
    	background-image: url();
    	background-repeat: no-repeat;
    	margin-left: 50px;
    	margin-right: 50px;
    }
            table {
    	align: center;
    }
        a {
    	font-size: 36px;
    	color: #FFF;
    }
    a:link {
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    	color: #CCC;
    }
    a:hover {
    	text-decoration: underline;
    	color: #CCC;
    }
    a:active {
    	text-decoration: none;
    }
        #FlashID {
    	right: 1px;
    }
        #apDiv1 {
    	position: absolute;
    	width: 1258px;
    	height: 201px;
    	z-index: 1;
    	left: 0px;
    	top: 433px;
    }
        body table tr td {
    	background-color: #000;
    }
        body table tr td p {
    }
        body {
    	background-color: #000;
    	position: fixed;
    	background-attachment: fixed;
    	background-image: none;
    	background-repeat: no-repeat;
    	background-position: right;
    	color: #000000;
    }
        table {
    	margin-right: 50%;
    	margin-left: 50%;
    	color: #000000;
    }
        </style>
    <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
    <script type="text/javascript">
    function MM_goToURL() { //v3.0
      var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
      for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    </script>
    &amp;
    	</head>
    	<body onload="MM_preloadImages('sexy_young_woman_with_beautiful_long_hair.jpg')">
        <table width="620" border="1" align="center">
    	  <tr>
    	    <td width="600px" height="350" bgcolor="#000000"><!-- InstanceBeginEditable name="Header New" -->
    
    
        <object data="Pure FINAL intro.swf"></object>
    	      <p>&nbsp;</p>
    	      <p>&nbsp;</p>
    	    <!-- InstanceEndEditable --></td>
    	    <td width="29%" bgcolor="#000000"><img src="Phone%20number%20pure.jpg" alt="" width="287" height="64" /></td>
          </tr>
    	  <tr>
    	    <td height="984" rowspan="5" align="" valign="top" bgcolor="#000000"><!-- InstanceBeginEditable name="body" -->
    	      <p>Welcome to the Pure Hair Design website.</p>
    	      <p>From here you can find out more about  us, check when there are available bookings </p>
    	      <p>and contact the salon directly.</p>
    	      <p>&nbsp;</p>
    	      <p>With over 20 years of experience, our hairdressers know how to cut it just the way you like.</p>
    	      <p>Join us in our bright, clean salon today.</p>
    	      <p>&nbsp;</p>
    	      <p>For tips on hair care visit the Pantene website by clicking the image below:</p>
    	      <p><a href="http://www.pantene.com/en-US/pages/index.aspx" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','sexy_young_woman_with_beautiful_long_hair.jpg',1)"><img src="beautiful-long-hair.jpg" width="262" height="358" id="Image2" /></a></p>
    	      <p>&nbsp;</p>
    	      <p>&nbsp;</p>
    	    <!-- InstanceEndEditable -->
            <div>
              <p>&nbsp;</p>
              <p>&nbsp;</p
              >
              <p>&nbsp;</p>
              <p>&nbsp;</p>
              <p>Visit our new Facebook page:</p>
              <p>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="212" height="112" id="FlashID" onfocus="MM_goToURL('parent','Templates/www.facebook.com');return document.MM_returnValue">
        <param name="movie" value="facebook.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="9.0.45.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 type="application/x-shockwave-flash" data="facebook.swf" width="212" height="112">
          <!--<![endif]-->
          <param name="quality" value="high" />
          <param name="wmode" value="opaque" />
          <param name="swfversion" value="9.0.45.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="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
            </div>
          <!--[if !IE]>-->
          </object>
        <!--<![endif]-->
      </object>
              </p>
            </div></td>
    	    <td height="59"><a href="Home.html" target="_self">Home</a></td>
          </tr>
    	  <tr>
    	    <td height="57"><p><a href="Booking.html">Book</a><a href="Booking.html">i</a><a href="Booking.html">ngs</a></p></td>
          </tr>
    	  <tr>
    	    <td height="58"><a href="About%20Us.html">About Us</a></td>
          </tr>
    	  <tr>
    	    <td height="58"><a href="Contact%20Us.html">Contact Us</a></td>
          </tr>
    	  <tr>
    	    <td>&nbsp;</td>
          </tr>
        </table>
        <script type="text/javascript">
    swfobject.registerObject("FlashID");
        </script>
    </body>
    <!-- InstanceEnd --></html>
  16. #9
  17. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,957
    Rep Power
    1046
    None of the tables if centered. The parent table may look like it's centered because it's wider than the other. But it isn't.

    The problem is that you've set the body element to position:fixed;, which makes it lose its full width. Neither align="center" nor margin-left:auto;margin-right:auto; work in this case (margin...:50% is wrong anyway).

    I don't even understand why you'd apply position:fixed to the whole body. This will cut off the document if happens to be higher than the user's screen height. So remove that and either use the old align="center" or the auto margins.

    Note that this kind of table layouting and the use of attributes like "width" or "align" is generally obsolete. That's what people did in the 90s. If this is legacy code, of course you won't be able to rewrite everything. But if you start a new design, use a contemporary approach. The old attributes are already marked as deprecated and will finally be removed in HTML5.
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    10
    Rep Power
    0

    Talking


    At last!! thank you so much . I would have taken a long time to have seen that, being quite new to all this. And i am aware this is dated code, my teachers and the exam board insist upon it however. England -_-... thank you
  20. #11
  21. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    10
    Rep Power
    0
    Hi, sorry to be difficult. but some of my pages are still wider then others (although centred), surely the template should be making them a consistent size?
  22. #12
  23. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,957
    Rep Power
    1046
    With "page" you mean the tables?

    Well, the "width" of a table is generally just the minimum width. If the content is wider, the table will grow accordingly. Do you want tiny scroll bars instead?
  24. #13
  25. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    10
    Rep Power
    0
    Hi, now i know that width is minimum, and not maximum, my problem is solved. i simply increased the width. Thank you
  26. #14
  27. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Originally Posted by j95harrington
    And i am aware this is dated code, my teachers and the exam board insist upon it however. England -_-
    Welcome to DevShed Forums, j95harrington.

    Is this for an "A level" in web design or what? Unfortunately, traditional educational systems are fairly well known for not keeping curricula updated to match current thinking in quickly evolving fields of study/work, especially when it comes to science and technology.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  28. #15
  29. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    10
    Rep Power
    0
    It's an a-level in applied ICT, however it is not very applicable to anything you would actually be doing in an ICT setting. Just glorified word processing. I also study biology, which is slightly better, but nothing exactly cutting edge
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo