Web Page Layout in Photoshop and ImageReady

The CSS
Falling under goals 2 and 3, the CSS for the design needs to be external. This will make page loads faster since the CSS only needs to be downloaded once and should remain cached on the visitors machine. It also takes some of the HTML gloat out of the page which hopefully will make it friendlier to search engines.

Rather than describe each section in detail, the entire CSS follows. Afterwards I’ll go back and explain a few things.

/*
Theme Name: Blog@Nutt.net Default
Theme URI: http://blog.nutt.net
Description: The primary theme for Blog@Nutt.net
Version: 1.0
Author: Ryan Nutt
Author URI: http://blog.nutt.net
*/
body    {
    background-image:       url('images/left_border.gif');
    background-repeat:      repeat-y;
    background-position:    0px 200px;
    margin:                 0px;
    padding:                0px;
    font-family:            Tahoma, Geneva, Trebuchet MS, Helvetica, Arial, sans-serif;
    }
table   {
    border: 0px;
    }
img {
    border:                 0px;
    }
a   {
    text-decoration:        none;
    color:                  #990000;
    }
a:hover {
    color:                  #cc0000;
    }
h2, h3  {
     border-bottom:  #efebef solid 1px;
     }
p   {
    line-height:            1.5em;
    }
#page   {
    margin-top:             250px;
    }
#header {
    position:               absolute;
    height:                 200px;
    width:                  100%;
    left:                   0px;
    top:                    0px;
    background-image:       url('images/header.gif');
    background-repeat:      repeat-x;
    }
    #header #title  {
        position:           absolute;
        left:               250px;
        top:                10px;
        right:              10px;
        text-align:         right;
        }
.narrowcolumn   {
    margin-right:           40px;
    position:               absolute;
    top:                    200px;
    left:                   300px;
    }
    .narrowcolumn h2    {
        color:              #990000;
        }
        .narrowcolumn h2 a  {
            border-bottom:  #efebef solid 1px;
            }
        .narrowcolumn h2 a:hover    {
            color:          #cc0000;
            }
        .narrowcolumn a {
            color:          #990000;
            text-decoration:none;
            }
        .narrowcolumn a:hover   {
            color:          #cc0000;
            }
#sidebar    {
    width:                  180px;
    position:               absolute;
    left:                   0px;
    top:                    200px;
    padding-left:           20px;
    }
    #sidebar h2, h3 {
        border:             0px;
        margin-bottom:      0px;
        padding-bottom:     0px;
        margin-top:         0px;
        padding-top:        0px;
        }
    #sidebar li {
        list-style-type:    none;
        margin:             0px;
        padding:            0px;
        }
    #sidebar li h2  {
        font-size:          medium;
        color:              white;
        background-color:   #990000;
        text-align:         center;
        }
    #sidebar li ul  {
        background:         white;
        border:             1px solid black;
        margin:             0px;
        padding:            0px;
        margin-bottom:      15px;
        }
    #sidebar ul {
        margin:             0px;
        padding:            0px;
        padding-bottom:     25px;
        }
#submit, #searchsubmit {
    background:             #efebef;
    border-top:             1px solid black;
    border-left:            1px solid black;
    border-right:           2px solid black;
    border-bottom:          2px solid black;
    }
#comment    {
    width: 500px;
    }

Most of the CSS is specific to my site, and done to match the colors I wanted. But there are a few items to point out.

1. body – The left_border.gif is repeated down the entire page, but doesn’t start until 200px down the page. This repetition gives the illusion of a wavy border going down the entire page. The 200px vertical offset is so that the header graphics don’t overlap.
2. #sidebar & #narrowcolumn – These are the two ids that contain the navigation and content. They are both absolutely positioned so that the margins work out right.
3. #header – The header block is also absolutely positioned. I do this so that the HTML to display the header can actually be the last part of the HTML code. The positioning of the content and sidebar leave a gap for the header to fit into at the end. This should make the design more search engine friendly.
4. #header #title – This is where my logo is contained, and it’s absolutely positioned as well. The 200px left positioning is to allow room for the top_left.gif to be put in.
5. This is ultimately going to be a WordPress theme, and comments in the style.css file is where the theme information is pulled from. That’s why the comments at the top are in the format they are.

Pages: 1 2 3 4 5 6 7 8 9 10