SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast Locker's Avatar
    Join Date
    May 2005
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Corner Images in CSS

    I'd like to position 4 corner images in the top left, top right, bottom left, bottom right so that I've got a rounded box. How exactly can you achieve this with divs and CSS? I thought this would work for the top:

    Code:
    	<div id="focus">
    		<div id="topleft"><img src="images/corner.gif" alt="" /></div>
    		<div id="topright"><img src="images/corner2.gif" alt="" /></div>
    	</div>
    With the CSS:

    Code:
    #topfleft {
    	width: 30px;
    	float: left;
    }
    
    #topright {
    	width: 30px;
    	float: right;
    }
    But the top right image displays on a new line. Also, I wouldn't really have a clue about position the bottom two. So, how is it done?

    Regards,
    Mark

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use absolute positioning to place the corners without affecting the internal layout of the content.

    Or you can use large images:

    http://www.456bereastreet.com/archiv...s_and_borders/
    http://www.vertexwerks.com/tests/sidebox/


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •