Solved

how to design this template ?

Posted on 2014-03-24
3
178 Views
Last Modified: 2014-03-25
Hello expert,
i have an template but i need like below attached.
 below is my code
<html>
    <head>
        <style>
            *
            {
                margin: 0px;
                padding: 0px;
                border: none;
                font-family: Verdana, Helvetica, sans-serif;
            }

            a, a:link, a:visited, a:active, a:hover 
            {
                text-decoration: none;
            }        
        
            body
            {
                background-color: rgb(255,255,255);
                color: rgb(40,40,40);
                border-style:solid;
                border-width:1px;
            }
            
            table.email
            {
                width: 700px;
                height: 70%;
                border-collapse: collapse;
                border: 1px rgb(63,144,215) solid;
                background-color: rgb(255,255,255);
                position: absolute;
                top: 5px;
                left: 5px;
            }
            
            table.email td
            {
                padding: 2px 5px 2px 5px;  
                              
            }
            
           table.email td.body
            {
                border-left: 1px rgb(63,144,215) solid;
                font-size: 12px;
                vertical-align: top;
                padding-top: 10px;
                border-style:solid;
                border-width:1px;
            }        
            td.body ul
{
padding-left :30px;
}
td.body ol
{
padding-left :30px;
}
            table.email td.assignment
            {
                border-left: 1px rgb(63,144,215) solid;
                height: 30px;
                font-size: 12px;
                vertical-align: top;
                color: rgb(63,144,215);
            }    
           

         </style>
    </head>
    <body>
        <table class="emailshadow"><tr><td>&nbsp;</td></tr></table>
        <table class="email" cellspacing=0>
<table>
<tr>
<td><img src="https://idmsauth.corp.apple.com/IDMSWebAuth/images/App795/apple_logo.png" alt="Apple Logo" width="28" height="28"></td><td><h2>SGM</h2>
</td>
</tr>
</table>

   <table>    
            <tr>
                <td  class="body">:MDF_EMAIL_BODY</td>
            </tr>
             </table>
             </table>        
    </BODY>
</html>

Open in new window


but i need template which i attached .
Screen-Shot-2014-03-24-at-6.56.1.png
0
Comment
Question by:deve_thomos
[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
  • 2
3 Comments
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 39950438
Your logo path is pointing to a resource not visible out here.

Here is a sample of how to markup the template.

I did not use your code as it was based on tables - you should avoid using tables for layout.
<!doctype html>
<html>
<head>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #f2f2f2;
  font-family: Arial;
  font-size: 12px;
}
#email {
  margin: 0 auto;
  width: 50%;
}
#email img {
  width: 30px;`
}
#email-body {
  border: 1px solid #000;
  border-radius: 10px;
  background-color: #fff;
  padding: 20px;
}
h2 {
  background: url(https://www.apple.com/voiceover/info/images/apple_icon_larger.jpg) no-repeat 0 0;
  line-height: 30px;
  padding-left: 35px;
  background-size: 30px 30px;
  margin-bottom: 15px;
  font-size: 18px;
}
</style>
</head>
<body>
  <div id="email">
    <h2>SGM</h2>
    <div id="email-body">
      <p>Dear Team,</p>
      <p>This is to inform you that SIS Inbound Job Failed for Batch - 888</p>
      <p>Error message: Abcedef Abcedef Abcedef Abcedef Abcedef Abcedef Abcedef</p>
      <p>Please check the Audit Trail Report - Inbound Facility for more information.</p>
      <p>Thank you</p>
    </div>
  </div>
</body>
</html>

Open in new window

0
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39950447
More simplified http://jsbin.com/worewuze/1/edit?html,output

<!DOCTYPE html>
<html>
<head>
      <style>
            *
            {
                margin: 0px;
                padding: 0px;
                border: none;
                font-family: Verdana, Helvetica, sans-serif;
            }

            a, a:link, a:visited, a:active, a:hover 
            {
                text-decoration: none;
            }        
        
            table.email
            {
                border: 1px #ccc solid;
                font-size: 12px;
                vertical-align: top;
                padding:10px;
                 
              
            }    
           
   .sgm{font-size:30px;}
         </style>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<img src="https://idmsauth.corp.apple.com/IDMSWebAuth/images/App795/apple_logo.png" alt="Apple Logo" width="28" height="28">
  <span class="sgm">SGM</span>


<table class="email">    
   <tr>
     <td  class="body">
       <p>This is a lineThis is a line This is a line</p>
       <p>This is a line This is a lineThis is a lineThis is a line</p>
       <p>This is a line This is a line</p>
     </td>
    </tr>
</table>
               

</body>

Open in new window

0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39950452
I kept the table because it looks like this is for an email.  It is probably a good idea to convert the css to inline if this is for an email.   But no need for nested tables.
0

Featured Post

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.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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 add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

689 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