Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Centering Table inside of DIV

    Hello guys, I am new to the forums. I used to code and design sites back in Highschool. Now my company has decided to improve it's current site and I am helping with the production. We have created table(s) and we are having difficultly having the tables stay centered in the middle of the screen.

    We have used the Responsive theme for Wordpress.
    Here is the page in question: http://www.weldingwarehouseinc.com/products/aws/#a5-10

    Each of the collapsible sections of the "accordion" is supposed to be centered in the middle of the section. It is not currently doing it for all/any of the sections. You will notice A5.4, and A5.11 where the table is complete with data it fills all of the space and appears centered. But if it were to have less data it would be aligned to the left side like A5.1, etc.

    Here is our CSS File
    Code:
    /*
    Theme Name: Responsive Child Theme
    Theme URI: http://themeid.com/responsive-theme/
    Description: Responsive Child Theme
    
    Template: responsive
    Version: 1.0.0
    Author: ThemeID
    Author URI: http://themeid.com
    Tags: white, black, gray, light, custom-menu, custom-header, custom-background, one-column, two-columns, left-sidebar, right-sidebar, flexible-width, theme-options, threaded-comments, full-width-template, sticky-post, translation-ready, flexible-width, rtl-language-support
    
    License: GNU General Public License
    License URI: license.txt
    
    Responsive WordPress Theme, Copyright (C) 2003-2012 Emil Uzelac
    
    */
    
    /* =Import Styles
    -------------------------------------------------------------- */
    @import url('../responsive/style.css');
    
    /* =Start From Here
    -------------------------------------------------------------- */
    .featured-title {
      font-size: 42px;
    }
    
    .post-title { text-align:center; }
    
    /*Define Accordion box*/
    .accordion { width:830px; overflow:hidden; margin:10px auto; color:#474747; background:#414141; padding:10px; }
    
    /*General Accordion****************************************************************************/
    /*Set style of open slide*/
    .accordion section:target { background:url('http://www.weldingwarehouseinc.com/wp-content/uploads/bg_g2.png'); padding:10px; overflow-y:auto; }
    .accordion section:target h2 {width:100%;}
    .accordion section:target h2 a{ padding:0;}
    .accordion section:target table {display:block;}
    .accordion section h2 a{padding:8px 10px;display:block; font-size:16px; font-weight:normal;color:#eee; text-decoration:none; }
    .accordion section:target:hover { background:url('http://www.weldingwarehouseinc.com/wp-content/uploads/bg_g2.png'); }
    .accordion section p { color: #FFF; }
    
    /*set style of closed slide*/
    .accordion section{ float:left;	overflow:hidden; color:#333; cursor:pointer; background: #262626; margin:3px; -moz-border-radius: 40em 40em 1em 1em / 2em 2em .6em .6em; border-radius: 40em 40em 1em 1em / 2em 2em .6em .6em; text-align: center; }
    .accordion section:hover { background:#444; }
    .accordion section table { display:none; }
    /*End General Accordion****************************************************************************/
    
    /*Vertical Accordion *************************************************************************/
    .vertical section{ width:100%; height:40px;
    	-webkit-transition:height 0.4s ease-out;
    	-moz-transition:height 0.4s ease-out;
      	-o-transition:height 0.4s ease-out;
    	-ms-transition:height 0.4s ease-out;
      	transition:height 0.4s ease-out;
    }
    /*Set height of the slide*/
    .vertical :target{ height:350px; width:97%; }
    
    .vertical section h2 { position:relative; left:0; top:-15px; }
    
    /*Table Power***************************************************************************************/
    th, td { padding:.3em; border: 1px solid #000 }
    table { width:100%; border:none; }
    th { font-weight:bold; }
    th.specification, th.grade, th.alloy { width:16%; }
    th.element { width: 7% }
    tr:nth-child(odd) { background-color:#E2F7FF; }
    tr:nth-child(even) { background-color:#fff; }
    table.chemical { width:auto; }
    table.chemical td { text-align:center; }
    table.mechanical { width:auto; }
    table.diameter { border:1px solid #000; }
    .diameter td { border:none; }
    
    /*Horizontal Rule*********************************************************************/
    hr.hr40 { width:40%; }
    hr.hri { width:100%; height:5px; color:#d6c026; background-color:#d6c026; }
    
    /*Home Page Widgets********************************************************************/
    .widget-title-home h3 { text-align:center; }
    
    /*Footer********************************************************************************/
    #footer a { color:#FFF; }
    .copyright { color:#FFF; }
    
    /*Quote Form*******************************************************************************/
    table.wdform_table1 { width:24em; }
    
    /*Links!*********************************************************************************/
    a:link { color:#205b84; }
    a:visited { color:#ab991e; }
    
    /*Nav Bar*********************************************************************************/
    #header li a { color:#FFF; }
    #header .sub-menu li a { color:#000; }
    
    /*Products Button*****************************************************************************/
    a.blue.button { color:#FFF; }
    a.blue { 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#205b84), to(#002852));
    background-image: -webkit-linear-gradient(top, #205b84, #002852);
    background-image: -moz-linear-gradient(top, #205B84, #002852);
    background-image: -ms-linear-gradient(top, #205b84, #002852);
    background-image: -o-linear-gradient(top, #205b84, #002852);
    background-image: linear-gradient(top, #205b84, #002852);
    border: 1px solid #002852; 
    }
    
    /*Top Widget/Search********************************************************************/
    #top-widget { position:relative; top:37px; }
    
    /*Headers******************************************************************************/
    h4.accordichem { color:#FFF; text-align:center; }
    Here is the code for the page:
    http://pastebin.com/m3f07Fa7

    THANK YOU IN ADVANCE FOR ANY AND ALL HELP. I APPRECIATE YOU MAKING AN EFFORT TO OFFER ME YOUR KNOWLEDGE.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,932
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    From a quick look the problem appears to be this:
    Code:
    .accordion section:target table {display:block;}
    It should rather be
    Code:
    .accordion section:target table {display: table;}


  •  

    Posting Permissions

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