Jump to content

happycodings

Members
  • Posts

    7
  • Joined

  • Last visited

Posts posted by happycodings

  1. Align the form controls with table<?xml version="1.0" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>  <title>Align the form controls with table</title></head><body><h2>Reply to seller</h2><p>Use the following form to respond to seller:</p><form action="" method="post" name="frmRespond"><table>  <tr>    <td><label for="emailTo">To</label></td>    <td><input type="text" name="txtTo" readonly="readonly" id="emailTo" size="25" value="Phone seller" /></td>  </tr>  <tr>    <td><label for="emailFrom">To</label></td>    <td><input type="text" name="txtFrom" id="emailFrom" size="25"  /></td>  </tr>  <tr>    <td><label for="emailSubject">Subject</label></td>    <td><input type="text" name="txtSubject" id="emailSubject"  size="60"  /></td>  </tr>  <tr>    <td><label for="emailBody">Body</label></td>    <td><textarea name="txtBody" id="emailBody"  cols="60" rows="12"> </textarea></td>  </tr></table><input type="submit" value="Send email" /></form></body></html>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"  xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Anchor background-image</title><style rel="stylesheet" type="text/css">#meta {  display: block;  float: right;  padding: 20px 0 0 0;}#meta li {  display: block;  float: left;  padding: 0 20px 0 0;}#meta a {  display: block;  float: left;  font-family: Courier New;  font-size: 12px;  color: pink;  text-decoration: none;  padding: 0 0 0 13px;  background-position: 0px 2px;  background-repeat: no-repeat;}.meta1 {  background-image: url(images/background-image1.gif)}.meta2 {  background-image: url(images/background-image2.gif)}.meta3 {  background-image: url(images/background-image3.gif)}</style></head><body>  <div>    <ul id="meta">      <li><a href="www.example.com" class="meta1">Home</a></li>      <li><a href="Resources.html" class="meta2">Resources</a></li>      <li><a href="Contacts.html" class="meta3">Contacts</a></li>    </ul>    <div id="search">      <input type="text" class="search" />      <input type="button" value="Search" class="search" />    </div>  </div></body></html>
  3. Css table

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Css Table</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css">* { margin: 0; padding: 0}.container { background-color: #998FCC; width: 800px; border: 1px solid gray;}* html .container { width: 820px;}.header { width: 800px; border-bottom: 1px solid blue;}.header ul { list-style: none}.header ul li { width: 160px; border-left: 1px solid red; float: left; font-weight: bold; padding-left: 2px;}* html .header ul li { width: 180px;}.data { width: 180px; float: left; padding-left: 2px;}* html .data { width: 182px;}.rowodd,.roweven { position: relative; width: 800px; border-top: 1px solid #000; background-color: pink;}.roweven { background-color: #f79455;}.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}.clearfix { display: inline-block;}</style></head><body><div class="container clearfix"> <div class="header clearfix"> <ul> <li>Column 1</li> <li>Column 2</li> <li>Column 3</li> <li>Column 4</li> <li>Column 5</li> </ul></div> <div class="rowodd clearfix"> <div class="data"> <p>Company 1</p> <p>happycodings1</p> <p>happycodings2</p> <p>happycodings3</p> <p>happycodings4</p> </div> <div class="data"><p>paragraph</p></div> <div class="data"><p>paragraph</p></div> <div class="data"><p>paragraph</p></div> <div class="data"><p>paragraph</p></div> </div> <div class="roweven clearfix"> <div class="data"> <p>Company 1</p> <p>code example</p> <p>code example</p> <p>code example</p> <p>code example</p> </div> <div class="data"><p>java</p></div> <div class="data"><p>php</p></div> <div class="data"><p>android</p></div> <div class="data"><p>c++</p></div> </div> <div class="rowodd clearfix"> <div class="data"> <p>Company 1</p> <p>happy</p> <p>happy</p> <p>happy</p> <p>happy</p> </div> <div class="data"><p>codes</p></div> <div class="data"><p>codes</p></div> <div class="data"><p>codes</p></div> <div class="data"><p>codes</p></div> </div></div></body></html>

  4. Background attachment

     

    <html><head><title>Background Attachment</title></head><body><div style="background:blue url(http://www.lovelylovesayings.com/images/A-Red-Rose.jpg) repeat top left; width:1000; border:3; height:450; font-size:16"> To fall in love is to create a religion that has a fallible god.<br><br> Jorge Luis Borges </div> <br><br><br><br><div style="background-color:pink; background-attachment:fixed; background-image:url(http://www.lovelylovesayings.com/images/A-Red-Rose.jpg); background-repeat:repeat; background-position-x:top; background-position-y:left; width:1000; border:3; height:450; font-size:16"> background-attachment is fixed.<br><br> My love, you know you are my best friend.<br> You know that I'd do anything for you<br> And my love, let nothing come between us.<br> My love for you is strong and true.<br><br> Sarah McLachlan </div></body></html>

  5. <?xml version="1.0" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head> <title>Unordered Lists</title></head><body><p>nested ordered list example:</p><ol type="I"> <li>apple</li> <li>pear</li> <li>pomegranate</li> <li> <ol type="a"> <li>watermelon</li> <li>banana</li> <li>cherry</li> </ol> </li> <li>mulberry</li></ol></body></html>

  6. Iframe style

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="content-type" content="text/html; charset=utf-8" />    <title>Iframe Style</title><style type="text/css" title="text/css">#iframewrapper {    width: 400px;    border: solid 8px pink;}#bordered {    width: 400px;    height: 400px;}iframe {    width: 400px;    height: 400px;}</style></head><body>    <div id="iframewrapper">        <iframe src="http://www.example.com" scrolling="auto" name="news" frameborder="0" id="news">    Your browser doesn't support iframes. Please                          <a href="http://www.example.com">click here</a>        </iframe>    </div></body></html>
  7. Iframe application element

    <html><title>Iframe Application Element</title><body><iframe application="yes" src="happy.gif" style="width:50%;"></iframe><iframe application="no" src="happy.gif"  style="width: 50%;"></iframe></body></html>
×
×
  • Create New...