Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Apr 28th, 2012  |  syntax: None  |  size: 2.39 KB  |  hits: 12  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. Image and text in one container
  2. div.imagecaption{float: left;
  3.              width: 302px;
  4.              margin: 0 1em 1em 1em;
  5.              display: inline;
  6.              padding:
  7.              background: #036;
  8.              color: #fff;
  9.              }
  10.  
  11. div.imagecaption img{float: left;
  12.                  margin-left: 1em;
  13.                  border: 1px solid #fff;}
  14.  
  15. <div class="imagecaption">
  16. <img src>
  17. </div>
  18.  
  19. <p>
  20. TEXTTEXTTEXTTEXTTEXTTEXT</br>
  21. TEXTTEXTTEXTTEXTTEXTTEXT</br>
  22. TEXTTEXTTEXTTEXTTEXTTEXT</br>
  23. </p>
  24.        
  25. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  26. <html xmlns="http://www.w3.org/1999/xhtml">
  27. <head>
  28. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  29. <style type="text/css">
  30.  .mybutton a
  31. {
  32.     display:block;
  33.     line-height:60%;
  34.     text-decoration:none;
  35.     border:0px solid;
  36.     font:Verdana, Geneva, sans-serif;
  37.     font-weight:bold;
  38.     font-size:12px;
  39.     float:left;
  40.     background-color:#f5f5f5;
  41.     cursor:pointer;
  42.     color:#000;
  43.     border:1px solid #dedede;
  44.     border-top:1px solid #eee;
  45.     border-left:1px solid #eee;
  46. }
  47.  
  48. .mybutton a img
  49. {
  50.     width:45px;
  51.     height:45px;
  52.     margin:5px 0px 5px 0 ;
  53.     padding:0px 15px 0px 15px;
  54.     border:none;
  55. }
  56. .mybutton a span
  57. {
  58.     position:relative;
  59.     bottom:3px;
  60.     margin:5px 0px 0px 0px;
  61.     padding-left:10px;
  62. }
  63. .mybutton a.myimg{
  64.     color:#000;
  65. }
  66. .mybutton a.myimg:hover
  67. {
  68.     background-color:#E6EFC2;
  69.     border:1px solid #C6D880;
  70.     color:#529214;
  71. }
  72. .mybutton a.myimg:active{
  73.     background-color:#529214;
  74.     border:1px solid #529214;
  75.     color:#fff;
  76. }
  77. </style>
  78. </head>
  79. <body>
  80.  
  81.     <div class="mybutton">
  82.         <a href="#" class="myimg">
  83.             <img src="card.jpg" alt=""  align="top"/><br/>
  84.         <span style="padding-left:10px;" >My Button</span>
  85.       </a>
  86. </div>
  87. </body>
  88. </html>
  89.        
  90. <style>
  91.     div.imagecaption{
  92.         float: left;
  93.      width: 302px;
  94.      margin: 0 1em 1em 1em;
  95.      display:block;
  96.      padding:2px;
  97.      background: #036;
  98.      color: #fff;
  99.   }
  100.  
  101. div.imagecaption img{
  102.     float: left;
  103.     border: 1px solid #fff;
  104. }
  105. div.imagecaption p {
  106.     float: right;
  107.     margin-right: 8px;
  108.     width: 180px;
  109.     word-wrap: break-word;
  110. }
  111. </style>
  112. <div class="imagecaption">
  113.     <img src="images/logo_ws2011.png">
  114.     <p>
  115.         TEXTTEXTTEXTTEXTTEXTTEXT</br>
  116.         TEXTTEXTTEXTTEXTTEXTTEXT</br>
  117.         TEXTTEXTTEXTTEXTTEXTTEXT</br>
  118.     </p>
  119. </div>
create a new version of this paste RAW Paste Data