Skip navigation
Currently Being Moderated

Layout Method Suggestions

Jul 8, 2012 10:08 PM

I am working on a simple project and would like some feedback on a good method to lay this out. I am new to web design and new to CSS. I have a subscription to Lynda.com and don't mind digging in on the topic. Currently the biggest challenge I am having is understanding how to properly set up the three boxes.

 

I have thought about a flexible 3 column design but don't know if that's the right path or not. If it is, how do I build up the boxes? If not, what is the best way to do this?

 

Thanks for the constructive feedback.

 

DTS-Web-Site-3.0-Layout.jpg

 
Replies
  • Currently Being Moderated
    Jul 8, 2012 11:30 PM   in reply to JC_Falkor

    Try the following

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    * {
        padding: 0;
        margin: 0;
    }
    html {
        background-color: #FFF;
        font-family: "Arial Black", Gadget, sans-serif;
    }
    body {
        width: 960px;
        margin: 10px auto;
        -webkit-box-shadow: 0 0 5px 5px #CBCBCB;
        box-shadow: 0 0 5px 5px #CBCBCB;
        height: 500px;
    }
    .header {
        height: 250px;
    }
    .article {
    }
    .article .featurebox {
        width: 28%;
        float: left;
        -webkit-box-shadow: 0 0 6px 4px #CBCBCB;
        box-shadow: 0 0 5px 4px #CBCBCB;
        margin-left: 4%;
        font-weight: normal;
        height: 200px;
    }
    .article .featurebox h2 {
        background: #2D426D;
        color: #FFF;
        text-align: center;
        border-bottom: 3px solid #DC4226;
        font-size: 14px;
        line-height: 30px;
    }
    .footer {
    }
    </style>
    </head>
    
    <body>
    <div class="header"></div>
    <div class="article">
        <div class="featurebox">
          <h2>Our Next Class</h2>
        </div>
        <div class="featurebox">
          <h2>eLearning</h2>
        </div>
        <div class="featurebox">
          <h2>Testimonial</h2>
        </div>
    </div>
    <div class="footer"></div>
    </body>
    </html>

     

    Gramps

     
    |
    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