Databases
StackOverflow2013
Postsdbo
POTable Layout and CSS
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTable Layout and CSS
    text
    copied!<p>I cannot figure out what is wrong with my .css as my <code>&lt;table&gt;</code> is not centered and stays left.<br> I tried the <code>margin-left</code> and <code>margin-right</code> set to <code>auto</code> without success.<br> Am I missing a <code>&lt;div&gt;</code> tag for my table, I have set an <code>id="content"</code> to try to center it but does not work.</p> <p>HTML:</p> <pre><code>&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Assignment 5: Retouching Images&lt;/title&gt; &lt;meta name="description" content="retouching images, photoshop"&gt; &lt;meta name="keywords" content="images, modify, photoshop"&gt; &lt;link href="css/rtouch.css" rel="stylesheet"&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="wrapper"&gt; &lt;div id="header"&gt; &lt;img src="images/logoheader.jpg" alt="Armchair Bookstore Logo" width="975" height="230" class="floatcenter"&gt; &lt;/div&gt; &lt;!-- header section ends --&gt; &lt;!-- menu section starts --&gt; &lt;div id="menu"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="index.html" id="current" class="first"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="newrelease.html"&gt;New Releases&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="placeholder.html"&gt;Special Selection&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="placeholder.html"&gt;On Sale&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!-- menu section ends --&gt; &lt;div id="content"&gt; &lt;table class="center"&gt; &lt;caption&gt; Image Modification &lt;/caption&gt; &lt;tbody&gt; &lt;tr&gt; &lt;th&gt;Original Image&lt;/th&gt; &lt;th&gt;Retouched Image&lt;/th&gt; &lt;th&gt;Specifications&lt;/th&gt; &lt;th&gt;Comments&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td &gt;&lt;img src="images/wedding_org_thumb.jpg" alt="Original Wedding Photo Thumbnail" width="100" height="80" class="floatcenter"&gt;&lt;/td&gt; &lt;td &gt;&lt;img src="images/wedding_rt_thumb.jpg" alt="Retouched Wedding Photo Thumbnail" width="100" height="80" class="floatcenter"&gt;&lt;/td&gt; &lt;td&gt;350 x 280 at 72 DPI&lt;/td&gt; &lt;td&gt;Blablablablabla&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td &gt;&lt;img src="images/redeye_org_thumb.jpg" alt="Original Redeye Baby Photo Thumbnail" width="100" height="131" class="floatcenter"&gt;&lt;/td&gt; &lt;td &gt;&lt;img src="images/redeye_rt_thumb.jpg" alt="Retouched Redeye Baby Photo Thumbnail" width="100" height="115" class="floatcenter"&gt;&lt;/td&gt; &lt;td&gt;350 x 280 at 72 DPI&lt;/td&gt; &lt;td&gt;Blablablablabla&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td &gt;&lt;img src="images/balloons_org_thumb.jpg" alt="Original Balloon Photo Thumbnail" width="100" height="66" class="floatcenter"&gt;&lt;/td&gt; &lt;td &gt;&lt;img src="images/balloons_rt_thumb.jpg" alt="Retouched Balloon Photo Thumbnail" width="100" height="83" class="floatcenter"&gt;&lt;/td&gt; &lt;td&gt;350 x 280 at 72 DPI&lt;/td&gt; &lt;td&gt;Blablablablabla&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="footer"&gt; &lt;br&gt; Copyright &amp;copy; 2012 JC Design. All Rights Reserved | 1.800.604.6305 &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>And here is the .CSS</p> <pre><code>/*Body*/ html {background-color: #e2e2e2} body { color: #000; background: #fff; font-family: "Helvetica Neue",helvetica,arial, sans; font-size: 90%; text-align: left; width: 975px; margin-left: auto; margin-right: auto; } fieldset { margin: 25px; border-radius: 15px; } p { margin-left: 25px; margin-right: 30px; text-align: left; } /*General link formatting*/ a:link { color: #f60; background: #fff; } a:visited { color: #f60; } a:hover { color: #00aed7; text-decoration: none; } a:active { color: #000; } /*Page wrapper*/ #wrapper { margin: 0 auto; width: 975px; text-align: left; } /*Banner styles*/ #header { width: 975px; padding-left: 0px; padding-bottom: 10px; padding-top: 0px; } #footer { background-color: #04346c; color: #fff; font-family: "Helvectica Neue,",helvetica, arial, sans; font-size: 80%; font-weight: normal; text-align: center; width: 955px; padding-left: 20px; padding-bottom: 10px; padding-top: 5px; } /*---------------Navigation styles-------------------*/ #menu { float: left; margin:0; padding-top: 0px; width: 100%; background: #04346c; color: #fff; } #menu ul { margin: 0px; position: relative } #menu ul li { display: inline; } #menu ul li a { float: left; padding: 5px 16px; margin-right: 0px; background: #437DD4; color: #fff; text-decoration: none; border-right: 1px solid #e2e2e2; } #menu ul li a:hover { color: #fff; background: #0f4da8; text-decoration: underline; } #menu li a#current { background: #6a94d4; color: #fff; } /*Navbar styles*/ #navcontainer { width: 975px; background: #04346c; color: #fff; padding: 5px 0; font-weight: bold; } #navcontainer p { margin: 0; padding: 6px; text-align: center; } #navcontainer p a { padding: 4px 10px; color: #fff; background: #04346c; font-size: 120%; } #navcontainer p a:hover { background: #4284d3; text-decoration: none; } #navcontainer p a#current { text-decoration: none; padding: 4px 10px; border: none; } /*Content styles*/ .floatright { float: right; margin: 20px; padding: 1px; border: none; } .floatright2 { float: right; margin: 20px; padding: 1px; border: none; } /*Headings*/ legend { font-weight: bold; font-size: 120%; color: #224080; margin-left: 20px; } h1 { margin-left: 20px; padding: 2px; } h2 { margin-left: 25px; font-size: 110%; } /*Table styles*/ #table { margin-left: 45px; margin-right: 45px; border-collapse: collapse; } #table.center { position: relative; margin: auto; border-collapse: collapse; } td, th { border-style: none; border-width: thin; border-color: #000; padding: 15px; border-collapse: collapse; } caption { width: auto; font-size: 1.2em; padding: 10px; font-weight: bold; color: #f60; margin-left: 20px; } #content { margin-left: auto; margin-right: auto; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload