webdesigner25 Posted February 21, 2010 Share Posted February 21, 2010 let's say i got 4 png of 4 round corners, and want to play them in corners of a big div wrapper, also the width of and height of the wrapper is not specifiedhow do i place the corners in css? thx in advance Link to comment Share on other sites More sharing options...
webdesigner25 Posted February 21, 2010 Author Share Posted February 21, 2010 let's say i got 4 png of 4 round corners, and want to play them in corners of a big div wrapper, how do i do that? thx in advance Link to comment Share on other sites More sharing options...
jeffman Posted February 21, 2010 Share Posted February 21, 2010 Here's one way. It probably doesn't work in IE6, though. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } #wrapper { /* important */ position: relative; /* cosmetic */ width: 900px; height: 400px; background-color: #ddd; margin: 40px auto; } /* ALL important */ #wrapper p { position: absolute; } img.corner { position: absolute; } img.t { top: 0; } img.b { bottom: 0; } img.r { right: 0; } img.l { left: 0; } </style> </head> <body> <div id="wrapper"> <img class="t r corner" src="trcorner.jpg"> <img class="b r corner" src="brcorner.jpg"> <img class="b l corner" src="blcorner.jpg"> <img class="t l corner" src="tlcorner.jpg"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at justo ultrices magna faucibus sagittis. Aliquam eu velit elit, eu lobortis odio. Fusce in leo quis mauris facilisis faucibus. Integer aliquet felis ut sapien gravida ut dictum tellus tincidunt. Integer leo sapien, fermentum at ultrices ac, venenatis ac velit. Maecenas non tortor ac nibh consectetur vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fermentum dictum purus a molestie. Nulla quam massa, tempor bibendum eleifend non, cursus vel turpis. Nullam quis purus a est ullamcorper ornare vitae nec lacus. Vestibulum tempus dignissim dolor sed posuere. Quisque at nibh quis lorem rhoncus fringilla. Maecenas at massa eros. Sed lectus mauris, faucibus a rutrum a, hendrerit et nisi.</p> </div> </body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.