SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Location
    Shropshire, UK
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems positioning with CSS

    Hi,
    I'm trying to create my own Wordpress template and am having a few problems with the positioning of my sidebar.

    You can view the site here:
    http://www.lucky-4-leaf-clover.com/wordpress/

    The problem I'm having as I'm trying to build an expandable box with rounded corners using a tutorial I found here:
    http://www.webdesignerwall.com/tutor...xpandable-box/

    For some reason I cannot get my content to sit inside the box its sits above it or over it but not in it as I want. Below is the code I have for sidebar.php which I'm including in index.php.

    Code:
    <div id="sidebar">
    	
    			<div class="topleft">
      				<div class="topright">
    				</div>
      			</div>
      		  	
    		<ul>
    			<?php 	/* Widgetized sidebar, if you have the plugin installed. */
    					if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
    			<li>
    				<?php include (TEMPLATEPATH . '/searchform.php'); ?>
    			</li>
    
    			<!-- Author information is disabled per default. Uncomment and fill in your details if you want to use it.
    			<li><h2>Author</h2>
    			<p>A little something about you, the author. Nothing lengthy, just an overview.</p>
    			</li>
    			-->
    
    			<?php if ( is_404() || is_category() || is_day() || is_month() ||
    						is_year() || is_search() || is_paged() ) {
    			?> <li>
    
    			<?php /* If this is a 404 page */ if (is_404()) { ?>
    			<?php /* If this is a category archive */ } elseif (is_category()) { ?>
    			<p>You are currently browsing the archives for the <?php single_cat_title(''); ?> category.</p>
    
    			<?php /* If this is a yearly archive */ } elseif (is_day()) { ?>
    			<p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives
    			for the day <?php the_time('l, F jS, Y'); ?>.</p>
    
    			<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
    			<p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives
    			for <?php the_time('F, Y'); ?>.</p>
    
    			<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
    			<p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives
    			for the year <?php the_time('Y'); ?>.</p>
    
    			<?php /* If this is a monthly archive */ } elseif (is_search()) { ?>
    			<p>You have searched the <a href="<?php echo bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives
    			for <strong>'<?php the_search_query(); ?>'</strong>. If you are unable to find anything in these search results, you can try one of these links.</p>
    
    			<?php /* If this is a monthly archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
    			<p>You are currently browsing the <a href="<?php echo bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives.</p>
    
    			<?php } ?>
    
    			</li> <?php }?>
    
    			<?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>
    
    			<li><h2>Archives</h2>
    				<ul>
    				<?php wp_get_archives('type=monthly'); ?>
    				</ul>
    			</li>
    
    			<?php wp_list_categories('show_count=1&title_li=<h2>Categories</h2>'); ?>
    
    			<?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>
    				<?php wp_list_bookmarks(); ?>
    
    				<li><h2>Meta</h2>
    				<ul>
    					<?php wp_register(); ?>
    					<li><?php wp_loginout(); ?></li>
    					<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
    					<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
    					<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
    					<?php wp_meta(); ?>
    				</ul>
    				</li>
    			<?php } ?>
    
    			<?php endif; ?>
    		</ul>
    	
    							
    
    		  	<div class="bottomleft">
      				<div class="bottomright">
      				</div>
      			</div>
    			
    	</div>
    The main code in the page has been taken from the default theme so that I can get all the widgets to work. Iin theory all I should need to do is add my <div> tags in the correct place.

    Here is my CSS for the sidebar:
    Code:
    #sidebar {
    	margin: 0 auto;
    	width: 23%;
    	float: right;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 0.8em;
    	color: #FFFFFF;
    }
    
    
    
    #sidebar div.topleft {
    	display: block;
    	background: url("box-bg.png") top left no-repeat #000000;
    	padding: 2.0em 0em 0em 2.0em;
    }
    
    #sidebar div.topright {
    	display: block;
    	background: url("box-bg.png") top right no-repeat #000000;
    	padding: 2.0em;
    	margin: -2.0em 0 0 2.0em;
    }
    
    #sidebar div.bottomleft {
    	display: block;
    	height: 45px;
    	margin-top: -2.0em;
    	background: url("box-bg.png") bottom left no-repeat #000000;
    }
    
    #sidebar div.bottomright {
    	display: block;
    	background: url("box-bg.png") bottom right no-repeat #000000;
    	height: 45px;
    	margin-left: 3.0em;
    }
    
    #sidebar ul {
    width: 14em;
    float: left;
    }
    
    #sidebar ul li {
    list-style-type: none;
    text-align: left;
    margin: 0;
    padding: 2em;
    }
    
    #sidebar a {
    color: #FFFFFF;
    text-decoration: none;
    }
    Can someone tell me why my content is not fitting inside my box? I'm sure its something really simple that I'm missing.

    Thanks
    Kirsty

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe the #sidebar last list item can be floated, that would place it underneath the other items in that 14em narrow #sidebar list .

    If it is a good solution I don't know, but maybe it works.
    Happy ADD/ADHD with Asperger's


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
  •