[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 198
  • Last Modified:

how to design this template ?

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
deve_thomos
Asked:
deve_thomos
  • 2
1 Solution
 
Julian HansenCommented:
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
 
Scott Fell, EE MVEDeveloperCommented:
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
 
Scott Fell, EE MVEDeveloperCommented:
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.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now