How can I create a simple html/ccs layout for this brochure page

Hi

Whats the best way to create a simple css/html layout for the attached brochure page?

Many Thanks Praz
praz51Asked:
Who is Participating?
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
Do you see how there is already a row class around each of the bottom and top?  Let's add a class to the top called top_area so we end up with <div class="row top_area"> then add some css to the .top_area class for the background and perhaps some padding http://jsbin.com/tafocafe/4/
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container{width:600px;margin-left:auto;margin-right:auto;border-style:solid;padding:10px;}
    img.right{float:right;}
    .calloutbox{
      border-style:solid;
      border-color:#6495ED;
      width:250px;
      float:right;
      padding:10px;
      margin-top:10px;
      margin-left:10px;
    
    }
    .bottombox{
      padding:10px;
      background-color:#CCFFFF ;
      font-style:oblique;
      font-size:90%;
      
    }
    .top_area{
      background-color:teal;
      padding:5px 10px;
    }
  </style>
</head>
<body>
 <div class="container">
<div class="row top_area">
  <h2>Headline</h2>
  <ul><img class="right" src="http://farm8.staticflickr.com/7336/8723473678_209ce69e3e_o.jpg" width="200">
    <li>Etiam auctor, leo quis dapibus  </li><li>commodo, eros magna imperdiet </li><li>nibh, non consequat </li><li>ipsum mauris eu libero. Maecenas</li><li> quam neque, sagittis id convallis nec, fermentum id enim.</li><li> Nulla facilisi. Mauris at</li></ul>
  
 <p> eros et mi tempor vestibulum ac ac dolor. Cras sed commodo arcu, in aliquet justo. Nulla ut diam a magna viverra convallis a sit amet arcu. Etiam nec lorem laoreet elit blandit tempor. Integer ultricies ut nulla quis lobortis.</p>
  
  </div>
<div class="row">
   <h2>Headline</h2>
   <p> eros et mi tempor vestibulum ac ac dolor. Cras sed commodo arcu, in aliquet justo. Nulla ut diam a magna viverra convallis a sit amet arcu. Etiam nec lorem laoreet elit blandit tempor. Integer ultricies ut nulla quis lobortis.</p>
  
   <div class="calloutbox">
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
    
  </div>
  
   <p> eros et mi tempor vestibulum ac ac dolor. Cras sed commodo arcu, in aliquet justo. Nulla ut diam a magna viverra convallis a sit amet arcu. Etiam nec lorem laoreet elit blandit tempor. Integer ultricies ut nulla quis lobortis.</p>
   <p> eros et mi tempor vestibulum ac ac dolor. Cras sed commodo arcu, in aliquet justo. Nulla ut diam a magna viverra convallis a sit amet arcu. Etiam nec lorem laoreet elit blandit tempor. Integer ultricies ut nulla quis lobortis.</p>
 
     <p> eros et mi tempor vestibulum ac ac dolor. Cras sed commodo arcu, in aliquet justo. Nulla ut diam a magna viverra convallis a sit amet arcu. Etiam nec lorem laoreet elit blandit tempor. Integer ultricies ut nulla quis lobortis.</p>
     <p> eros et mi tempor vestibulum ac ac dolor. Cras sed commodo arcu, in aliquet justo. Nulla ut diam a magna viverra convallis a sit amet arcu. Etiam nec lorem laoreet elit blandit tempor. Integer ultricies ut nulla quis lobortis.</p>
  
  <div class="bottombox">eros et mi tempor vestibulum ac ac dolor. Cras sed commodo arcu, in aliquet justo. Nulla ut diam a magna viverra convallis a sit amet arcu. Etiam nec lorem laoreet elit blandit tempor. Integer ultricies ut nulla quis lobortis.</div>
  
  </div>
  </div>  
</body>
</html>

Open in new window

0
 
Dave BaldwinFixer of ProblemsCommented:
No attachment.
0
 
praz51Author Commented:
oops thanks please see attachement
0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

 
praz51Author Commented:
Please see attachment
Image.jpg
0
 
praz51Author Commented:
I've requested that this question be deleted for the following reason:

not letting me attach file
0
 
praz51Author Commented:
Not required to cancel any longer
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Here is a start  http://jsbin.com/tafocafe/1/edit

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container{width:600px;margin-left:auto;margin-right:auto;}
    img.right{float:right;}
    .calloutbox{
      border-style:solid;
      border-color:#6495ED;
      width:250px;
      float:right;
      padding:10px;
      margin-top:10px;
      margin-left:10px;
    
    }
  </style>
</head>
<body>
 <div class="container">
<div class="row">
  <h2>Headline</h2>
  <ul><img class="right" src="http://farm8.staticflickr.com/7336/8723473678_209ce69e3e_o.jpg" width="200">
    <li>Etiam auctor, leo quis dapibus  </li><li>commodo, eros magna imperdiet </li><li>nibh, non consequat </li><li>ipsum mauris eu libero. Maecenas</li><li> quam neque, sagittis id convallis nec, fermentum id enim.</li><li> Nulla facilisi. Mauris at</li></ul>
  
 <p> eros et mi tempor vestibulum ac ac dolor. Cras sed commodo arcu, in aliquet justo. Nulla ut diam a magna viverra convallis a sit amet arcu. Etiam nec lorem laoreet elit blandit tempor. Integer ultricies ut nulla quis lobortis.</p>
  
  </div>
