SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    center a div inside an artisteer template

    Hi,
    I created a quick template with Artisteer and have modified the CSS a little to suit my needs.
    The problem is Artisteer generates weird code and I can't get a div to be centered (the container where main content will go) The Div class is "art-post" I have tried to center it with text-align or even align=center in html but it must inherit its position from somewhere else. Basically I want the art-post div to be centered.
    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
    <head>
        <!--
        Created by Artisteer v3.0.0.33215
        Base template (without user's data) checked by <a href="http://validator.w3.org" rel="nofollow">http://validator.w3.org</a> : "This page is valid XHTML 1.0 Transitional"
        -->
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Artisteer </title>
     
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
        <!--[if IE 6]><link rel="stylesheet" href="style.ie6.css" type="text/css" media="screen" /><![endif]-->
        <!--[if IE 7]><link rel="stylesheet" href="style.ie7.css" type="text/css" media="screen" /><![endif]-->
     
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
    <div id="art-main">
            <div class="art-sheet">
                <div class="art-sheet-body">
                    <div class="art-header">
                        <div class="art-header-center">
                            <div class="art-header-jpeg"></div>
                        </div>
                            <div class="art-header-fluid-object"></div>
     
                    </div>
                    <div class="art-nav">
                    	<div class="l"></div>
                    	<div class="r"></div>
                    	<div class="art-nav-center">
                    	<ul class="art-menu">
                    		<li>
                    			<a href="#" class="active"><span class="l"></span><span class="r"></span><span class="t">Home</span></a>
                    		</li>
                    		<li>
                    			<a href="#"><span class="l"></span><span class="r"></span><span class="t">Menu Item</span></a>
                    			<ul>
                    				<li><a href="#">Menu Subitem 1</a>
                    					<ul>
                    						<li><a href="#">Menu Subitem 1.1</a></li>
                    						<li><a href="#">Menu Subitem 1.2</a></li>
                    						<li><a href="#">Menu Subitem 1.3</a></li>
                    					</ul>
                    				</li>
                    				<li><a href="#">Menu Subitem 2</a></li>
                    				<li><a href="#">Menu Subitem 3</a></li>
                    			</ul>
                    		</li>		
                    		<li>
                    			<a href="#"><span class="l"></span><span class="r"></span><span class="t">About</span></a>
                    		</li>
                    	</ul>
                    	</div>
                    </div>
                    <div class="art-content-layout">
                        <div class="art-content-layout-row">
                            <div class="art-layout-cell art-content">
                              <div class="art-post">
                                  <div class="art-post-tl"></div>
                                  <div class="art-post-tr"></div>
                                  <div class="art-post-bl"></div>
                                  <div class="art-post-br"></div>
                                  <div class="art-post-tc"></div>
                                  <div class="art-post-bc"></div>
                                  <div class="art-post-cl"></div>
                                  <div class="art-post-cr"></div>
                                  <div class="art-post-cc"></div>
                                  <div class="art-post-body">
                              <div class="art-post-inner art-article">
                                              <h2 class="art-postheader">Welcome</h2>
                                              <div class="art-postcontent">
     
                                                  <img src="images\preview.jpg" alt="an image" style="float:left;" />
                                                  <p>Lorem ipsum dolor sit amet,
                                                  <a href="#" title="link">link</a>, <a class="visited" href="#" title="visited link">visited link</a>,
                                                   <a class="hover" href="#" title="hovered link">hovered link</a> consectetuer
                                                  adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper,
                                                  velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl
                                                  in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros.</p>
                                                  <p>
                                                  	<span class="art-button-wrapper">
                                                  		<span class="art-button-l"> </span>
                                                  		<span class="art-button-r"> </span>
                                                  		<a class="art-button" href="javascript:void(0)">Read more...</a>
                                                  	</span>
                                                  </p>
                                                  <div class="cleared"></div>
                                                  <div class="art-content-layout overview-table">
                                                  	<div class="art-content-layout-row">
                                                  		<div class="art-layout-cell">
                                                        <div class="overview-table-inner">
                                                  	      <h4>Support</h4>
                                                  						  <img src="images/01.png" width="55" height="55" alt="an image" class="image" />
                                                  						  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                                                  						  Quisque sed felis. Aliquam sit amet felis. Mauris semper,
                                                  						  velit semper laoreet dictum, quam diam dictum urna. </p>
                                                         </div>
                                                  		</div><!-- end cell -->
                                                  		<div class="art-layout-cell">
                                                      <div class="overview-table-inner">
                                                  		  <h4>Development</h4>
                                                  						  <img src="images/02.png" width="55" height="55" alt="an image" class="image" />
                                                  						  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                                                  						  Quisque sed felis. Aliquam sit amet felis. Mauris semper,
                                                  						  velit semper laoreet dictum, quam diam dictum urna. </p>
                                                  				</div>
                                                  		</div><!-- end cell -->
                                                  		<div class="art-layout-cell">
                                                      <div class="overview-table-inner">
                                                  		  <h4>Strategy</h4>
     
                                                  						  <img src="images/03.png" width="55" height="55" alt="an image" class="image" />
                                                  						  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                                                  						  Quisque sed felis. Aliquam sit amet felis. Mauris semper,
                                                  						  velit semper laoreet dictum, quam diam dictum urna. </p>
                                                                </div>
                                                  		</div><!-- end cell -->
                                                  	</div><!-- end row -->
                                                  </div><!-- end table -->
     
                                              </div>
                                              <div class="cleared"></div>
                              </div>
     
                              		<div class="cleared"></div>
                                  </div>
                              </div>
                              <div class="art-post">
                                  <div class="art-post-tl"></div>
                                  <div class="art-post-tr"></div>
                                  <div class="art-post-bl"></div>
                                  <div class="art-post-br"></div>
                                  <div class="art-post-tc"></div>
                                  <div class="art-post-bc"></div>
                                  <div class="art-post-cl"></div>
                                  <div class="art-post-cr"></div>
                                  <div class="art-post-cc"></div>
                                  <div class="art-post-body">
                              <div class="art-post-inner art-article">
                                              <h2 class="art-postheader">Text, <a href="#" rel="bookmark" title="Permanent Link to this Post">Link</a>, <a class="visited" href="#" rel="bookmark" title="Visited Hyperlink">Visited</a>, <a class="hovered" href="#" rel="bookmark" title="Hovered Hyperlink">Hovered</a></h2>
                                              <div class="art-postcontent">
                                                  <p>Lorem <sup>superscript</sup> dolor <sub>subscript</sub> amet, consectetuer adipiscing elit, <a href="#" title="test link">test link</a>.
                                                  	Nullam dignissim convallis est. Quisque aliquam. <cite>cite</cite>.
                                                  	Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
                                                  	Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
                                                  	Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. <acronym title="National Basketball Association">NBA</acronym> Mauris a ante.
                                                  	Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.
                                                  	Morbi imperdiet augue quis tellus.  <abbr title="Avenue">AVE</abbr></p>
     
                                                    <h1>Heading 1</h1>
                                                    <h2>Heading 2</h2>
                                                    <h3>Heading 3</h3>
                                                    <h4>Heading 4</h4>
                                                    <h5>Heading 5</h5>
                                                    <h6>Heading 6</h6>
     
                                                      <blockquote>
                                                          <p>
                                                              “This stylesheet is going to help so freaking much.”
                                                              <br />
                                                              -Blockquote
                                                          </p>
                                                      </blockquote>
                                                    <br />
                                                    <table class="art-article" border="0" cellspacing="0" cellpadding="0">
                                                    <tbody>
                                                      <tr>
                                                        <th>Header</th>
                                                        <th>Header</th>
                                                        <th>Header</th>
                                                      </tr>
                                                      <tr>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                      </tr>
                                                      <tr class="even">
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                      </tr>
                                                      <tr>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                        <td>Data</td>
                                                      </tr>
                                                    </tbody></table>
     
                                                  	<p>
                                                  		<span class="art-button-wrapper">
                                                  			<span class="art-button-l"> </span>
                                                  			<span class="art-button-r"> </span>
                                                  			<a class="art-button" href="javascript:void(0)">Join&nbsp;Now!</a>
                                                  		</span>
                                                  	</p>
     
                                              </div>
                                              <div class="cleared"></div>
                              </div>
     
                              		<div class="cleared"></div>
                                  </div>
                              </div>
                              <div class="cleared"></div>
                            </div>
                        </div>
                    </div>
                    <div class="cleared"></div>
                    <div class="art-footer">
                        <div class="art-footer-t"></div>
                        <div class="art-footer-b"></div>
                        <div class="art-footer-body">
                            <div class="art-footer-text">
                                <p><a href="#">Link1</a> | <a href="#">Link2</a> | <a href="#">Link3</a></p><p>Copyright  2011. All Rights Reserved.</p>
                            </div>
                    		<div class="cleared"></div>
                        </div>
                    </div>
            		<div class="cleared"></div>
                </div>
            </div>
            <div class="cleared"></div>
            <p class="art-page-footer"><a href="http://www.artisteer.com/">Web Template</a> created with Artisteer.</p>
        </div>
     
     
     
     
     
    </body>
    </html>
    CSS:

    Code:
    * begin Page */
    /* Created by Artisteer v3.0.0.33215 */
     
    #art-main, table
    {
        font-family: "Century Gothic",Arial, Helvetica, Sans-Serif;
        font-style: normal;
        font-weight: normal;
        font-size: 12px;
    }
     
    h1, h2, h3, h4, h5, h6, p, a, ul, ol, li
    {
        margin: 0;
        padding: 0;
    }
     
    body
    {
      margin: 0 auto;
      padding: 0;
      color: #242424;
      background-color: #FFFFFF;
      background-image: url('images/Bottom_texture.jpg');
      background-repeat: repeat-x;
      background-attachment: fixed;
      background-position: bottom left;
    }
     
    .art-postcontent,
    .art-postcontent li,
    .art-postcontent table,
    .art-postcontent a,
    .art-postcontent a:link,
    .art-postcontent a:visited,
    .art-postcontent a.visited,
    .art-postcontent a:hover,
    .art-postcontent a.hovered
    {
        font-family: "Century Gothic",Arial, Helvetica, Sans-Serif;
        text-align: left;
    }
     
    .art-postcontent p
    {
        margin: 12px 0 12px 15px;
    }
     
    h1, h2, h3, h4, h5, h6,
    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
    h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link,
    h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited,
    h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
    {
      font-family: "Century Gothic",Arial, Helvetica, Sans-Serif;
      font-style: normal;
      font-weight: bold;
      font-size: 20px;
      text-align: left;
    }
     
    .art-postcontent a
    {
      text-decoration: none;
      color: #930B29;
    }
     
    .art-postcontent a:link
    {
      text-decoration: none;
      color: #930B29;
    }
     
    .art-postcontent a:visited, .art-postcontent a.visited
    {
     
      color: #930B29;
    }
     
    .art-postcontent  a:hover, .art-postcontent a.hover
    {
     
     
      color: #C20F36;
    }
     
     
    .art-postcontent h1
    {
       margin: 12px 0 12px 0; 
       color: #4F4F4F;
       font-size: 24px; 
    }
     
    .art-postcontent h2
    {
        color: #4F4F4F;
       margin: 13px 0 13px 0; 
       font-size: 18px;   
    }
     
    .art-postcontent h3
    {
       margin: 16px 0 16px 0; 
      color: #C20F36; 
      font-size: 18px;    
    }
     
    .art-postcontent h4
    {
       margin: 18px 0 18px 0; 
       color: #242424; 
       font-size: 15px;   
    }
     
    .art-postcontent h5
    {
       margin: 20px 0 20px 0; 
       color: #242424;   
       font-size: 13px;
    }
     
    .art-postcontent h6
    {
       margin: 25px 0 25px 0; 
       color: #242424;
       font-size: 12px;      
    }
     
    ul
    {
      list-style-type: none;
    }
     
    ol
    {
      list-style-position: inside;
    }
     
    #art-main
    {
      position: relative;
      width: 100%;
      left: 0;
      top: 0;
      cursor:default;
    }
     
     
     
     
    .cleared
    {
      float: none;
      clear: both;
      margin: 0;
      padding: 0;
      border: none;
      font-size: 1px;
    }
     
    form
    {
      padding: 0 !important;
      margin: 0 !important;
    }
     
    table.position
    {
      position: relative;
      width: 100%;
      table-layout: fixed;
    }
    /* end Page */
     
    /* begin Box, Sheet */
    .art-sheet
    {
      position: relative;
      margin: 0 auto;
      min-width: 1px;
      min-height: 1px;
    }
     
    .art-sheet-body
    {
      position: relative;
      padding: 0;
    }
     
     
    .art-sheet
    {
      top: 0 !important;
      margin-bottom: 0 !important;
      cursor:auto;
      width: 100%;
    }
     
     
    /* end Box, Sheet */
     
    /* begin Header */
    div.art-header
    {
      margin: 0 auto;
      position: relative;
      width: 100%;
      height: 200px;
      overflow: hidden;
    }
     
     
    div.art-header-center
    {
    	position: relative;
    	width: 1920px;
    	left:50%;
    }
     
     
     
    div.art-header-jpeg
    {
      position: absolute;
      top: 0;
      left:-50%;
      width: 1920px;
      height: 200px;
      background-image: url('images/header.jpg');
      background-repeat: no-repeat;
      background-position: center center;
    }
     
    div.art-header-fluid-object
    {
      display: block;
      margin: 0 auto;
      position: relative;
      top: 9px;
      width: 593px;
      background-image: url('images/fluid_object.png');
      background-repeat: no-repeat;
      background-position: center center;
      height: 190px;
    }
     
    /* end Header */
     
    /* begin Logo */
    div.art-logo
    {
      display: block;
      position: absolute;
      left: 10px;
      top: 20px;
      width: 500px;
    }
     
    h1.art-logo-name
    {
      display: block;
      text-align: {HorizontalAlign};
    }
     
    h1.art-logo-name, h1.art-logo-name a, h1.art-logo-name a:link, h1.art-logo-name a:visited, h1.art-logo-name a:hover
    {
      font-size: 24px;
      text-decoration: none;
      padding: 0;
      margin: 0;
      color: {NameFontColor} !important;
    }
     
     
    h2.art-logo-text, 
    h2.art-logo-text a,
    h2.art-logo-text a:link,
    h2.art-logo-text a:visited,
    h2.art-logo-text a:hover
    {
      font-size: 14px;
      padding: 0;
      margin: 0;
      color: {TextFontColor} !important;
    }
     
    h2.art-logo-text
    {
      display: block;
      text-align: {HorizontalAlign};
    }
    /* end Logo */
     
    /* begin Menu */
    /* menu structure */
     
    .art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
    {
        outline: none;
    }
     
    .art-menu, .art-menu ul
    {
      margin: 0;
      padding: 0;
      border: 0;
      list-style-type: none;
      display: block;
    }
     
    .art-menu li
    {
      margin: 0;
      padding: 0;
      border: 0;
      display: block;
      float: left;
      position: relative;
      z-index: 5;
      background: none;
    }
     
    .art-menu li:hover
    {
      z-index: 10000;
      white-space: normal;
    }
     
    .art-menu li li
    {
      float: none;
    }
     
    .art-menu ul
    {
      visibility: hidden;
      position: absolute;
      z-index: 10;
      left: 0;
      top: 0;
      background: none;
    }
     
    .art-menu li:hover>ul
    {
      visibility: visible;
      top: 100%;
    }
     
    .art-menu li li:hover>ul
    {
      top: 0;
      left: 100%;
    }
     
    .art-menu:after, .art-menu ul:after
    {
      content: ".";
      height: 0;
      display: block;
      visibility: hidden;
      overflow: hidden;
      clear: both;
    }
    .art-menu, .art-menu ul
    {
      min-height: 0;
    }
     
    .art-menu ul
    {
      background-image: url('images/spacer.gif');
      padding: 10px 30px 30px 30px;
      margin: -10px 0 0 -30px;
    }
     
    .art-menu ul ul
    {
      padding: 30px 30px 30px 10px;
      margin: -30px 0 0 -10px;
    }
     
     
     
     
    div.art-nav-center
    {
      position: relative;
      float: right;
      right: 50%;
     
    }
     
    ul.art-menu
    {
      position: relative;
      float: left;
      left: 50%;
    }
     
    .firefox2 ul.art-menu
    {
      float: none;
    }
     
     
    /* menu structure */
     
    .art-menu
    {
      padding: 0 0 0 0;
    }
     
    .art-nav
    {
      position: relative;
      min-height: 39px;
      z-index: 100;
    }
     
    .art-nav .l, .art-nav .r
    {
      position: absolute;
      z-index: -1;
      top: 0;
      height: 100%;
      background-image: url('images/nav.png');
    }
     
    .art-nav .l
    {
      left: 0;
      right: 0;
    }
     
    .art-nav .r
    {
      right: 0;
      width: 1920px;
      clip: rect(auto, auto, auto, 1920px);
    }
     
     
    /* end Menu */
     
    /* begin MenuItem */
    .art-menu a
    {
      position: relative;
      display: block;
      overflow: hidden;
      height: 39px;
      cursor: pointer;
      text-decoration: none;
    }
     
     
    .art-menu ul li
    {
        margin:0;
        clear: both;
    }
     
     
    .art-menu a .r, .art-menu a .l
    {
      position: absolute;
      display: block;
      top: 0;
      z-index: -1;
      height: 127px;
      background-image: url('images/menuitem.png');
    }
     
    .art-menu a .l
    {
      left: 0;
      right: 0;
    }
     
    .art-menu a .r
    {
      width: 400px;
      right: 0;
      clip: rect(auto, auto, auto, 400px);
    }
     
    .art-menu a .t, .art-menu ul a, .art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
    {
      font-size: 22px;
      text-align: left;
      text-decoration: none;
    }
     
    .art-menu a .t
    {
      color: #080808;
      padding: 0 22px;
      margin: 0 0;
      line-height: 39px;
      text-align: center;
    }
     
    .art-menu a:hover .l, .art-menu a:hover .r
    {
      top: -44px;
    }
     
    .art-menu li:hover>a .l, .art-menu li:hover>a .r
    {
      top: -44px;
    }
     
    .art-menu li:hover a .l, .art-menu li:hover a .r
    {
      top: -44px;
    }
    .art-menu a:hover .t
    {
      color: #000000;
    }
     
    .art-menu li:hover a .t
    {
      color: #000000;
    }
     
    .art-menu li:hover>a .t
    {
      color: #000000;
    }
     
     
    .art-menu a.active .l, .art-menu a.active .r
    {
      top: -88px;
    }
     
    .art-menu a.active .t
    {
      color: #D9D9D9;
    }
    /* end MenuItem */
     
    /* begin MenuSeparator */
    .art-menu .art-menu-li-separator
    {
      display: block;
      width: 1px;
      height:39px;
    }
    .art-nav .art-menu-separator
    {
      display: block;
      margin:0 auto;
      width: 1px;
      height: 39px;
      background-image: url('images/menuseparator.png');
    }
    /* end MenuSeparator */
     
    /* begin MenuSubItem */
    .art-menu ul a
    {
      display: block;
      text-align: center;
      white-space: nowrap;
      height: 20px;
      width: 180px;
      overflow: hidden;
      line-height: 20px;
      background-image: url('images/subitem.png');
      background-position: left top;
      background-repeat: repeat-x;
      border-width: 1px;
      border-style: solid;
      border-color: #F0335C;
    }
     
    .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
    {
      display: inline;
      float: none;
      margin: inherit;
      padding: inherit;
      background-image: none;
      text-align: inherit;
      text-decoration: inherit;
    }
     
    .art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
    {
      text-align: left;
      text-indent: 12px;
      text-decoration: none;
      line-height: 20px;
      color: #000000;
      font-size: 12px;
      margin:0;
      padding:0;
    }
     
    .art-menu ul li a:hover
    {
      color: #000000;
      border-color: #F46C89;
      background-position: 0 -20px;
    }
     
    .art-menu ul li:hover>a
    {
      color: #000000;
      border-color: #F46C89;
      background-position: 0 -20px;
    }
     
    .art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
    {
      color: #000000;
    }
     
    .art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
    {
      color: #000000;
    }
     
     
    /* end MenuSubItem */
     
    /* begin Layout */
    .art-content-layout
    {
      display: table;
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
      background-color: Transparent;
      border: none !important;
      padding:0 !important;
    }
    .art-layout-cell, .art-content-layout-row
    {
      background-color: Transparent;
      vertical-align: top;
      text-align: center;
      border: none !important;
      margin:0 !important;
      padding:0 !important;
    }
    .art-content-layout .art-content-layout{width: auto;margin:0;}
    .art-content-layout .art-layout-cell, .art-content-layout .art-layout-cell .art-content-layout .art-layout-cell{display: table-cell;}
    .art-layout-cell .art-layout-cell{display: block;}
    .art-content-layout-row {display: table-row;}
    .art-layout-glare{position:relative;}/* end Layout */
     
    /* begin Box, Block */
    .art-block
    {
      position: relative;
      margin: 0 auto;
      min-width: 1px;
      min-height: 1px;
    }
     
    .art-block-body
    {
      position: relative;
      padding: 5px;
    }
     
     
    .art-block
    {
      margin: 5px;
    }
     
    /* end Box, Block */
     
    /* begin Box, BlockContent */
    .art-blockcontent
    {
      position: relative;
      margin: 0 auto;
      min-width: 1px;
      min-height: 1px;
    }
     
    .art-blockcontent-body
    {
      position: relative;
      padding: 0;
    }
     
     
    .art-blockcontent-body, 
    .art-blockcontent-body li, 
    .art-blockcontent-body a,
    .art-blockcontent-body a:link,
    .art-blockcontent-body a:visited,
    .art-blockcontent-body a:hover
    {
      color: #292929;
      font-family: "Century Gothic",Arial, Helvetica, Sans-Serif;
      font-size: 12px;
    }
     
    .art-blockcontent-body p
    {
      margin: 6px 0 6px 0;
    }
     
    .art-blockcontent-body a
    {
      color: #A60C2E;
      text-decoration: underline;
    }
     
    .art-blockcontent-body a:link
    {
      color: #A60C2E;
      text-decoration: underline;
    }
     
    .art-blockcontent-body a:visited, .art-blockcontent-body a.visited
    {
      color: #F03860;
     
    }
     
    .art-blockcontent-body a:hover, .art-blockcontent-body a.hover
    {
      color: #DA103C;
     
      text-decoration: none;
    }
     
    .art-blockcontent-body ul li
    {
      line-height: 125%;    
      color: #545454;
     
      padding: 0 0 0 12px;
      background-image: url('images/blockcontentbullets.png');
      background-repeat: no-repeat;
    }/* end Box, BlockContent */
     
    /* begin Button */
    .art-button-wrapper a.art-button,
    .art-button-wrapper a.art-button:link,
    .art-button-wrapper input.art-button,
    .art-button-wrapper button.art-button
    {
      text-decoration: none;
      font-family: "Century Gothic",Arial, Helvetica, Sans-Serif;
      font-style: normal;
      font-weight: normal;
      font-size: 12px;
      position:relative;
      top:0;
      display: inline-block;
      vertical-align: middle;
      white-space: nowrap;
      text-align: center;
      color: #1A1A1A !important;
      width: auto;
      outline: none;
      border: none;
      background: none;
      line-height: 30px;
      height: 30px;
      margin: 0 !important;
      padding: 0 20px !important;
      overflow: visible;
      cursor: pointer;
    }
     
    .art-button img, .art-button-wrapper img
    {
      margin: 0;
      vertical-align: middle;
    }
     
    .art-button-wrapper
    {
      vertical-align: middle;
      display: inline-block;
      position: relative;
      height: 30px;
      overflow: hidden;
      white-space: nowrap;
      width: auto;
      margin: 0;
      padding: 0;
      z-index: 0;
    }
     
    .firefox2 .art-button-wrapper
    {
      display: block;
      float: left;
    }
     
    input, select, textarea
    {
      vertical-align: middle;
      font-family: "Century Gothic",Arial, Helvetica, Sans-Serif;
      font-style: normal;
      font-weight: normal;
      font-size: 12px;
    }
     
    .art-block select 
    {
        width:96%;
    }
     
    .art-button-wrapper.hover .art-button, .art-button-wrapper.hover a.art-button:link, .art-button:hover
    {
      color: #F792A8 !important;
      text-decoration: none !important;
    }
     
    .art-button-wrapper.active .art-button, .art-button-wrapper.active a.art-button:link
    {
      color: #F797AC !important;
    }
     
    .art-button-wrapper .art-button-l, .art-button-wrapper .art-button-r
    {
      display: block;
      position: absolute;
      height: 100px;
      margin: 0;
      padding: 0;
      background-image: url('images/button.png');
    }
     
    .art-button-wrapper .art-button-l
    {
      left: 0;
      right: 12px;
    }
     
    .art-button-wrapper .art-button-r
    {
      width: 425px;
      right: 0;
      clip: rect(auto, auto, auto, 413px);
    }
     
    .art-button-wrapper.hover .art-button-l, .art-button-wrapper.hover .art-button-r
    {
      top: -35px;
    }
     
    .art-button-wrapper.active .art-button-l, .art-button-wrapper.active .art-button-r
    {
      top: -70px;
    }
     
    .art-button-wrapper input
    {
      float: none !important;
    }
    /* end Button */
     
    /* begin Box, Post */
    .art-post
    {
    	position: relative;
    	margin: 0 auto;
    	min-width: 35px;
    	min-height: 35px;
    	max-width: 800px;
    }
     
    .art-post-body
    {
      position: relative;
      padding: 19px;
    }
     
    .art-post-tr, .art-post-tl, .art-post-br, .art-post-bl, .art-post-tc, .art-post-bc,.art-post-cr, .art-post-cl
    {
      position: absolute;
    }
     
    .art-post-tr, .art-post-tl, .art-post-br, .art-post-bl
    {
      width: 46px;
      height: 46px;
      background-image: url('images/post_s.png');
    }
     
    .art-post-tl
    {
      top: 0;
      left: 0;
      clip: rect(auto, 23px, 23px, auto);
    }
     
    .art-post-tr
    {
      top: 0;
      right: 0;
      clip: rect(auto, auto, 23px, 23px);
    }
     
    .art-post-bl
    {
      bottom: 0;
      left: 0;
      clip: rect(23px, 23px, auto, auto);
    }
     
    .art-post-br
    {
      bottom: 0;
      right: 0;
      clip: rect(23px, auto, auto, 23px);
    }
     
    .art-post-tc, .art-post-bc
    {
      left: 23px;
      right: 23px;
      height: 46px;
      background-image: url('images/post_h.png');
    }
     
    .art-post-tc
    {
      top: 0;
      clip: rect(auto, auto, 23px, auto);
    }
     
    .art-post-bc
    {
      bottom: 0;
      clip: rect(23px, auto, auto, auto);
    }
     
    .art-post-cr, .art-post-cl
    {
      top: 23px;
      bottom: 23px;
      width: 46px;
      background-image: url('images/post_v.png');
    }
     
    .art-post-cr
    {
      right: 0;
      clip: rect(auto, auto, auto, 23px);
    }
     
    .art-post-cl
    {
      left: 0;
      clip: rect(auto, 23px, auto, auto);
    }
     
    .art-post-cc
    {
      position: absolute;
      top: 23px;
      left: 23px;
      right: 23px;
      bottom: 23px;
      background-color: #F0F0E0;
    }
     
    .art-post
    {
      margin: 15px;
    }
     
    a img
    {
      border: 0;
    }
     
    .art-article img, img.art-article
    {
      border: solid 0 #696969;
      margin: 5px;
    }
     
    .art-metadata-icons img
    {
      border: none;
      vertical-align: middle;
      margin: 2px;
    }
     
    .art-article table, table.art-article
    {
      border-collapse: collapse;
      margin: 1px;
    }
     
    .art-article th, .art-article td
    {
      padding: 2px;
      border: solid 1px #9D0C2B;
      vertical-align: top;
      text-align: left;
    }
     
    .art-article th
    {
      text-align: center;
      vertical-align: middle;
      padding: 7px;
    }
     
    pre
    {
      overflow: auto;
      padding: 0.1em;
    }
     
    /* end Box, Post */
     
    /* begin PostHeaderIcon */
    h2.art-postheader
    {
      color: #363636;
      margin: 3px 0 3px 0;
    }
     
    h2.art-postheader, 
    h2.art-postheader a, 
    h2.art-postheader a:link, 
    h2.art-postheader a:visited,
    h2.art-postheader a.visited,
    h2.art-postheader a:hover,
    h2.art-postheader a.hovered
    {
      font-size: 18px;
    }
     
    h2.art-postheader a, h2.art-postheader a:link
    {
      text-align: left;
      text-decoration: none;
      color: #424242;
    }
     
    h2.art-postheader a:visited, h2.art-postheader a.visited
    {
     
      color: #7B0922;
    }
     
     
    h2.art-postheader a:hover,  h2.art-postheader a.hovered
    {
     
      text-decoration: underline;
      color: #C20F36;
    }
     
    /* end PostHeaderIcon */
     
    /* begin PostBullets */
    .art-post ol, .art-post ul
    {
      margin: 1em 0 1em 2em;
      padding: 0;
    }
     
    .art-post li
    {
      font-size: 12px;
    }
     
    .art-post li ol, .art-post li ul
    {
      margin: 0.5em 0 0.5em 2em;
      padding: 0;
    }
     
    .art-post li
    {
      color: #121212; 
     
      padding: 0;
    }
     
     
    .art-post li
    {
      padding: 0 0 0 13px;
    }
     
    .art-post ol>li
    {
      background: none;
      padding-left: 0;/* overrides overflow for "ul li" and sets the default value */
      overflow: visible;
    }
     
    .art-post ul>li
    {
      background-image: url('images/postbullets.png');
      background-repeat: no-repeat;
      padding-left: 13px;/* makes "ul li" not to align behind the image if they are in the same line */
      overflow-x: visible;
      overflow-y: hidden;
    }
     
     
    /* end PostBullets */
     
    /* begin PostQuote */
    .art-postcontent blockquote,
    .art-postcontent blockquote a,
    .art-postcontent blockquote a:link,
    .art-postcontent blockquote a:visited,
    .art-postcontent blockquote a:hover
    {
      color: #1C0208;
     
    }
     
    .art-postcontent blockquote p
    {
       margin: 5px 10px 10px 10px;
    }
     
    .art-postcontent blockquote
    {
       border: solid 0 #F46C89;
      margin: 10px 10px 10px 50px;
      padding: 15px 15px 15px 38px;
      background-color: #FAC1CE;
      background-image: url('images/postquote.png');
      background-position: left top;
      background-repeat: no-repeat;/* makes blockquote not to align behind the image if they are in the same line */
      overflow: auto;
    }
     
    /* end PostQuote */
     
    /* begin Footer */
    .art-footer
    {
      position: relative;
      overflow: hidden;
      width: 100%;
    }
     
    .art-footer-b 
    {
      position: absolute;
      left:0;
      right:0;
      bottom:0;
      height:50px;
      background-image: url('images/footer_b.png');
    }
     
     
    .art-footer-t
    {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 50px;
      background-color: #121212;
    }
     
    .art-footer-body
    {
        position:relative;
        padding: 15px;
    }
     
     
    .art-footer-text p
    {
      padding:0;
      margin:0;
    }
     
    .art-footer,
    .art-footer a,
    .art-footer a:link,
    .art-footer a:visited,
    .art-footer a:hover
    {
        color: #BDBDBD;
        letter-spacing: 1px;
    }
     
    .art-footer-text
    {
      padding: 0 10px 0 10px;
     
    }
     
    .art-footer,
    .art-footer-text,
    .art-footer p
    {
      text-align: center;
    }
     
    .art-footer a,
    .art-footer a:link
    {
      color: #F57A95;
      text-decoration: underline;
    }
     
    .art-footer a:visited
    {
      color: #C70F37;
     
    }
     
    .art-footer a:hover
    {
      color: #858585;
     
      text-decoration: none;
    }
    /* end Footer */
     
    /* begin PageFooter */
    .art-page-footer, 
    .art-page-footer a,
    .art-page-footer a:link,
    .art-page-footer a:visited,
    .art-page-footer a:hover
    {
      font-family: Arial;
      font-size: 10px;
      letter-spacing: normal;
      word-spacing: normal;
      font-style: normal;
      font-weight: normal;
      text-decoration: underline;
      color: #666666;
    }
     
    .art-page-footer
    {
      margin: 1em;
      text-align: center;
      text-decoration: none;
      color: #595959;
    }
    /* end PageFooter */
     
    /* begin LayoutCell, content */
     
     
     
     
    .art-content-layout .art-content .art-block
    {
      background-color: #FFFFFF;
    }
    /* end LayoutCell, content */
     
     
     
     
    .overview-table .art-layout-cell
    {
        width:33%;
    }
     
     
    .overview-table-inner 
    {
        margin:10px;
    }
     
    table.table
    {
        width:100%;
        border-collapse:collapse;
        table-layout:fixed;
        text-align:left;
        vertical-align:top;
    }
     
    table.table, table.table tr, table.table td
    {
        border:none;
        margin:0;
        padding:0;
        background-color:Transparent;
    }
     
    img.image
    {
        margin:0;
        padding:0;
        border:none;
    }
    Cheers

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi hanmertech! Welcome to SitePoint.

    All you need is to add "auto" to this rule:

    Code:
    .art-post {
      margin: 15px auto;
    }
    You can center an element by giving it auto left and right margins.

  3. #3
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey mate thanks for your answer.
    My code is
    Code:
    .art-post {
      margin: 0 auto;
    }
    and not
    Code:
    .art-post {
      margin: 15px;
    }
    Anyway I changed the 0 into 15 px to match your suggestion but nothing.
    I already tried to give auto margin on both sides.
    I have a feeling that it's not the .art-post rule that needs to be changed but another one that applies to it (if you know what I mean) because I've tried everything possible on that rule (.art-post)

    Cheers

  4. #4
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    You have two declarations for .art-post.

    First
    Code CSS:
    .art-post {
      margin: 0 auto;
      max-width: 800px;
      min-height: 35px;
      min-width: 35px;
      position: relative;
    }
    Second
    Code CSS:
    .art-post
    {
      margin: 15px;
    }

    The second overrides the first, so removing it will center .art-post

  5. #5
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    stupid me hadn't found the second one.
    Its solved thank you very much, that was easy!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •