How to make a DIV with image borders

  • Drake
  • Beginner
  • Beginner
  • User avatar
  • Posts: 47
  • Loc: Canada

Post 3+ Months Ago

Is it possible to make a DIV that, regardless of dimensions, always has a "border" around it consisting of images?

Like say I want to make a DIV appear framed, and have 4 images:

- top frame
- bottom frame
- left frame
- right frame

Is there a way to make each one act as a background image, and float to its appropriate corner? Or some other solution to this problem?

The images will be of a nature where the length of the sides of the given DIV won't matter, so no worries there.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

This can be done with a little bit of extraneous markup. The following is my solution to rounded corners, but I think you can apply similar strategies.

http://www.myirmo.com/stretchDiv/

Code: [ Select ]
<!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>Stretchy DIV</title>
<style>
div{margin:0;padding:0;}
p{margin:0;padding:15px;}
h1{margin:0;padding:15px;}</style>
</head>

<body>
<div style="width:50%;margin:0 auto;">
<div style="height:10px;background:url(top-rail.gif) no-repeat;overflow:hidden;">
    <div style="float:right;height:10px;width:10px;background:url(top-cap.gif) no-repeat;"></div></div>
<div style="border-left:1px solid #000;border-right:1px solid #000;clear:both;">
    <h1>Now is the time for all good men to come to the aid of their country.</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna. Sed vel purus. Nunc interdum pharetra ligula. Phasellus at justo nec arcu ultricies blandit. Fusce elementum nisl id nisi. In hac habitasse platea dictumst. Nulla id tortor. Cras vitae neque id elit facilisis pretium. Sed a lacus. Aliquam sapien nibh, pharetra et, faucibus quis, blandit ac, libero.</p>
    <p>Fusce placerat erat at dui. Aenean facilisis, ipsum eget ullamcorper ultricies, justo nisl ultricies risus, at gravida orci nulla quis mi. Nunc iaculis nisi euismod urna. Ut non eros in nisl imperdiet ornare. Quisque hendrerit tortor ac quam. Maecenas in velit. Aliquam id enim a sem porttitor posuere. Sed id purus. In mauris. Vestibulum dui nunc, convallis nec, venenatis ut, dignissim sit amet, leo. Suspendisse in nunc in orci molestie blandit. Suspendisse fermentum quam sed lorem. Suspendisse tincidunt, lorem at vestibulum eleifend, nisi quam gravida leo, in molestie arcu nisi quis neque. Donec a dolor. Sed justo dolor, ornare sed, tempus sit amet, tristique at, lectus. Nulla hendrerit vehicula erat. Duis venenatis cursus enim. Vivamus sodales neque eget erat. Duis sed orci quis orci consequat gravida. Nullam tempor, quam vel fringilla rhoncus, erat est eleifend nibh, vitae varius purus erat a mauris.</p>
    <p>Curabitur dui lectus, gravida sed, tincidunt et, elementum a, felis. Donec leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus pellentesque tincidunt leo. Etiam sed velit. Aenean ligula. Curabitur magna turpis, fermentum ut, imperdiet nec, accumsan id, ligula. Proin et nunc. Fusce vel felis eget nisl porta sodales. Integer sed ante id justo porta imperdiet. Nam placerat ligula non sem. Donec nunc enim, faucibus quis, porttitor et, dictum a, neque. Curabitur interdum felis id nisi. Aliquam eleifend auctor purus. Duis quis nisi. Mauris ac sapien vitae augue tempor vulputate. Mauris accumsan erat vitae lectus. Mauris hendrerit consequat nibh. Donec congue. Aliquam dolor. </p></div>
<div style="height:10px;background:url(bot-rail.gif) no-repeat;">
    <div style="float:right;height:10px;width:10px;background:url(bot-cap.gif) no-repeat;overflow:hidden;"></div></div></div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Stretchy DIV</title>
  6. <style>
  7. div{margin:0;padding:0;}
  8. p{margin:0;padding:15px;}
  9. h1{margin:0;padding:15px;}</style>
  10. </head>
  11. <body>
  12. <div style="width:50%;margin:0 auto;">
  13. <div style="height:10px;background:url(top-rail.gif) no-repeat;overflow:hidden;">
  14.     <div style="float:right;height:10px;width:10px;background:url(top-cap.gif) no-repeat;"></div></div>
  15. <div style="border-left:1px solid #000;border-right:1px solid #000;clear:both;">
  16.     <h1>Now is the time for all good men to come to the aid of their country.</h1>
  17.     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna. Sed vel purus. Nunc interdum pharetra ligula. Phasellus at justo nec arcu ultricies blandit. Fusce elementum nisl id nisi. In hac habitasse platea dictumst. Nulla id tortor. Cras vitae neque id elit facilisis pretium. Sed a lacus. Aliquam sapien nibh, pharetra et, faucibus quis, blandit ac, libero.</p>
  18.     <p>Fusce placerat erat at dui. Aenean facilisis, ipsum eget ullamcorper ultricies, justo nisl ultricies risus, at gravida orci nulla quis mi. Nunc iaculis nisi euismod urna. Ut non eros in nisl imperdiet ornare. Quisque hendrerit tortor ac quam. Maecenas in velit. Aliquam id enim a sem porttitor posuere. Sed id purus. In mauris. Vestibulum dui nunc, convallis nec, venenatis ut, dignissim sit amet, leo. Suspendisse in nunc in orci molestie blandit. Suspendisse fermentum quam sed lorem. Suspendisse tincidunt, lorem at vestibulum eleifend, nisi quam gravida leo, in molestie arcu nisi quis neque. Donec a dolor. Sed justo dolor, ornare sed, tempus sit amet, tristique at, lectus. Nulla hendrerit vehicula erat. Duis venenatis cursus enim. Vivamus sodales neque eget erat. Duis sed orci quis orci consequat gravida. Nullam tempor, quam vel fringilla rhoncus, erat est eleifend nibh, vitae varius purus erat a mauris.</p>
  19.     <p>Curabitur dui lectus, gravida sed, tincidunt et, elementum a, felis. Donec leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus pellentesque tincidunt leo. Etiam sed velit. Aenean ligula. Curabitur magna turpis, fermentum ut, imperdiet nec, accumsan id, ligula. Proin et nunc. Fusce vel felis eget nisl porta sodales. Integer sed ante id justo porta imperdiet. Nam placerat ligula non sem. Donec nunc enim, faucibus quis, porttitor et, dictum a, neque. Curabitur interdum felis id nisi. Aliquam eleifend auctor purus. Duis quis nisi. Mauris ac sapien vitae augue tempor vulputate. Mauris accumsan erat vitae lectus. Mauris hendrerit consequat nibh. Donec congue. Aliquam dolor. </p></div>
  20. <div style="height:10px;background:url(bot-rail.gif) no-repeat;">
  21.     <div style="float:right;height:10px;width:10px;background:url(bot-cap.gif) no-repeat;overflow:hidden;"></div></div></div>
  22. </body>
  23. </html>

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 46 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.