Solved

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

Posted on 2014-02-27
11
274 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
  • 7
  • 3
11 Comments
 
LVL 83

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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 52

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 52

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 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 300 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Error on link 14 39
How to change pointer icon to hand icon on mouseover 2 19
CSS z-index issue 3 22
manage footer size 4 13
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

867 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now