?
Solved

how to design this template ?

Posted on 2014-03-24
3
Medium Priority
?
182 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 58

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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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 position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses
Course of the Month11 days, 7 hours left to enroll

752 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