Skip navigation
JC_Falkor
JC_Falkor
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

279 Views   2 Replies   Latest reply: JC_Falkor, Jul 9, 2012 7:34 AM
 
Replies
  • Ben Pleysier
    Currently Being Moderated
    1. Ben Pleysier,
    Jul 8, 2012 11:30 PM   in reply to JC_Falkor
    Report

    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:
  • JC_Falkor
    Currently Being Moderated
    2. JC_Falkor,
    Jul 9, 2012 7:34 AM   in reply to Ben Pleysier
    Report

    Thank you very much for taking the time to help me on this. Your suggestion should work perfectly.

     

    Much appreciated!

     
    |
    Mark as:
Actions

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