SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wordpress CSS Help

    Hi all,

    Hoping someone can help me here. I created a wordpress blog and customized the design. On my single.php page (individual post page) the comments is falling over the footer. I tried using "clear:both;" but it didn't help. I attached a screenshot so you can see what's going on. I have a lot of code and I'm not sure where the issue is so let me know if I need to post the code.

    Thanks.
    Attached Images Attached Images

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Posting the code would be very helpful so we can see exactly what's going on!

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok so here's my code. I put in what I think is necessary. If I'm missing anything let me know and I;ll post the whole thing.

    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" <?php language_attributes(); ?>>
    
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    
    <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
    
    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
    
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    
    <style type="text/css" media="screen">
    
    <?php
    // Checks to see whether it needs a sidebar or not
    if ( !$withcomments && !is_single() ) {
    ?>
    	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/blueskybg-<?php bloginfo('text_direction'); ?>.jpg") repeat-y top; border: none; }
    <?php } else { // No sidebar ?>
    	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/blueskybgwide.jpg") repeat-y top; border: none; }
    <?php } ?>
    
    </style>
    
    <?php wp_head(); ?>
    </head>
    <body>
    <center>
    <div class="container">
    <div class="tt"><span></span></div>
    <div class="center">
    <!--begin content-->
    
    <div class="logo"><span>test test test test test</span>
    </div>
    <div class="topnav">
    <ul class="nav">
    <li class="top"><a href="#" class="active">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contribute</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">RSS</a></li>
    </ul></div>
    <div class="header">&nbsp;</div>
    
    	<div class="content" >
    
    	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    
    		<div class="navigation">
    			<div class="alignleft"><?php previous_post_link('&laquo; %link') ?></div>
    			<div class="alignright"><?php next_post_link('%link &raquo;') ?></div>
    		</div>
    
    		<div class="post" id="post-<?php the_ID(); ?>">
    			<h2><a href="<?php echo get_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    
    			<div class="entry">
    				<?php the_content('<p class="serif">Read the rest of this entry &raquo;</p>'); ?>
    
    				<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
    				<?php the_tags( '<p>Tags: ', ', ', '</p>'); ?>
    
    				<p class="postmetadata altinfo">
    					<small>
    						This entry was posted
    						<?php /* This is commented, because it requires a little adjusting sometimes.
    							You'll need to download this plugin, and follow the instructions:
    							http://binarybonsai.com/archives/2004/08/17/time-since-plugin/ */
    							/* $entry_datetime = abs(strtotime($post->post_date) - (60*120)); echo time_since($entry_datetime); echo ' ago'; */ ?>
    						on <?php the_time('l, F jS, Y') ?> at <?php the_time() ?>
    						and is filed under <?php the_category(', ') ?>.
    						You can follow any responses to this entry through the <?php comments_rss_link('RSS 2.0'); ?> feed.
    
    						<?php if (('open' == $post-> comment_status) && ('open' == $post->ping_status)) {
    							// Both Comments and Pings are open ?>
    							You can <a href="#respond">leave a response</a>, or <a href="<?php trackback_url(); ?>" rel="trackback">trackback</a> from your own site.
    
    						<?php } elseif (!('open' == $post-> comment_status) && ('open' == $post->ping_status)) {
    							// Only Pings are Open ?>
    							Responses are currently closed, but you can <a href="<?php trackback_url(); ?> " rel="trackback">trackback</a> from your own site.
    
    						<?php } elseif (('open' == $post-> comment_status) && !('open' == $post->ping_status)) {
    							// Comments are open, Pings are not ?>
    							You can skip to the end and leave a response. Pinging is currently not allowed.
    
    						<?php } elseif (!('open' == $post-> comment_status) && !('open' == $post->ping_status)) {
    							// Neither Comments, nor Pings are open ?>
    							Both comments and pings are currently closed.
    						<?php } edit_post_link('Edit this entry.','',''); ?>
    					</small>
    				</p>
    			</div>
    </div>
    	<?php comments_template(); ?>
    	<?php endwhile; else: ?>
    		<p>Sorry, no posts matched your criteria.</p>
    <?php endif; ?>
    </div>
    	<div class="sidebar">
    		<ul>
    			<?php 	/* Widgetized sidebar, if you have the plugin installed. */
    					if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
    
    			
    
    			<!-- 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 }?>
    			<li><h2>Search</h2>
    				<?php include (TEMPLATEPATH . '/searchform.php'); ?>
    			</li>
    <li><h2>Follow Us</h2>
    <div class="social"><a href="#"><img src="http://localhost/wordpress/wp-content/themes/bluesky/images/rss.gif" alt="Subscribe to our RSS feed"></a>
    <a href="#"><img src="http://localhost/wordpress/wp-content/themes/bluesky/images/twitter.gif" alt="Follow us on Twitter"></a>
    <a href="#"><img src="http://localhost/wordpress/wp-content/themes/bluesky/images/facebook.gif" alt="Become a fan on Facebook" ></a>
    <a href="#"><img src="http://localhost/wordpress/wp-content/themes/bluesky/images/email.gif" alt="Subscribe to our mailing list" ></a></div></li>
    <li><h2>Recent Posts</h2><?php mdv_recent_posts(); ?></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>Archives</h2>
    				<ul>
    				<?php wp_get_archives('type=monthly'); ?>
    				</ul>
    			</li>
    <li><h2>Popular</h2><?php ctc(); ?></li>					
    <?php wp_meta(); ?>
    				</ul>
    				</li>
    			<?php } ?>
    
    			<?php endif; ?>
    		</ul>
    	</div>	
    <!--end content-->
    </div>
    <div class="bottom"><span></span></div>
    </div>
    <div class="footer">
    
    	<p>
    		<?php bloginfo('name'); ?> All Rights Reserved. <br><a href="#">Contact Us</a> | <a href="#">Contribute</a> | <a href="<?php bloginfo('rss2_url'); ?>">RSS</a>
    		<!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. -->
    	</p>
    </div>
    
    
    
    <?php  ?>
    
    		<?php wp_footer(); ?>

    Code:
    .container {
    	width: 65%;
    	margin: 10px auto;
    	background: #fff url('images/left.gif') repeat-y left top;
    	
    }
    .tt {
    	width: 100%;
    	height: 20px;
    	background: url('images/roundtop.gif') no-repeat left top;
    }
    .tt span {
    	display: block;
    	position: relative;
    	height: 20px;
    	background: url('images/topright.gif') no-repeat right top;
    }
    .center {
    	position: relative;
    	background: url('images/rightsi.gif') repeat-y right top;
    	padding: 1px 20px 1px 25px;
    	margin: 1px 0 -50px 0;
    }
    .bottom {
    	height: 60px;
    	background: url('images/bottomb.gif') no-repeat left bottom;
    }
    .bottom span {
    	display: block;
    	position: relative;
    	height: 60px;
    	background: url('images/bottomright.gif') no-repeat right top;
    }
    
    .content {
    	position: absolute;
    	margin-top: 100px;
    }
    .sidebar ul, .sidebar ul ol {
    	margin: 0;
    	padding: 0;
    	}
    
    .sidebar ul li {
    	list-style-type: none;
    	list-style-image: none;
    	margin-bottom: 15px;
    	}
    
    .sidebar ul p, .sidebar ul select {
    	margin: 5px 0 8px;
    	}
    
    .sidebar ul ul, .sidebar ul ol {
    	margin: 5px 0 0 10px;
    	}
    
    .sidebar ul ul ul, .sidebar ul ol {
    	margin: 0 0 0 10px;
    	}
    
    ol li, .sidebar ul ol li {
    	list-style: decimal outside;
    	}
    
    .sidebar ul ul li, .sidebar ul ol li {
    	margin: 3px 0 0;
    	padding: 0;
    	}
    .sidebar
    {
    	padding-bottom: 10px;
    	margin-left: 739px;
    	width: 190px;
    	background: #eefbe5;
    	color: #336c0b;
    	clear: both;
    	}
    
    .sidebar h2 {
    	font-size: 15px;
    	height: 22px;
    	width: 190px;
    	color: #2c5614;
    	background: #c3e3ae;
    }
    
    .post {
    	margin: 0 0 40px;
    	text-align: justify;
    }
    .post h2 {
    	text-decoration: none;
    	font-size: 25px;
    }
    .post h2 a {
    	color: #2f7107;
    	text-decoration: none;
    }
    .post h2 a:hover {
    	color: #5c9b31;
    }
    	
    .alignright {
    	float: right;
    }
    .alignleft {
    	float: left
    }
    .content {
    	width: 700px;
    }
    .content a {
    	color: #336c0b;
    	text-decoration: none;
    }
    .content a:hover {
    	text-decoration: underline;
    }
    html>body .entry li {
    	margin: 7px 0 8px 10px;
    	}
    
    .entry ul li:before, #sidebar ul ul li:before {
    	content: "\00BB \0020";
    	}
    
    .entry ol {
    	padding: 0 0 0 35px;
    	margin: 0;
    	}
    
    .entry ol li {
    	margin: 0;
    	padding: 0;
    	}
    
    .postmetadata ul, .postmetadata li {
    	display: inline;
    	list-style-type: none;
    	list-style-image: none;
    	}
    .postmetadata {
    	clear: left;
    }
    .comment {
    	color: #336c0b;
    	clear: both;
    }
    .footer {
    	padding: 0;
    	margin: 0 auto;
    	width: 65%;
    	clear: both; 
    	border: none;
    	}
    
    .footer p {
    	margin: 0;
    	text-align: center;
    	font-size: 10px;
    	}
    .footer a {
    	color: #336c0b;
    	text-decoration: none;
    	font-size: 11px;
    }
    .footer a:hover {
    	text-decoration: underline;
    }
    .comments {
    	background-color: #eefbe5;
    	border: 1px solid #336c0b;
    }
    h3.comments {
    	padding: 0;
    	margin: 40px auto 20px ;
    	font-size: 12px;
    	color: #336c0b;
    }
    .altinfo {
    	margin: 0;
    	padding: 10px;
    	background-color: #f9fef5;
    	border-top: 1px solid #87bd61;
    	border-bottom: 1px solid #87bd61;
    }
    .alt {
    	margin: 0;
    	padding: 10px;
    	background-color: #eefbe5;
    
    }
    
    .commentlist {
    	padding: 0;
    	text-align: justify;
    	clear: both;
    	}
    
    .commentlist li {
    	margin: 15px 0 3px;
    	padding: 5px 10px 3px;
    	list-style: none;
    	}
    
    .commentlist p {
    	margin: 10px 5px 10px 0;
    	}
    
    #commentform p {
    	margin: 5px 0;
    	}
    
    .nocomments {
    	text-align: center;
    	margin: 0;
    	padding: 0;
    	}
    
    .commentmetadata {
    	margin: 0;
    	display: block;
    	}
    #commentform input {
    	width: 170px;
    	padding: 2px;
    	margin: 5px 5px 1px 0;
    	}
    
    #commentform textarea {
    	width: 100%;
    	padding: 2px;
    	}
    
    #commentform #submit {
    	margin: 0;
    	float: right;
    }
    .commentlist cite, .commentlist cite a {
    	font-weight: bold;
    	font-style: normal;
    	font-size: 1.1em;
    	}
    
    .commentlist p {
    	font-weight: normal;
    	line-height: 1.5em;
    	text-transform: none;
    	}

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, is it possible that you could post a URL of the site? It would be easier to see the code in action, because I can use Firebug to see what exactly is causing the problem.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't have a site that I can post it on. Everything is on localhost. Here is all my code. If someone could help me out I would greatly appreciate it as this has been driving me crazy. I used firebug to try to resolve the issue but I can't seem to find it. Thanks.

    HTML
    Code:
    <center>
    <div class="container">
    <div class="tt"><span></span></div>
    <div class="center">
    <!--begin content-->
    
    <div class="logo"><span>this is a test sentence</span>
    </div>
    <div class="topnav">
    <ul class="nav">
    <li class="top"><a class="active" href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contribute</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">RSS</a></li>
    </ul></div>
    <div class="header">&nbsp;</div>
    	<div class="content">
    
    	
    		
    			<div id="post-9" class="post">
    				<h2><a title="Permanent Link to Test Post" rel="bookmark" href="http://localhost/wordpress/test-post/">Test Post</a></h2>
    				<small>August 17th, 2010 by admin | <a title="Comment on Test Post" href="http://localhost/wordpress/test-post/#respond">No Comments </a> </small>
    
    				<div class="entry">
    					<p>This is a test post. This is a test post. This is a test post. This is a test post. This is a test post. This is a test post. This is a test post. This is a  test post.This is a test post. This is a test post. This is a test post. This is a  test post.This is a test post. This is a test post. This is a test post. This is a  test post.This is a test post. This is a test post. This is a test post. This is a  test post.This is a test post. This is a test post. This is a test post. This is a  test post. This is a test post. This is a test post. This is a test post. This is a  test post. This is a test post. This is a test post. This is a test post. This is a  test post. This is a test post. This is a test post. This is a test  post. This is a  test post.This is a test post. This is a test post.  This is a test post. This is a  test post.This is a test post. This is a  test post. This is a test post. This is a  test post.This is a test  post. This is a test post. This is a test post. This is a  test  post.This is a test post. This is a test post. This is a test post. This  is a  test post. This is a test post. This is a test post. This is a  test post. This is a  test post.  <a class="more-link" href="http://localhost/wordpress/test-post/#more-9">Read the rest of this entry </a></p>
    				</div>
    
    				<p class="postmetadata"> Posted in <a rel="category tag" title="View all posts in Uncategorized" href="http://localhost/wordpress/category/uncategorized/">Uncategorized</a> |   </p>
    			</div>
    
    		<center><img height="40" width="174" src="http://localhost/wordpress/wp-content/themes/bluesky/images/blueskyseparator.png"></center>
    			<div id="post-1" class="post">
    				<h2><a title="Permanent Link to Hello World!" rel="bookmark" href="http://localhost/wordpress/hello-world/">Hello World!</a></h2>
    				<small>August 10th, 2010 by admin | <a title="Comment on Hello World!" href="http://localhost/wordpress/hello-world/#comments">3 Comments </a> </small>
    
    				<div class="entry">
    					<p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!<br>
    Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!<br>
    Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!<br>
    Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!<br>
    Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!<br>
    Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!<br>
    Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!<br>
    Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!<br>
    Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!<br>
    Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!<br>
    Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!<br>
    Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!<br>
    Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!<br>
    Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!<br>
    Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!<br>
    Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!<br>
    Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!<br>
    Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!<br>
    Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!<br>
    Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>
    				</div>
    
    				<p class="postmetadata">Tags: <a rel="tag" href="http://localhost/wordpress/tag/hello/">hello</a>, <a rel="tag" href="http://localhost/wordpress/tag/newpost/">newpost</a>, <a rel="tag" href="http://localhost/wordpress/tag/post/">post</a>, <a rel="tag" href="http://localhost/wordpress/tag/world/">world</a><br> Posted in <a rel="category tag" title="View all posts in Uncategorized" href="http://localhost/wordpress/category/uncategorized/">Uncategorized</a> |   </p>
    			</div>
    
    		
    		<div class="navigation">
    			<div class="alignleft"></div>
    			<div class="alignright"></div>
    		</div>
    
    	
    	</div>
    
    	<div class="sidebar">
    		<ul>
    			
    			
    
    			<!-- 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>
    			-->
    
    						<li><h2>Search</h2>
    				<form action="http://localhost/wordpress/" id="searchform" method="get">
    <div class="search_field"><input type="text" id="s" name="s" value="">
    <input type="submit" value="" class="searchsubmit">
    </div>
    </form>
    			</li>
    <li><h2>Follow Us</h2>
    <div class="social"><a href="#"><img alt="Subscribe to our RSS feed" src="http://localhost/wordpress/wp-content/themes/bluesky/images/rss.gif"></a>
    <a href="#"><img alt="Follow us on Twitter" src="http://localhost/wordpress/wp-content/themes/bluesky/images/twitter.gif"></a>
    <a href="#"><img alt="Become a fan on Facebook" src="http://localhost/wordpress/wp-content/themes/bluesky/images/facebook.gif"></a>
    <a href="#"><img alt="Subscribe to our mailing list" src="http://localhost/wordpress/wp-content/themes/bluesky/images/email.gif"></a></div></li>
    <li><h2>Recent Posts</h2></li><li><a title="Permanent Link: Test Post" rel="bookmark" href="http://localhost/wordpress/test-post/">Test Post</a></li><li><a title="Permanent Link: Hello World!" rel="bookmark" href="http://localhost/wordpress/hello-world/">Hello World!</a></li>			
    <li class="categories"><h2>Categories</h2><ul>	<li class="cat-item cat-item-1"><a title="View all posts filed under Uncategorized" href="http://localhost/wordpress/category/uncategorized/">Uncategorized</a> (2)
    </li>
    </ul></li>			
    										<li><h2>Archives</h2>
    				<ul>
    					<li><a title="August 2010" href="http://localhost/wordpress/2010/08/">August 2010</a></li>
    				</ul>
    			</li>
    <li><h2>Popular</h2><a style="font-size: 11px; color: rgb(51, 108, 11);" rel="tag" title="1 topics" class="ctc-tag tag-link-5" href="http://localhost/wordpress/tag/hello/">hello</a>
    <a style="font-size: 11px; color: rgb(51, 108, 11);" rel="tag" title="1 topics" class="ctc-tag tag-link-8" href="http://localhost/wordpress/tag/newpost/">newpost</a>
    <a style="font-size: 11px; color: rgb(51, 108, 11);" rel="tag" title="1 topics" class="ctc-tag tag-link-7" href="http://localhost/wordpress/tag/post/">post</a>
    <a style="font-size: 11px; color: rgb(51, 108, 11);" rel="tag" title="1 topics" class="ctc-tag tag-link-6" href="http://localhost/wordpress/tag/world/">world</a></li>					
    				</ul>
    				
    			
    					
    	</div>	
    <!--end content-->
    </div>
    <div class="bottom"><span></span></div>
    </div>
    <div class="footer">
    
    	<p>
    		&copy; All Rights Reserved. <br><a href="#">Contact Us</a> | <a href="#">Contribute</a> | <a href="http://localhost/wordpress/feed/">RSS</a>
    		<!-- 16 queries. 0.507 seconds. -->
    	</p>
    </div>
    
    
    
    
    		</center>
    CSS
    Code:
    .container {
    	width: 65%;
    	margin: 10px auto;
    	background: #fff url('images/left.gif') repeat-y left top;
    	
    }
    .tt {
    	width: 100%;
    	height: 20px;
    	background: url('images/roundtop.gif') no-repeat left top;
    }
    .tt span {
    	display: block;
    	position: relative;
    	height: 20px;
    	background: url('images/topright.gif') no-repeat right top;
    }
    .center {
    	background: url('images/rightsi.gif') repeat-y right top;
    	padding: 1px 20px 1px 25px;
    	margin: 1px 0 -50px 0;
    }
    .bottom {
    	height: 60px;
    	background: url('images/bottomb.gif') no-repeat left bottom;
    }
    .bottom span {
    	display: block;
    	position: relative;
    	height: 60px;
    	background: url('images/bottomright.gif') no-repeat right top;
    }
    
    .logo {
    	width:413px;
    	height:117px;
    	float: left;
    	background:url('images/logo.jpg') no-repeat;
    }
    .logo span {
    	text-align: right;
    	vertical-align: bottom;
    	font-size: 10px;
    	padding-top: 70px;
    	clear: both;
    	float: right;
    }
    .topnav ul {
    	margin-top: 32px;
    	padding-left: 0;
    	margin-right: 50px;
    	background: url('images/topnav.gif');
    	color: white;
    	float: right;
    	height: 40px;
    	width: 400px;
    }
    .topnav ul li {
    	display: inline;
    }
    .topnav ul li a {
    	padding: 11px 16px;
    	color: #000;
    	text-decoration: none;
    	float: left;
    	font-size: 13px;
    }
    .topnav ul li a:hover {
    	color: #2c600d; 
    }
    .header {
    	height: 2px;
    	width: 100%;
    	background-color: #e5f3db;
    	clear: both;
    	float: left;
    	margin-top: -20px;
    	margin-bottom: 35px;
    }
    .content {
    	position: absolute;
    	margin-top: 100px;
    }
    .sidebar ul, .sidebar ul ol {
    	margin: 0;
    	padding: 0;
    	}
    
    .sidebar ul li {
    	list-style-type: none;
    	list-style-image: none;
    	margin-bottom: 15px;
    	}
    
    .sidebar ul p, .sidebar ul select {
    	margin: 5px 0 8px;
    	}
    
    .sidebar ul ul, .sidebar ul ol {
    	margin: 5px 0 0 10px;
    	}
    
    .sidebar ul ul ul, .sidebar ul ol {
    	margin: 0 0 0 10px;
    	}
    
    ol li, .sidebar ul ol li {
    	list-style: decimal outside;
    	}
    
    .sidebar ul ul li, .sidebar ul ol li {
    	margin: 3px 0 0;
    	padding: 0;
    	}
    .sidebar
    {
    	padding-bottom: 10px;
    	margin-left: 739px;
    	width: 190px;
    	background: #eefbe5;
    	color: #336c0b;
    	clear: both;
    	}
    
    .sidebar h2 {
    	font-size: 15px;
    	height: 22px;
    	width: 190px;
    	color: #2c5614;
    	background: #c3e3ae;
    }
    
    .sidebar a {
    	color: #336c0b;
    	text-decoration: none;
    }
    .sidebar a:hover {
    	text-decoration: underline;
    } 
    .social
    {
    	padding-top: 20px;
    }
    .post {
    	margin: 0 0 40px;
    	text-align: justify;
    }
    .post h2 {
    	text-decoration: none;
    	font-size: 25px;
    }
    .post h2 a {
    	color: #2f7107;
    	text-decoration: none;
    }
    .post h2 a:hover {
    	color: #5c9b31;
    }
    #searchform {
    	margin: 10px auto;
    	padding: 5px 3px; 
    	text-align: center;
    	}
    
    #sidebar #searchform #s {
    	width: 108px;
    	padding: 2px;
    	}
    
    #sidebar .searchsubmit {
    	padding: 1px;
    	} 
    .searchsubmit {
    	background: url('images/search.gif') no-repeat;
    	border: none;
    	width: 67px;
    	height: 26px;
    	margin-top: 10px;
    }
    .searchsubmit:hover {
    	background: url('images/search-hover.gif') no-repeat;
    }
    .search_submit {
    	width: 185px;
    	height: 32px;
    	background: url('images/search-box.gif') no-repeat;
    	float: left;
    }
    	
    .alignright {
    	float: right;
    }
    .alignleft {
    	float: left
    }
    .content {
    	width: 700px;
    }
    .content a {
    	color: #336c0b;
    	text-decoration: none;
    }
    .content a:hover {
    	text-decoration: underline;
    }
    html>body .entry li {
    	margin: 7px 0 8px 10px;
    	}
    
    .entry ul li:before, #sidebar ul ul li:before {
    	content: "\00BB \0020";
    	}
    
    .entry ol {
    	padding: 0 0 0 35px;
    	margin: 0;
    	}
    
    .entry ol li {
    	margin: 0;
    	padding: 0;
    	}
    
    .postmetadata ul, .postmetadata li {
    	display: inline;
    	list-style-type: none;
    	list-style-image: none;
    	}
    .postmetadata {
    	clear: left;
    }
    .comment {
    	color: #336c0b;
    	clear: both;
    }
    .footer {
    	padding: 0;
    	margin: 0 auto;
    	width: 65%;
    	clear: both; 
    	border: none;
    	}
    
    .footer p {
    	margin: 0;
    	text-align: center;
    	font-size: 10px;
    	}
    .footer a {
    	color: #336c0b;
    	text-decoration: none;
    	font-size: 11px;
    }
    .footer a:hover {
    	text-decoration: underline;
    }
    .comments {
    	background-color: #eefbe5;
    	border: 1px solid #336c0b;
    }
    h3.comments {
    	padding: 0;
    	margin: 40px auto 20px ;
    	font-size: 12px;
    	color: #336c0b;
    }
    .altinfo {
    	margin: 0;
    	padding: 10px;
    	background-color: #f9fef5;
    	border-top: 1px solid #87bd61;
    	border-bottom: 1px solid #87bd61;
    }
    .alt {
    	margin: 0;
    	padding: 10px;
    	background-color: #eefbe5;
    
    }
    
    .commentlist {
    	padding: 0;
    	text-align: justify;
    	clear: both;
    	}
    
    .commentlist li {
    	margin: 15px 0 3px;
    	padding: 5px 10px 3px;
    	list-style: none;
    	}
    
    .commentlist p {
    	margin: 10px 5px 10px 0;
    	}
    
    #commentform p {
    	margin: 5px 0;
    	}
    
    .nocomments {
    	text-align: center;
    	margin: 0;
    	padding: 0;
    	}
    
    .commentmetadata {
    	margin: 0;
    	display: block;
    	}
    #commentform input {
    	width: 170px;
    	padding: 2px;
    	margin: 5px 5px 1px 0;
    	}
    
    #commentform textarea {
    	width: 100%;
    	padding: 2px;
    	}
    
    #commentform #submit {
    	margin: 0;
    	float: right;
    	}
    .commentlist li, #commentform input, #commentform textarea {
    	font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;
    	}
    
    .commentlist li {
    	font-weight: bold;
    	}
    
    .commentlist cite, .commentlist cite a {
    	font-weight: bold;
    	font-style: normal;
    	font-size: 1.1em;
    	}
    
    .commentlist p {
    	font-weight: normal;
    	line-height: 1.5em;
    	text-transform: none;
    	}
    
    #commentform p {
    	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    	}
    
    .commentmetadata {
    	font-weight: normal;
    	}
    small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
    	color: #777;
    	}
    
    
    /* End my styling */
    /* Begin Typography & Colors */
    body {
    	font-size:12.5px;
    	font-family:'Lucida Grande','Lucida Sans Unicode',Tahoma,Arial,san-serif;
    	background: #eff2f3;
    	color: #333;
    	text-align: center;
    }
    #page {
    	background-color: white;
    	border: 1px solid #959596;
    	text-align: left;
    	}
    .widecolumn .entry p {
    	font-size: 1.05em;
    	}
    
    .narrowcolumn .entry, .widecolumn .entry {
    	line-height: 1.4em;
    	}
    
    .widecolumn {
    	line-height: 1.6em;
    	}
    
    .narrowcolumn .postmetadata {
    	text-align: center;
    	}
    
    
    
    
    
    small {
    	font-family: 'Lucida Handwriting', Arial, Helvetica, Sans-Serif;
    	font-size: 0.9em;
    	line-height: 1.5em;
    	}
    .entry p a:visited {
    	color: #b85b5a;
    	}
    
    
    
    code {
    	font: 1.1em 'Courier New', Courier, Fixed;
    	}
    
    acronym, abbr, span.caps
    {
    	font-size: 0.9em;
    	letter-spacing: .07em;
    	}
    #wp-calendar #prev a, #wp-calendar #next a {
    	font-size: 9pt;
    	}
    
    #wp-calendar a {
    	text-decoration: none;
    	}
    
    #wp-calendar caption {
    	font: bold 1.3em 'Lucida Grande', Verdana, Arial, Sans-Serif;
    	text-align: center;
    	}
    
    #wp-calendar th {
    	font-style: normal;
    	text-transform: capitalize;
    	}
    /* End Typography & Colors */
    
    
    
    /* Begin Structure */
    body {
    	margin: 0 0 20px 0;
    	padding: 0; 
    	}
    
    #page {
    	background-color: white;
    	margin: 20px auto;
    	padding: 0;
    	width: 760px;
    	border: 1px solid #959596;
    	}
    
    
    .narrowcolumn {
    	float: left;
    	padding: 0 0 20px 45px;
    	margin: 0px 0 0;
    	width: 450px;
    	}
    
    .widecolumn {
    	padding: 10px 0 20px 0;
    	margin: 5px 0 0 150px;
    	width: 450px;
    	}
    
    
    
    .post hr {
    	display: block;
    	}
    
    .widecolumn .post {
    	margin: 0;
    	}
    
    .narrowcolumn .postmetadata {
    	padding-top: 5px;
    	}
    
    .widecolumn .postmetadata {
    	margin: 30px 0;
    	}
    
    .widecolumn .smallattachment {
    	text-align: center;
    	float: left;
    	width: 128px;
    	margin: 5px 5px 5px 0px;
    }
    
    .widecolumn .attachment {
    	text-align: center;
    	margin: 5px 0px;
    }
    
    /* End Structure */
    
    
    
    /*	Begin Headers */
    h1 {
    	padding-top: 70px;
    	margin: 0;
    	}
    
    h2 {
    	margin: 30px 0 0;
    	}
    
    h2.pagetitle {
    	margin-top: 30px;
    	text-align: center;
    }
    
    #sidebar h2 {
    	margin: 5px 0 0;
    	padding: 0;
    	}
    
    h3 {
    	padding: 0;
    	margin: 30px 0 0;
    	}
    
    
    /* End Headers */
    
    
    
    /* Begin Images */
    p img {
    	padding: 0;
    	max-width: 100%;
    	}
    
    /*	Using 'class="alignright"' on an image will (who would've
    	thought?!) align the image to the right. And using 'class="centered',
    	will of course center the image. This is much better than using
    	align="center", being much more futureproof (and valid) */
    
    img.centered {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    	}
    
    img.alignright {
    	padding: 4px;
    	margin: 0 0 2px 7px;
    	display: inline;
    	}
    
    img.alignleft {
    	padding: 4px;
    	margin: 0 7px 2px 0;
    	display: inline;
    	}
    
    
    /* End Images */
    
    
    
    /* Begin Lists
    
    	Special stylized non-IE bullets
    	Do not work in Internet Explorer, which merely default to normal bullets. */
    
    html>body .entry ul {
    	margin-left: 0px;
    	padding: 0 0 0 30px;
    	list-style: none;
    	padding-left: 10px;
    	text-indent: -10px;
    	} 
    
    
    
    
    /* End Entry Lists */
    
    
    
    /* Begin Form Elements */
    
    .entry form { /* This is mainly for password protected posts, makes them look better. */
    	text-align:center;
    	}
    
    select {
    	width: 130px;
    	}
    
    
    /* End Form Elements */
    
    /* Begin Sidebar */
    
    
    #sidebar form {
    	margin: 0;
    	}
    /* End Sidebar */
    
    
    
    /* Begin Calendar */
    #wp-calendar {
    	empty-cells: show;
    	margin: 10px auto 0;
    	width: 155px;
    	}
    
    #wp-calendar #next a {
    	padding-right: 10px;
    	text-align: right;
    	}
    
    #wp-calendar #prev a {
    	padding-left: 10px;
    	text-align: left;
    	}
    
    #wp-calendar a {
    	display: block;
    	}
    
    #wp-calendar caption {
    	text-align: center;
    	width: 100%;
    	}
    
    #wp-calendar td {
    	padding: 3px 0;
    	text-align: center;
    	}
    
    #wp-calendar td.pad:hover { /* Doesn't work in IE */
    	background-color: #fff; }
    /* End Calendar */
    
    
    
    /* Begin Various Tags & Classes */
    acronym, abbr, span.caps {
    	cursor: help;
    	}
    
    acronym, abbr {
    	border-bottom: 1px dashed #999;
    	}
    
    blockquote {
    	margin: 15px 30px 0 10px;
    	padding-left: 20px;
    	border-left: 5px solid #ddd;
    	}
    
    blockquote cite {
    	margin: 5px 0 0;
    	display: block;
    	}
    
    .center {
    	text-align: center;
    	}
    
    hr {
    	display: none;
    	}
    
    a img {
    	border: none;
    	}
    
    .navigation {
    	display: block;
    	text-align: center;
    	margin-top: 10px;
    	margin-bottom: 60px;
    	}

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Never mind, I finally figured it out. I had absolute positioning on a div.


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
  •