Advertisement
PayneLess_Designs

PayneLess Designs - Image With Text Examples

Jul 4th, 2012
104
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.36 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
  3. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  4. <title>Image With Text Examples</title>
  5. <meta name="description" content="" />
  6. <meta name="keywords" content="" />
  7. <meta name="author" content="" />
  8. <style type="text/css">
  9. * { margin: 0; padding: 0; margin: 0; }
  10. body {
  11. width: 800px;
  12. margin: 0 auto;
  13. border: 1em inset #f00;
  14. }
  15.  
  16. h1, h3 {
  17. text-align: center;
  18. }
  19. </style>
  20. </head><body>
  21. <h1>Image With Text Examples</h1>
  22.  
  23. <h3>Example One:</h3>
  24. <div style="width: 50%; margin: 0 auto; padding: 5px; background: #000;"><img style="display: block; float: left; margin-right: 10px; width: 107px; height: 85px; border: 0;" src="http://img11.imageshack.us/img11/7775/rabbity.jpg" alt="" /><span style="display: block; font-family: verdana; font-size: 1em; text-align: justify; color: #f0f;">Your text here...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut lectus in risus fringilla mollis id eu neque. Etiam felis eros, congue scelerisque tempor at, rutrum ut ante. Nunc pretium vulputate sapien, in convallis magna blandit non. Ut ultricies ligula id massa dapibus eu luctus est ullamcorper. Nullam fringilla magna sed orci feugiat in volutpat est euismod. Praesent eu tellus vitae ligula facilisis faucibus id sit amet quam. Quisque vel nunc nulla, quis porttitor tortor. Nullam a odio eu justo dignissim sagittis. Sed quis ligula metus. Mauris vestibulum luctus ante ut ullamcorper. Etiam cursus tortor eu sapien tincidunt scelerisque. Maecenas quis metus in turpis iaculis rhoncus. Suspendisse vitae tortor enim, eget ornare tellus. Ut libero arcu, suscipit a posuere eu, accumsan eu quam. Aenean commodo fringilla ipsum, id hendrerit dui pretium at. Quisque lobortis dictum enim in ultricies.</span></div>
  25.  
  26. <h3>Example Two:</h3>
  27. <div style="width: 50%; margin: 0 auto; padding: 10px; background: #000;"><img style="display: block; float: right; margin-left: 5px; width: 121px; height: 197px; border: 0;" src="http://img26.imageshack.us/img26/7718/ya1withhair.jpg" alt="" /><span style="font-family: verdana; font-size: 1em; text-align: justify; color: #f0f;">Your text here...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut lectus in risus fringilla mollis id eu neque. Etiam felis eros, congue scelerisque tempor at, rutrum ut ante. Nunc pretium vulputate sapien, in convallis magna blandit non. Ut ultricies ligula id massa dapibus eu luctus est ullamcorper. Nullam fringilla magna sed orci feugiat in volutpat est euismod. Praesent eu tellus vitae ligula facilisis faucibus id sit amet quam. Quisque vel nunc nulla, quis porttitor tortor. Nullam a odio eu justo dignissim sagittis. Sed quis ligula metus. Mauris vestibulum luctus ante ut ullamcorper. Etiam cursus tortor eu sapien tincidunt scelerisque. Maecenas quis metus in turpis iaculis rhoncus. Suspendisse vitae tortor enim, eget ornare tellus. Ut libero arcu, suscipit a posuere eu, accumsan eu quam. Aenean commodo fringilla ipsum, id hendrerit dui pretium at. Quisque lobortis dictum enim in ultricies.</span></div>
  28.  
  29. <h3>Example Three:</h3>
  30. <div style="width: 50%; margin: 0 auto; padding: 10px; background: #777;"><img style="display: block; width: 278px; height: 41px; margin: 0 auto; border: 0;" src="http://img718.imageshack.us/img718/2625/myfayt03both.png" alt="" /><span style="font-family: verdana; font-size: 1em; text-align: justify; color: #fff;">Your text here...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut lectus in risus fringilla mollis id eu neque. Etiam felis eros, congue scelerisque tempor at, rutrum ut ante. Nunc pretium vulputate sapien, in convallis magna blandit non. Ut ultricies ligula id massa dapibus eu luctus est ullamcorper. Nullam fringilla magna sed orci feugiat in volutpat est euismod. Praesent eu tellus vitae ligula facilisis faucibus id sit amet quam. Quisque vel nunc nulla, quis porttitor tortor. Nullam a odio eu justo dignissim sagittis. Sed quis ligula metus. Mauris vestibulum luctus ante ut ullamcorper. Etiam cursus tortor eu sapien tincidunt scelerisque. Maecenas quis metus in turpis iaculis rhoncus. Suspendisse vitae tortor enim, eget ornare tellus. Ut libero arcu, suscipit a posuere eu, accumsan eu quam. Aenean commodo fringilla ipsum, id hendrerit dui pretium at. Quisque lobortis dictum enim in ultricies.</span></div>
  31.  
  32. <h3>Example Four:</h3>
  33. <div style="width: 50%; margin: 0 auto; padding: 10px; background: #000;"><span style="font-family: verdana; font-size: 1em; text-align: justify; color: #f0f;">Your text here...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut lectus in risus fringilla mollis id eu neque. Etiam felis eros, congue scelerisque tempor at, rutrum ut ante. Nunc pretium vulputate sapien, in convallis magna blandit non. Ut ultricies ligula id massa dapibus eu luctus est ullamcorper. Nullam fringilla magna sed orci feugiat in volutpat est euismod. Praesent eu tellus vitae ligula facilisis faucibus id sit amet quam. Quisque vel nunc nulla, quis porttitor tortor. Nullam a odio eu justo dignissim sagittis. Sed quis ligula metus. Mauris vestibulum luctus ante ut ullamcorper. Etiam cursus tortor eu sapien tincidunt scelerisque. Maecenas quis metus in turpis iaculis rhoncus. Suspendisse vitae tortor enim, eget ornare tellus. Ut libero arcu, suscipit a posuere eu, accumsan eu quam. Aenean commodo fringilla ipsum, id hendrerit dui pretium at. Quisque lobortis dictum enim in ultricies.</span><img style="display: block; width: 294px; height: 126px; margin: 0 auto; border: 0;;" src="http://img38.imageshack.us/img38/9520/mercyy.png" alt="" /></div>
  34.  
  35. <h3>Example Five:</h3>
  36. <div style="width: 500px; height: 500px; margin: 0 auto; padding: 1%; background: #0af;">
  37. <img style="display: block; float: left; width: 166px; height: 164px; border: 0;" src="http://img98.imageshack.us/img98/189/mathplot.png" alt="" /><div style="width: 50%; float: right; padding: 10px; background: #000;"><span style="font-family: verdana; font-size: 1em; text-align: justify; color: #f0f;">Your text here...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut lectus in risus fringilla mollis id eu neque. Etiam felis eros, congue scelerisque tempor at, rutrum ut ante. Nunc pretium vulputate sapien, in convallis magna blandit non. Ut ultricies ligula id massa dapibus eu luctus est ullamcorper. Nullam fringilla magna sed orci feugiat in volutpat est euismod. Praesent eu tellus vitae ligula facilisis faucibus id sit amet quam. Quisque vel nunc nulla, quis porttitor tortor. Nullam a odio eu justo dignissim sagittis. Sed quis ligula metus. Mauris vestibulum luctus ante ut ullamcorper. Etiam cursus tortor eu sapien tincidunt scelerisque. Maecenas quis metus in turpis iaculis rhoncus. Suspendisse vitae tortor enim, eget ornare tellus. Ut libero arcu, suscipit a posuere eu, accumsan eu quam. Aenean commodo fringilla ipsum, id hendrerit dui pretium at. Quisque lobortis dictum enim in ultricies.</span></div>
  38. </div>
  39.  
  40. <h3>Example Six:</h3>
  41. <div style="width: 500px; height: 500px; margin: 0 auto; padding: 1%; background: #666; overflow: auto;">
  42. <img style="display: block; float: right; width: 166px; height: 164px; border: 0;" src="http://img98.imageshack.us/img98/189/mathplot.png" alt="" /><div style="width: 50%; float: left; padding: 10px; background: #000;"><span style="font-family: verdana; font-size: 1em; text-align: justify; color: #f0f;">Your text here...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut lectus in risus fringilla mollis id eu neque. Etiam felis eros, congue scelerisque tempor at, rutrum ut ante. Nunc pretium vulputate sapien, in convallis magna blandit non. Ut ultricies ligula id massa dapibus eu luctus est ullamcorper. Nullam fringilla magna sed orci feugiat in volutpat est euismod. Praesent eu tellus vitae ligula facilisis faucibus id sit amet quam. Quisque vel nunc nulla, quis porttitor tortor. Nullam a odio eu justo dignissim sagittis. Sed quis ligula metus. Mauris vestibulum luctus ante ut ullamcorper. Etiam cursus tortor eu sapien tincidunt scelerisque. Maecenas quis metus in turpis iaculis rhoncus. Suspendisse vitae tortor enim, eget ornare tellus. Ut libero arcu, suscipit a posuere eu, accumsan eu quam. Aenean commodo fringilla ipsum, id hendrerit dui pretium at. Quisque lobortis dictum enim in ultricies.</span></div>
  43. </div>
  44.  
  45. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement