Solved

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

Posted on 2014-02-27
11
276 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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 

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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
VBScript on Html 15 47
.htaccess css/images no longer loading 4 39
Wordpress Hacked 1 44
CSS Style Effect 2 10
This article discusses how to create an extensible mechanism for linked drop downs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

830 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