Skip navigation
Currently Being Moderated

Need Advice on Page Layout

May 7, 2012 10:11 AM

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

 
Replies
  • Currently Being Moderated
    May 7, 2012 10:25 AM   in reply to Comp. 792

    Comp. 792 wrote:

     

    I keep having problems

    Care to tell us what problems you're having?

     

    Nested DIV's are the way to go

     
    |
    Mark as:
  • Currently Being Moderated
    May 7, 2012 10:42 AM   in reply to Comp. 792

    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>

     
    |
    Mark as:
  • Currently Being Moderated
    May 7, 2012 4:06 PM   in reply to Comp. 792

    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/


     
    |
    Mark as:
  • Currently Being Moderated
    May 7, 2012 5:20 PM   in reply to Comp. 792

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 8, 2012 12:31 AM   in reply to Comp. 792

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 8, 2012 11:17 AM   in reply to Comp. 792

    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/

     
    |
    Mark as:
  • Currently Being Moderated
    May 8, 2012 12:27 PM   in reply to Comp. 792

    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/

     

     

     

     


     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points