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 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Need help centering a div containing tabs

    Hi all, Im having a difficult time centering a div containing tabs. You can see it at estatesoffortlauderdale.info the tabs are on the bottom. This was a wordpress template I am trying to tweak. Below is the CSS and HTML maybe you can catch what I'm missing in the code? Thanks in advance!

    Code:
    <?php
    /*
    Template Name: Site_Home
    */
    ?>
    
    <?php get_header(); ?>
    <?php $cat_tab_1 = get_option('lp_tab_cat_1');  ?>      
    <?php $cat_tab_2 = get_option('lp_tab_cat_2');  ?>      
    
        
    <?php $post_number = get_option('lp_post_num');  ?>   
    
    		<div id="content">			 
    				<!-- slide-container -->
    				<div class="homeCenter">
    				<div class="slide-container homeCenter">
    					<div id="slider">
    						<ul>
    							<li class="img_right"><a href="<?php echo get_option('lp_slide_link_1'); ?>"><img src="<?php echo get_option('lp_slide_img_1'); ?>" alt="slide 1"/></a></li> 
    							<li class="img_right"><a href="<?php echo get_option('lp_slide_link_2'); ?>"><img src="<?php echo get_option('lp_slide_img_2'); ?>" alt="slide 2"/></a></li> 
    							<li class="img_right"><a href="<?php echo get_option('lp_slide_link_3'); ?>"><img src="<?php echo get_option('lp_slide_img_3'); ?>" alt="slide 3"/></a></li>
      
    						</ul>
    					</div>
    				</div>
    				</div>
    				<?php if (  get_option('lp_latest_posts') != 'true' ) { ?>
    					<ul class="tabs">
    						<li><a href="#tab1"><?php echo $cat_tab_1 ?></a></li>
    						<li><a href="#tab2"><?php echo $cat_tab_2 ?></a></li>
    						<li><a href="#tab3">Board of Directors/Staff</a></li>
    
    					</ul> 					
    					<!-- tab-container -->
    					<div class"homeCenterTab">
    					<div class="tab_container">
    						<!-- tab-content begin -->
    						<div id="tab1" class="tab_content">
    							<?php query_posts("category_name=$cat_tab_1&showposts=7"); ?>
    							<?php while (have_posts()) : the_post(); ?>
    							<ul class="tab-post">
    								<li>
    									<div class="date left"><?php the_time('M j'); ?></div>
    									<h4 class="post-title event-post left"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4>
    									<div class="clear"></div>
    								</li>
    							</ul>
    							<?php endwhile;?>
    						</div>
    						<div id="tab2" class="tab_content">
    							<?php query_posts("category_name=$cat_tab_2&showposts=7"); ?>
    							<?php while (have_posts()) : the_post(); ?>
    							<ul class="tab-post">
    								<li>
    									<div class="date left"><?php the_time('M j'); ?></div>
    									<h4 class="post-title event-post left"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4>
    									<div class="clear"></div>
    								</li>
    							</ul>
    							<?php endwhile;?>
    						</div>
    
    						<div id="tab3" class="tab_content">
    
    
    <table class="staff" cellspacing="0" cellpadding="0">
      <tr class>
        <td>
    
    <strong>Board of Directors</strong><br />
    <br /></td>
       
        <td>
        
        
    <strong>POA Directors</strong>
    <br />
        
        </td>
      </tr>
    </table>
    
    
    <table class="staff" cellspacing="0" cellpadding="0">
      <tr class>
        <td>
    
    <strong>Office</strong><br />
    <br />
    
    <strong>Pool Attendants</strong><br />
    
    </td>
       
        <td>
        
    <strong>Maintenance</strong><br />
    
    <br />
    
    <strong>Security Guards</strong><br />
    
    
        </td>
      </tr>
    </table>
    
    
    
    </td>
    <td>
    
    
        </td>
      </tr>
    </table>
    							
    						</div>
    						</div>
    						<!-- tab-content end --> 
    
    				<?php } else { ?>
    					<div id="main-content">
    						<?php query_posts("showposts=$post_number"); ?>
    						<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    						<div class="post">																		   
    							<h2 class="line"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    							<?php the_post_thumbnail(); ?>
    							<?php the_excerpt(); ?>
    							<p class="meta"><?php the_time('F j, Y'); ?> in <?php the_category(', '); ?> by <?php the_author_posts_link() ?></p>
    							<p class="meta"><?php comments_popup_link('No comments yet', '1 comment', '% comments', '', 'Comments are disabled for this post'); ?></p>	        
    						</div>
    						<!--/box-->   
    						<?php endwhile; else: ?>
    						<h2>404 - Not Found</h2>
    						<p>The page you are looking for is not here.</p>					 
    						<?php endif; ?>
    					</div>
    				<?php } ?>
                </div>
    
    
    
    
    
            </div>
            <!--content end-->
            <!--Popup window-->
    		<?php include(TEMPLATEPATH.'/popup.php') ?>
        </div>
        <!--main end-->
    </div>
    <!--wrapper end-->
    <div class="clear"></div>		
    <?php get_footer(); ?>

    Code:
    #content { width:960px; padding:0; margin:0; font-size: 12px; }
    #content-left { width:640px; padding:0; float:left; }
    #content-right { width:310px; padding:0; margin: 0 0 10px 10px; float:left; }
    #header-img { margin-bottom: 10px; }
    #main-content { background: url(img/main-content-bg.png) repeat-x center top; min-height: 272px; padding: 30px 20px 20px; }
    .line { padding-bottom: 5px; display: block; background: url(img/content-divider.png) repeat-x left bottom; }
    
    ul.tabs { margin: 0 auto; padding: 0; float:left; list-style: none; height: 34px; /*--Set height of tabs--*/ border-bottom: 1px solid #c6c5c5; border-left: 1px solid #c6c5c5; width: 638px; font: bold 16px Helvetica, Arial, sans-serif; }
    ul.tabs li { float: left; margin: 0; padding: 0; width: 200px; height: 33px; /*--Subtract 1px from the height of the unordered list--*/ line-height: 33px; /*--Vertically aligns the text within the tab--*/ border: 1px solid #c6c5c5; border-left: none; margin-bottom: -1px; /*--Pull the list item down 1px--*/ overflow: hidden; position: relative; background: url(img/tab.png) repeat-x bottom; text-align: center; }
    ul.tabs li a { text-decoration: none; color: #333; display: block; font-size: 12px; padding: 0 20px; /*border: 1px solid #fff; --Gives the bevel look with a 1px white border inside the list item--*/ 
    										outline: none;/*	background: url(img/tab.png);*/ }
    ul.tabs li a:hover { background: url(img/tab-over.png); }
    html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/ background: #f5f2e0; border-bottom: 1px solid #f5f2e0; /*--Makes the active tab look like it's connected with its content--*/ }
    .tab_container { border: 1px solid #c6c5c5; border-top: none; float: left; overflow: hidden; clear: both; width: 638px; background: url(img/tab-cont.png) repeat-x top; }
    .tab_content { padding: 20px; font-size: 1.2em; }
    /* Tabs Posts */
    ul.tab-post { list-style:none; }
    ul.tab-post li { margin-bottom: 12px; }
    ul.tab-post > h5 { font-size:16px; }
    .date { color:#545454; text-transform: uppercase; line-height: normal; width: 60px; background:#62615a; color:#fff; padding: 3px 8px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-size: 16px; }
    .post-title { margin:0; font-size: 18px; font-weight: bold; line-height: 1.6; }
    .post-title a { color:#244161; }
    .post-title a:hover { color: #000; text-decoration:none; }
    .event-post { width: 480px; margin-left:10px; }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello MadMad,
    You have both the ul.tabs and .homecentertab floated left so they are behaving like you've told them to.
    You also have margin: 0 auto; on ul.tabs, which is a start...

    To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto


    Instead of centering both, you may what to put those two elements in their own centered containing element so the ul remains on the left side of .homecentertab.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Jan 2011
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks Excavator, I did try that, thats what the homeCenterTab div was for but it's not working. Forgot to post the CSS for that div but I gave it a width and a margin 0 auto, still not working.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    No need to post CSS when you give a link, we can get all your code from looking at it online.

    Now that I look deeper, there is no CSS styling .homecentertab, which is what you have in your markup. (or the rendered version I'm seeing on my end does anyway)
    In your CSS though, you style .homeCenterTab.

    You also have this <div class"homeCenterTab"> which is invalid. You have to have the = in there too. <div class="homeCenterTab"> is valid.

    Check your site with the validator to catch little mistakes like that. See the links about validation in my signature line.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    for some weird reason, this is working.

    code:

    Code:
    <div class="lwr-cnt-est"> <!-- div I inserted -->
    <ul class="tabs">
    						<li class="active" style=""><a href="#tab1">Presidents Message</a></li>
    						<li><a href="#tab2">Managers Message</a></li>
    						<li><a href="#tab3">Board of Directors/Staff</a></li>
    
    					</ul><div class="tab_container">
    						<!-- tab-content begin -->
    						<div id="tab1" class="tab_content" style="display: block;">
    																					<ul class="tab-post">
    								<li>
    									<div class="date left">Dec 18</div>
    									<h4 class="post-title event-post left"><a href="http://estatesoffortlauderdale.info/2012/12/december-2012-presidents-message/">December 2012 President’s Message</a></h4>
    									<div class="clear"></div>
    								</li>
    							</ul>
    													</div>
    						<div id="tab2" class="tab_content" style="display: none;">
    																					<ul class="tab-post">
    								<li>
    									<div class="date left">Dec 21</div>
    									<h4 class="post-title event-post left"><a href="http://estatesoffortlauderdale.info/2012/12/december-2012-managers-message-2/">December 2012 Manager’s Message</a></h4>
    									<div class="clear"></div>
    								</li>
    							</ul>
    													</div>
    
    						<div id="tab3" class="tab_content" style="display: none;">
    
    
    <table class="staff" cellspacing="0" cellpadding="0">
      <tbody><tr class="">
        <td>
    
    <strong>Board of Directors</strong><br>
    President- Dick Cheney<br>
    Vice President- Dave Campbell<br>
    Secretary- Victoria Morganti<br>
    <br></td>
       
        <td>
        
        
    <strong>POA Directors</strong><br>
    Leo Engel &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
    Raymond Bellemare<br>
    Michel Therrien<br>
    Rolando Balance<br>
    Shawn Jamieson<br>
        
        </td>
      </tr>
    </tbody></table>
    
    
    <table class="staff" cellspacing="0" cellpadding="0">
      <tbody><tr class="">
        <td>
    
    <strong>Office</strong><br>
    Louise Velo- Property Manager<br>
    Stephanie Leiva- Bookkeeper<br>
    Carmela Inglese- Receptionist<br>
    <br>
    
    <strong>Pool Attendants</strong><br>
    
    Judy Lombard<br>
    Mickey Orlando<br>
    David Samson<br>
    
    
    </td>
       
        <td>
        
    <strong>Maintenance</strong><br>
    
    Rodrigo Sandoval- Pool/Spa<br>
    Steve Tursi- Golf<br>
    John Orlando- General<br>
    Cindy Schaffer- Janitorial Services<br>
    <br>
    
    <strong>Security Guards</strong><br>
    
    Ed Schafer<br>
    Leighton Morris<br><br>
    
        </td>
      </tr>
    </tbody></table>
    
    
    
    
    
    
    
        
      
    
    							
    						</div>
    						<!-- tab-content end --> 
    
    				            </div>
    </div> <!-- end// lower center -->
    css:
    Code:
    .lwr-cnt-est {
    margin: 0 auto;
    width: 600px;
    }
    Last edited by tempz; 12-23-2012 at 01:34 AM. Reason: forgot css "}"


  •  

    Posting Permissions

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