14 Replies Latest reply: May 8, 2012 12:27 PM by Nancy O. RSS

    Need Advice on Page Layout

    Comp. 792 Community Member

      Hi, I am trying to layout this page but I keep having problems because I think I am not choosing the best method to layout this page. Can someone please tell me how you would design/layout this page properly. For example I am not sure if it would be best to use a table to create the grid or just do it using CSS? Thanks.

       

      Layout.jpg

        • 1. Re: Need Advice on Page Layout
          Ken Binney CommunityMVP

          Comp. 792 wrote:

           

          I keep having problems

          Care to tell us what problems you're having?

           

          Nested DIV's are the way to go

          • 2. Re: Need Advice on Page Layout
            Comp. 792 Community Member

            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?

            • 3. Re: Need Advice on Page Layout
              osgood_ CommunityMVP

              This should get you started:

               

               

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

              <head>

              <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

              <title>Untitled Document</title>

              <style type="text/css">

              body {

                  font-family: arial, helvetica, sans-serif;

                  font-size: 12px;

              }

              #wrapper {

                  width: 660px;

                  margin: 0 auto;

              }

              h1 {

                  text-align: center;

              }

              .section {

                  padding: 20px 0;

                  overflow: hidden;

                  border-top: 2px solid #000;

              }

              .section img {

                  float: left;

                  border: 1px solid #999;

              }

              .sectionTextWrapper {

                  margin: 0 0 0 180px;

              }

              .section h2 {

              font-size: 18px;

                  margin: 0 0 0 180px;

                  padding: 0 0 10px 0;

              }

              .section p {

                  line-height: 18px;

              margin: 0 0 0 180px;

                  padding: 0;

                  clear: right;

              }

              .button {

                  float: right;

                  display: inline-block;

                  text-decoration: none;

                  background-color: #000;

                  padding: 5px 15px;

                  color: #fff;

                  margin: 8px 0 0 0;

              }

               

              </style>

              </head>

               

              <body>

              <div id="wrapper">

              <h1>Title Goes Here</h1>

              <div class="section">

              <img scr="images/image_1.jpg" width="160" height="120" alt="" />

              <div id="sectionTextWrapper">

              <h2>Subtitle Goes Here</h2>

              <p>Some text goes in this place. Some text goes in this place. Some text goes in this place. Some text goes in this place.

              Some text goes in this place. Some text goes in this place. Some text goes in this place. Some text goes in this place.

              Some text goes in this place. Some text goes in this place. Some text goes in this place. Some text goes in this place.</p>

              <a href="#" class="button">Button Image</a>

              </div><!-- end sectionTextWrapper -->

              </div><!-- end section -->

               

              <div class="section">

              <img scr="images/image_1.jpg" width="160" height="120" alt="" />

              <div id="sectionTextWrapper">

              <h2>Subtitle Goes Here</h2>

              <p>Some text goes in this place. Some text goes in this place. Some text goes in this place. Some text goes in this place.

              Some text goes in this place. Some text goes in this place. Some text goes in this place. Some text goes in this place.

              Some text goes in this place. Some text goes in this place. Some text goes in this place. Some text goes in this place.</p>

              <a href="#" class="button">Button Image</a>

              </div><!-- end sectionTextWrapper -->

              </div><!-- end section -->

               

               

               

              <div class="section" style="border-bottom: 2px solid #000;">

              <img scr="images/image_1.jpg" width="160" height="120" alt="" />

              <div id="sectionTextWrapper">

              <h2>Subtitle Goes Here</h2>

              <p>Some text goes in this place. Some text goes in this place. Some text goes in this place. Some text goes in this place.

              Some text goes in this place. Some text goes in this place. Some text goes in this place. Some text goes in this place.

              Some text goes in this place. Some text goes in this place. Some text goes in this place. Some text goes in this place.</p>

              <a href="#" class="button">Button Image</a>

              </div><!-- end sectionTextWrapper -->

              </div><!-- end section -->

               

              </div><!-- end wrapper -->

              </body>

              </html>

              • 4. Re: Need Advice on Page Layout
                Comp. 792 Community Member

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

                 

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

                 

                column_test.jpg

                • 5. Re: Need Advice on Page Layout
                  Comp. 792 Community Member

                  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?

                   

                  Layout.jpg

                  • 6. Re: Need Advice on Page Layout
                    Nancy O. CommunityMVP

                    Apply background-color to body and box-shadows to #wrapper. Feel free to change values to suit.

                     

                    body {

                        font-family: arial, helvetica, sans-serif;

                        font-size: 12px;

                        background-color:#666666;

                    }

                    #wrapper {

                        width: 660px;

                        margin: 0 auto;

                        -webkit-box-shadow: 2px 3px 5px #333333;

                        -moz-box-shadow: 2px 3px 5px #333333;

                         box-shadow: 2px 3px 5px #333333;

                    }

                     

                     

                    Nancy O.

                    Alt-Web Design & Publishing

                    Web | Graphics | Print | Media  Specialists 

                    http://alt-web.com/

                    http://twitter.com/altweb

                    http://alt-web.blogspot.com/


                    • 7. Re: Need Advice on Page Layout
                      Comp. 792 Community Member

                      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)

                       

                      drop_shadow.jpg

                      • 8. Re: Need Advice on Page Layout
                        Nancy O. CommunityMVP

                        Try this:

                         

                        #wrapper {

                             width: 660px;

                             margin: 0 auto;

                            -webkit-box-shadow: 2px 3px 5px #333333;

                            -moz-box-shadow: 2px 3px 5px #333333;

                             box-shadow: 2px 3px 5px #333333;

                             padding: 12px;  /**adjust as needed**/

                             background: #FFF;

                        }

                         

                        CSS Tutorials:   http://www.w3schools.com/css/default.asp

                         

                         

                        Nancy O.

                        • 9. Re: Need Advice on Page Layout
                          Comp. 792 Community Member

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

                          • 10. Re: Need Advice on Page Layout
                            osgood_ CommunityMVP

                            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.

                            • 11. Re: Need Advice on Page Layout
                              Comp. 792 Community Member

                              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?

                              • 12. Re: Need Advice on Page Layout
                                Nancy O. CommunityMVP

                                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. 

                                 

                                 

                                Nancy O.

                                Alt-Web Design & Publishing

                                Web | Graphics | Print | Media  Specialists 

                                http://alt-web.com/

                                http://twitter.com/altweb

                                http://alt-web.blogspot.com/

                                • 13. Re: Need Advice on Page Layout
                                  Comp. 792 Community Member

                                  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;

                                            }

                                  • 14. Re: Need Advice on Page Layout
                                    Nancy O. CommunityMVP

                                    Use an external CSS file for site wide styles.

                                    Use embedded CSS between the <head> tags for page specific styles.

                                    Use inline CSS (in the HTML code) rarely if ever.  Inline is only used for HTML emails or when you need to create an exception to a CSS rule.

                                     

                                    Add your menu styles to your main.css file.

                                     

                                    How to link HTML pages to external .css.

                                    http://alt-web.com/DEMOS/DW-Link-Stylesheet.shtml

                                     

                                     

                                    Nancy O.

                                    Alt-Web Design & Publishing

                                    Web | Graphics | Print | Media  Specialists 

                                    http://alt-web.com/

                                    http://twitter.com/altweb

                                    http://alt-web.blogspot.com/