<div class="row">
   <h2>Headline</h2>
   <p> eros et mi tempor vestibulum ac ac dolor. Cras sed commodo arcu, in aliquet justo. Nulla ut diam a magna viverra convallis a sit amet arcu. Etiam nec lorem laoreet elit blandit tempor. Integer ultricies ut nulla quis lobortis.</p>
  
   <div class="calloutbox">
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
    
  </div>
  
   <p> eros et mi tempor vestibulum ac ac dolor. Cras sed commodo arcu, in aliquet justo. Nulla ut diam a magna viverra convallis a sit amet arcu. Etiam nec lorem laoreet elit blandit tempor. Integer ultricies ut nulla quis lobortis.</p>
   <p> eros et mi tempor vestibulum ac ac dolor. Cras sed commodo arcu, in aliquet justo. Nulla ut diam a magna viverra convallis a sit amet arcu. Etiam nec lorem laoreet elit blandit tempor. Integer ultricies ut nulla quis lobortis.</p>
 
     <p> eros et mi tempor vestibulum ac ac dolor. Cras sed commodo arcu, in aliquet justo. Nulla ut diam a magna viverra convallis a sit amet arcu. Etiam nec lorem laoreet elit blandit tempor. Integer ultricies ut nulla quis lobortis.</p>
     <p> eros et mi tempor vestibulum ac ac dolor. Cras sed commodo arcu, in aliquet justo. Nulla ut diam a magna viverra convallis a sit amet arcu. Etiam nec lorem laoreet elit blandit tempor. Integer ultricies ut nulla quis lobortis.</p>
  </div>
  </div>  
</body>
</html>

Open in new window

0
 
praz51Author Commented:
thanks padas - would you use a another div for the bottom callout box as well cheers
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
http://jsbin.com/tafocafe/2/
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container{width:600px;margin-left:auto;margin-right:auto;border-style:solid;padding:10px;}
    img.right{float:right;}
    .calloutbox{
      border-style:solid;
      border-color:#6495ED;
      width:250px;
      float:right;
      padding:10px;
      margin-top:10px;
      margin-left:10px;
    
    }
    .bottombox{
      padding:10px;
      background-color:#CCFFFF ;
      font-style:oblique;
      font-size:90%;
      
    }
  </style>
</head>
<body>
 <div class="container">
<div class="row">
  <h2>Headline</h2>
  <ul><img class="right" src="http://farm8.staticflickr.com/7336/8723473678_209ce69e3e_o.jpg" width="200">
    <li>Etiam auctor, leo quis dapibus  </li><li>commodo, eros magna imperdiet </li><li>nibh, non consequat </li><li>ipsum mauris eu libero. Maecenas</li><li> quam neque, sagittis id convallis nec, fermentum id enim.</li><li> Nulla facilisi. Mauris at</li></ul>
  
 <p> eros et mi tempor vestibulum ac ac dolor. Cras sed commodo arcu, in aliquet justo. Nulla ut diam a magna viverra convallis a sit amet arcu. Etiam nec lorem laoreet elit blandit tempor. Integer ultricies ut nulla quis lobortis.</p>
  
  </div>
<div class="row">
   <h2>Headline</h2>
   <p> eros et mi tempor vestibulum ac ac dolor. Cras sed commodo arcu, in aliquet justo. Nulla ut diam a magna viverra convallis a sit amet arcu. Etiam nec lorem laoreet elit blandit tempor. Integer ultricies ut nulla quis lobortis.</p>
  
   <div class="calloutbox">
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
    
  </div>
  
   <p> eros et mi tempor vestibulum ac ac dolor. Cras sed commodo arcu, in aliquet justo. Nulla ut diam a magna viverra convallis a sit amet arcu. Etiam nec lorem laoreet elit blandit tempor. Integer ultricies ut nulla quis lobortis.</p>
   <p> eros et mi tempor vestibulum ac ac dolor. Cras sed commodo arcu, in aliquet justo. Nulla ut diam a magna viverra convallis a sit amet arcu. Etiam nec lorem laoreet elit blandit tempor. Integer ultricies ut nulla quis lobortis.</p>
 
     <p> eros et mi tempor vestibulum ac ac dolor. Cras sed commodo arcu, in aliquet justo. Nulla ut diam a magna viverra convallis a sit amet arcu. Etiam nec lorem laoreet elit blandit tempor. Integer ultricies ut nulla quis lobortis.</p>
     <p> eros et mi tempor vestibulum ac ac dolor. Cras sed commodo arcu, in aliquet justo. Nulla ut diam a magna viverra convallis a sit amet arcu. Etiam nec lorem laoreet elit blandit tempor. Integer ultricies ut nulla quis lobortis.</p>
  
  <div class="bottombox">eros et mi tempor vestibulum ac ac dolor. Cras sed commodo arcu, in aliquet justo. Nulla ut diam a magna viverra convallis a sit amet arcu. Etiam nec lorem laoreet elit blandit tempor. Integer ultricies ut nulla quis lobortis.</div>
  
  </div>
  </div>  
</body>
</html>

Open in new window

0
 
praz51Author Commented:
thanks whats the best way to put a background around the unordered list and image - would use a div then something along these lines .bottombox{
      padding:10px;
      background-color:#CCFFFF ;
      font-style:oblique;
      font-size:90%; cheers
0
 
praz51Author Commented:
Thanks Padas for sharing your insights
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.