Register now and start sharing your code snippets.
-->

How to make rounded buttons with the button element

HTML posted 5 months ago by christian

25 pixel high buttons at your service:

   1  button { 
   2  	border: 0; 
   3  	padding: 0;
   4  	font-variant: small-caps;
   5  	height:25px;
   6  	background: transparent url('../images/button-background-left.png') no-repeat;
   7  	cursor: pointer;
   8  	text-align: center; 
   9  }
  10  
  11  button span { 
  12  	font-family: georgia,serif;
  13  	line-height: 25px;
  14  	background: transparent url('../images/button-background.png') no-repeat top right;
  15  	position:relative; 
  16  	display:block; 
  17  	white-space:nowrap; 
  18  	margin-top: -2px;
  19  	padding:0 15px; 
  20  }

HTML :

   1  <button type="submit" value="Hello"><span>Hello&nbsp;&raquo;</span></button>

IE 6 & 7 might need:

   1  button { 
   2    width:auto; 
   3    overflow:visible; 
   4  }
   5  button span { 
   6    margin-top:1px; 
   7  }

References

  • http://www.filamentgroup.com/lab/styling_the_button_element_with_sliding_doors/
  • http://particletree.com/features/rediscovering-the-button-element/
Tagged button, element, css, html, rounded

How to send both HTML and text emails with PHP and PHPMailer

PHP posted 10 months ago by christian

This is an example on how to use PHPMailer to send an HTML email. It also shows how to include a text only version of the same email for clients, such as mutt, that don’t support HTML emails.

   1  $mail = new PHPMailer();
   2  
   3  $mail->IsHTML(true);
   4  $mail->CharSet = "text/html; charset=UTF-8;";
   5  $mail->IsSMTP();
   6  
   7  $mail->WordWrap = 80;
   8  $mail->Host = "smtp.thehost.com"; 
   9  $mail->SMTPAuth = false;
  10  
  11  $mail->From = $from;
  12  $mail->FromName = $from; // First name, last name
  13  $mail->AddAddress($to, "First name last name");
  14  #$mail->AddReplyTo("reply@thehost.com", "Reply to address");
  15  
  16  $mail->Subject =  $subject;
  17  $mail->Body =  $htmlMessage; 
  18  $mail->AltBody  =  $textMessage;    # This automatically sets the email to multipart/alternative. This body can be read by mail clients that do not have HTML email capability such as mutt.
  19  
  20  if(!$mail->Send())
  21  {
  22    throw new Exception("Mailer Error: " . $mail->ErrorInfo);
  23  }

Tagged send, email, smtp, php, phpmailer, html

How to create a mixed 2 to 3 column layout with footer and header

HTML posted about 1 year ago by christian

This is a draft, and an experiment with composing to a vertical flow and the golden ratio

   1  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   2    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   3  <html>
   4  <head>
   5  <title>3 column</title>
   6  <style type="text/css">
   7  
   8  /** Reset styles */
   9  body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td {
  10    margin:0;
  11    padding:0;
  12  } 
  13  
  14  /** 3 column layout */
  15  
  16  #container{
  17    background-color:#9cc;
  18    width: 69em;
  19    margin: 0 auto;
  20  }
  21  
  22  #content{
  23    float: left;
  24    width: 41em;
  25  }
  26  
  27  #sidebar{
  28    float: right;
  29    width: 23em;
  30  }
  31  
  32  #column1{
  33    float: left;
  34    width:23em;
  35  }
  36  
  37  #column2{
  38    float: left;
  39    width:23em;
  40  }
  41  
  42  #column3{
  43    float: left;
  44    width:23em;
  45  }
  46  
  47  
  48  /* Vertical flow */
  49  
  50  body {
  51    font-size: 75%;
  52  }
  53    
  54  html>body {
  55    font-size: 14px;
  56  }
  57    
  58  p {
  59    line-height 1.5em;
  60  }
  61  
  62  
  63  /* Temp styles */
  64  #column1, #column2, #column3, #content, #sidebar {
  65  #  background: blue;
  66    #  border: 1px solid black;
  67  }
  68  
  69  /** */
  70  body{
  71    font-family: Palatino,"Palatino Linotype",Georgia,serif;
  72  }
  73  
  74  </style>
  75  </head>
  76  <body>
  77  
  78    <div id="header">
  79      <div id="container">
  80        <div id="column1">Header 1</div>
  81        <div id="column2">Header 2</div>
  82        <div id="column3">Header 3</div>
  83      </div>
  84    </div>
  85  
  86    <div id="container">
  87      <div id="content">Content</div>
  88      <div id="sidebar">Sidebar</div>
  89    </div>
  90  
  91    <div id="footer">
  92      <div id="container">
  93        <div id="column1">Footer 1</div>
  94        <div id="column2">Footer 2</div>
  95        <div id="column3">Footer 3</div>
  96      </div>
  97    </div>
  98  
  99  </body>
 100  </html>

Tagged golden ratio, vertical flow, design, css, html