Need Advice on Page Layout

In Dreamweaver would the (1 column fixed, centered, header and footer) be a good starting point but does this allow for the white space on both sides?

osgood, wow thanks a ton. that is very helpful.

So now I can just attach a style sheet to this and voila!.

osgood,

Hi, I just realized (too late) that I need a grey background with drop shadow like in my image. Is there any way to add this or is it too late and do I need to start all over?

I also need to add a horizontal bar at the top of the image with a logo and drop down menu so it will match the rest of the website. Can I make the logo top bar and drop down menu a separate external style sheet so it can be used across my whole site?

Thanks Nancy. Works great but I am having a couple of problems. I applied your code to the code above and this is what I am getting. (see image)

1. The Grey Background color is filling the whole page and I need the area behind the text to be white.

2. The Drop Shadow is too close to the text and images. (I need some space between the drop shadow and white area)

Nancy, yes that was it thank you so much!

Let me explain what it is I am trying to do. I now have the page looking quite good but I need to incorporate 2 more things so it will have the look of my existing website. Those 2 things are:

my "website navigation menu”, "horizontal bar" at the top of the page and logo.

Below is my website menu. I have copied this .html code into my new page but the styling is confusing me. The navigation menu uses a style (see code below) but I am not sure what the style is controlling the look of the menu. I want to make the menu look like it does on my website here. website

How can I add my menu, horizontal bar and logo so it looks like it does on my website?

<div id="header" class="clearfix">

 

          <div class="holder clearfix">

 

                    <div class="skipLink"><a href="#content" title="Skip to content">Skip to content</a></div>

 

                    <div id="title"><span><a href="index.html" title=“WEBSITE LOGO" rel="home"><img src="images/temp/logo.png" alt=" " width="200" height="50"/></a></span></div>

 

                    <ul id="siteNav">

                        <li><a href="index.html">Home</a></li>

                              <li class="hasSub">

                                        <a>Gallery</a>

                                        <ul>

                                                  <li><a href="2d_character.html">2D Character</a></li>

                                                  <li><a href="3d_character.html">3D Character</a></li>

                                                  <li><a href="concept_art.html">Concept Art</a></li>

                    <li><a href="design.html">Design</a></li>

                    <li><a href="illustration.html">Illustration</a></li>

                    <li><a href="movies.html">Movies</a></li>

                    <li><a href="sketchbook.html">Sketchbook</a></li>

                                        </ul>

                              </li>

            <li><a href="http://blogspot.com/">Blog</a></li>

            <li class="hasSub">

                                        <a>Store</a>

                                        <ul>

                    <li><a>Coming Soon!</a></li>

                                        </ul>

                              </li>

            <li class="hasSub">

                                        <a>Info</a>

                                        <ul>

                                                  <li><a href="about.html">About</a></li>

                                                  <li><a href="services.html">Services</a></li>

                                                  <li><a href="process.html">Process and Pricing</a></li>

                    <li><a href="testimonials.html">Testimonials</a></li>

                                        </ul>

                              </li>

                              <li><a href="contact.html">Contact</a></li>

                    </ul>

 

 

          </div>

 

</div><!-- #header -->

Upload what you have so far and provide a link to the page so we can take a look rather than trying to guess where everything is meant to go.

Osgood, here is the link to the page. http://www.buzzfx.ca/featured.html

Let me explain what it is I am trying to do. I now have the page looking quite good but I need to incorporate 2 more things so it will have the look of my existing website. Those 2 things are:

my "website navigation menu”, "horizontal bar" at the top of the page and logo.

Below is my website menu. I have copied this .html code into my new page but the styling is confusing me. The navigation menu uses a style (see code below) but I am not sure what the style is controlling the look of the menu. I want to make the menu look like it does on my website.

How can I add my menu, horizontal bar and logo so it looks like it does on my website?

Your top menu appears to be styled by base.css beginning at ul#sitenav.  But that may be only one piece of it since you're also using reset.css and dark.css for global styles.

Thanks Nancy, yes the person who created the website used a gazzillion different CSS rules to style each element so it’s especially confusing to me. I want to try to make it “simpler” going forward. I thought if I made the menu/navigation a new and separate .CSS rule that might simplify things. I just need to find the correct rule elements to make it look like the current menu.

Here is the .CSS code for the header I believe. Confusing to me and I wish I understood how to simplify it somewhat.Would you paste this inline into the page above or create a separate external style for this?

/* HEADER ---------------------------------------------------------*/

          #header {

          background-color: #222;

          }

          #title a {

          color: #319;

          }

          ul#siteNav li a {

                    color: #999;

          }

          ul#siteNav li a:hover,

          ul#siteNav li a:focus {

                    color: #99CC00;

          }

          ul#siteNav > li.selected > a {

                    background: url(../images/sitenav_selected_dark.png) 50% 100% no-repeat;

          }

          ul#siteNav > li.hasSub.hover > a,

          ul#siteNav li.hasSub ul {

                    background: #222;

          }

          ul#siteNav li.hasSub.hover a {

                    color: #999;

          }

          ul#siteNav li.hasSub.hover ul li a:hover,

          ul#siteNav li.hasSub.hover ul li a:focus {

                    color: #99CC00;

          }

          ul#siteNav li.hasSub.hover ul li a {

                    border-top: 1px solid #333;

          }