[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

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

Posted on 2014-02-27
11
Medium Priority
?
285 Views
Last Modified: 2014-02-28
Hi

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

Many Thanks Praz
0
Comment
Question by:praz51
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 3
11 Comments
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 39892996
No attachment.
0
 

Author Comment

by:praz51
ID: 39893001
oops thanks please see attachement
0
 

Author Comment

by:praz51
ID: 39893029
Please see attachment
Image.jpg
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:praz51
ID: 39893403
I've requested that this question be deleted for the following reason:

not letting me attach file
0
 

Author Comment

by:praz51
ID: 39893404
Not required to cancel any longer
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39893572
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
 

Author Comment

by:praz51
ID: 39893676
thanks padas - would you use a another div for the bottom callout box as well cheers
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39893702
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
 

Author Comment

by:praz51
ID: 39894275
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
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 1200 total points
ID: 39894501
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
 

Author Closing Comment

by:praz51
ID: 39894759
Thanks Padas for sharing your insights
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

649 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question