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

praz51
praz51 used Ask the Experts™
on
Hi

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

Many Thanks Praz
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
No attachment.

Author

Commented:
oops thanks please see attachement

Author

Commented:
Please see attachment
Image.jpg
Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
I've requested that this question be deleted for the following reason:

not letting me attach file

Author

Commented:
Not required to cancel any longer
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

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

Author

Commented:
thanks padas - would you use a another div for the bottom callout box as well cheers
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

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

Author

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
Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
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

Author

Commented:
Thanks Padas for sharing your insights

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial