Solved

how to design this template ?

Posted on 2014-03-24
3
174 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
  • 2
3 Comments
 
LVL 54

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 52

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 52

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

NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Problem with a CSS in a page 2 31
Alignment is not working correctly. 8 38
css icomoons will not display on page 14 31
Testing Responsiveness for Different Devices 4 29
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

777 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