Formatting a Menu and corresponding elements

Now that we have the elements we are going to be using for this article laid out. Lets add formatting for the example. Although unnecessary for functionality This style sheet we will provide a menu and gallery like setup which will better illustrate some of what can be done.

This is my stylesheet.

@charset "utf-8";

/* CSS Document */

body{

background-color:#000;

}

#wrapper

{

width:550px;

height:300px;

margin-top:10px;

padding: 0px;

padding-bottom:10px;

padding-left:10px;

padding-right:10px;

padding-top:10px;

border: 2px solid #363636;

}

#menu

{

display:block;

text-decoration:none;

float:right;

margin-bottom:0px;

margin-top:10px;

height:290px;

border: 1px solid #363636;

width:220px;

}

#menu li

{

list-style:none;

margin-left:20px;

margin-right:20px;

padding-bottom:1.5px;

margin-top:5px;

font-family:Arial, Helvetica, sans-serif;

text-align:center;

}

#menu a {

display: block;

font-size:20px;

color:#000;

background-color:#C00;

margin-top:2px;

}

#content

{

width: 320px;

height:290px;

border: 1px solid #363636;

margin-top:10px;

margin-bottom:10px;

}

#box1

{

position: relative;

height:140px;

width:306;

float:left;

padding-top:5px;

}

#box2

{

position: relative;

height:140px;

width:306;

padding-top:5px;

}

a

{

height:auto;

font-family:"Arial", Helvetica, sans-serif;

text-decoration:none;

color:#C00;

}

In the next post we will get down to using jQuery.