...

View Full Version : CSS & Wordpress



sstch
03-03-2009, 05:28 PM
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:

http://i41.tinypic.com/2lixxxi.jpg

I have the basic shell layed out and have began inputting some of the wordpress php loops on this site (http://losias.net/hutch). 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:


<!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:


/*
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;
}

Excavator
03-03-2009, 06:44 PM
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 -

/*////////// 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;
}

sstch
03-04-2009, 02:38 AM
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 (http://losias.net/hutch). Is there a reason now why there is a space between the content div footer1, footer2 and footer3 divs?

Excavator
03-04-2009, 03:06 AM
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 (http://losias.net/hutch). 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

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 {}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum