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 4 of 4

Thread: CSS & Wordpress

  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation CSS & Wordpress

    Hi all,
    I am trying to do a layout to eventually turn into a wordpress theme but I am running into some trouble with a three column layout. I am currently making the shell for a wordpress theme that will look like the following image:



    I have the basic shell layed out and have began inputting some of the wordpress php loops on this site. However, the loop for posts seems to be altering my design. There is now a space between the "navbar" div and the "content" div that I wish to remove (I want the "content" and "navbar" divs to be attached as in the image above).

    Any help would be appreciate. Following is my HTML and CSS.

    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" xml:lang="en" lang="en">
    <head>
    <title>Test site</title>
    
    <script type="text/javascript" src=""></script>
    <style type="text/css" media="screen">
    
    @import url("<?php bloginfo('stylesheet_url'); ?>");
            
    </style>
    
    </head>
    
    <body bgcolor="#5fb5d1">
    <a name="top"></a><!--anchor for top-->
    
    
    
    <div id="header">
    </div>
    
    <div id="container">
    <div id="navbar">
    
    </div>
    
    <div id="content">
    	<?php if (have_posts()) : ?>
    
    		<?php while (have_posts()) : the_post(); ?>
    
    			<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
    				<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    				<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
    
    				<div class="entry">
    					<?php the_content('Read the rest of this entry &raquo;'); ?>
    				</div>
    
    				<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
    			</div>
    
    		<?php endwhile; ?>
    
    		<div class="navigation">
    			<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
    			<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
    		</div>
    
    	<?php else : ?>
    
    		<h2 class="center">Not Found</h2>
    		<p class="center">Sorry, but you are looking for something that isn't here.</p>
    		<?php get_search_form(); ?>
    
    	<?php endif; ?>
    	
    	
    </div>
    
    
    
    
    <div id="container2">
    <div id="footer1">
    
    </div>
    
    <div id="footer2">
    
    </div>
    
    <div id="footer3">
    
    </div>
    <div style="clear:both;"></div> 
    </div>
    <div id="copyright">
    
    </div>
    </div>
    
    
    </body>
    </html>
    CSS:

    Code:
    /*
    Theme Name: Hutch Wordpress
    Theme URI: http://losias.net/hutch
    Description: The Hutch WordPress theme based on the famous <a href="http://binarybonsai.com/kubrick/">Kubrick</a>.
    Version: 1.beta
    Author: Hutch
    Author URI: http://losias.net/hutch
    Tags: blue, custom header, fixed width, two columns, widgets
    
    The CSS, XHTML and design is released under GPL:
    http://www.opensource.org/licenses/gpl-license.php
    
    */
    
    
    /*////////// GENERAL //////////*/
    body {
     margin: 0px;
    }
    
    #header {
      width: 900px;
    	height: 300px;
      font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
      font-size: 12px;
      line-height:16px;
      color: #666666;
    	background: silver;
    	margin: 0 auto;
    	margin-top: 15px;
    }
    #container {
      margin: 0 auto;
    	margin-top: 40px;
      width: 900px;
      font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
      font-size: 12px;
      line-height:16px;
      color: #666666;
    
    }
    
    	
    	/*////////// TYPEOGRAPHY //////////*/
    h1, h4 {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    }
    
    h2, h3{
      font-family: Georgia, Times, serif;
    }
    		
    h1 {
      font-size: 32px;
    }
    		
    h2 {
      font-size: 22px;
      line-height:24px;
    }
    		
    h3 {
      font-size: 16px;
    }
    	
    h4 {
      font-size: 14px;
    }
    
    p {
      margin-bottom: 18px;
    }
    		
    a {
      text-decoration: none;
      font-weight: bold;
    }
    
    a:hover {
      text-decoration: underline;
    }
    		
    a:visited {}
    	 	 
    
    /*////////// CONTENT //////////*/
    #content {
     background: yellow;
     height: auto;
     padding: 0px;
     margin: 0px 0px 5px 0px;
    
    
    }
    			
      
    /*////////// SIDEBARS //////////*/
    
    
    /*////////// NAV //////////*/
    
    #navbar {
    	padding: 0px;
     margin: 0px 0px 5px 0px;			
      height: 40px;
    	background: orange;
    }
    
    /*////////// BLOG ELEMENTS //////////*/
    
    		
    /*////////// FORMS //////////*/
    
    
    /*////////// FOOTER //////////*/
    #copyright {
     height: 50px;
     background: orange;
    }
    
    #footer1{
    	width:300px; 
    	float:left; 
    	background: silver;
    	height: 100px;
    	} 
    
    #footer2{
    	width:300px; 
    	float:left; 
    	background: blue;
    	height: 100px;
    	} 
    
    #footer3{
      width:300px; 
    	float:right;
    	background: red;
    	height: 100px;
    	}

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello sstch,
    The * thing below is the universal reset. It zeros out default margin/padding - a big help since the defaults are different from browser to browser.
    You will need to specify your own padding on the <h1> and <p> tags now.

    I also removed the 5px bottom margin on the header.

    Changes in red -
    Code:
    /*////////// GENERAL //////////*/
    body {
    }
    *{
    margin: 0;
    padding: 0;
    border: none;
    }
    #header {
      width: 900px;
    	height: 300px;
      font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
      font-size: 12px;
      line-height:16px;
      color: #666666;
    	background: silver;
    	margin: 15px auto 0;
    }
    #container {
      margin: 40px auto 0;
      width: 900px;
      font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
      font-size: 12px;
      line-height:16px;
      color: #666666;
    
    }
    
    #navbar {		
      height: 40px;
    	background: orange;
    }
    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 to the CF scene
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Excavator - you are a genius and a gentleman. I don't know if it was intended or not, but your signature made me laugh since spellchecker is in fact misspelled.

    I have updated the site. Is there a reason now why there is a space between the content div footer1, footer2 and footer3 divs?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by sstch View Post
    Thanks Excavator - you are a genius and a gentleman. I don't know if it was intended or not, but your signature made me laugh since spellchecker is in fact misspelled.

    I have updated the site. Is there a reason now why there is a space between the content div footer1, footer2 and footer3 divs?
    That's not how you spell that?


    To fix your gap, we need to clear the floats in #content.
    I re-arranged your CSS so the styling of the divs comes first and the presentational styling comes last, cleared the floats in #content (there is still the 5px bottom margin causing a small gap but I figured that was intentional) and moved the main font declaration to the body so everything can inherit from that.

    Read about clearing floats with overflow:auto; here - http://www.quirksmode.org/css/clearing.html
    Code:
    html, body {
      font: 12px/16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
      color: #666666;
    }
    *{
    margin: 0;
    padding: 0;
    border: none;
    }
    #header {
      width: 900px;
    	height: 300px;
    	background: silver;
    	margin: 15px auto 0;
    }
    #container {
      margin: 40px auto 0;
      width: 900px;
    }
    /*////////// NAV //////////*/
    #navbar {
      height: 40px;
    	background: orange;
    }
    /*////////// CONTENT //////////*/
    #content {
     background: yellow;
    overflow: auto;
    margin: 0 0 5px 0;
    }
    /*////////// FOOTER //////////*/
    #footer1{
    	width:300px; 
    	float:left; 
    	background: silver;
    	height: 100px;
    } 
    #footer2{
    	width:300px; 
    	float:left; 
    	background: blue;
    	height: 100px;
    } 
    #footer3{
      width:300px; 
    	float:right; 
    	background: red;
    	height: 100px;
    }
    #copyright {
     padding: 0px;
     height: 50px;
     background: orange;
    }	
    	/*////////// TYPEOGRAPHY //////////*/
    h1, h4 {
    }
    h2, h3{font-family: Georgia, Times, serif;}		
    h1 {font-size: 32px;}		
    h2 {
      font-size: 22px;
      line-height:24px;
    }		
    h3 {font-size: 16px;}	
    h4 {font-size: 14px;}
    p {margin-bottom: 18px;}		
    a {
      text-decoration: none;
      font-weight: bold;
    }
    a:hover {text-decoration: underline;}		
    a:visited {}
    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


  •  

    Posting Permissions

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