SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: Rounded corners

  1. #1
    Non-Member
    Join Date
    Feb 2005
    Posts
    737
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rounded corners

    Hi Guys,

    Iíve nearly built my CSS Valid frontpage for my site apart from one thing

    The site can be found http://www.thisisslough.com/stfc/index.html.

    I want to display the site in a rounded box around the outside Ė ie the current content fitted into in a rounded box like this html one

    http://www.thisisslough.com/corners/index.html:

    1) But Iíve looked at several tutorials and I canít understand how this works incorporated with the current CSS design.
    2) The corners if saved as transparent gifís appear distorted against the background.

    Can anyone please advise?

    Many Thanks

    Chris

  2. #2
    SitePoint Enthusiast simonpointer's Avatar
    Join Date
    Jun 2006
    Location
    Guildford UK
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A question first: Do you want your corners design to stretch for height, for width or for both?

  3. #3
    Non-Member
    Join Date
    Feb 2005
    Posts
    737
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ideally both please.

    Thanks for your help!

  4. #4
    SitePoint Guru
    Join Date
    Aug 2005
    Posts
    986
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you need four images of the four corners (and one 1px*1px image for the background in case IE displays the wrong color if you use background-color: #...).

    Try this:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<style type="text/css">
    			#wrapper {
    				position: relative;
    				width: 200px;
    				height: 200px;
    			}
    			
    			#content {
    				position: absolute;
    				left: 20px;
    				right: 20px;
    				top: 20px;
    				bottom: 20px;
    			}
    			
    			#top-left, #top-right, #bottom-left, #bottom-right {
    				position: absolute;
    				width: 20px;
    				height: 20px;
    			}
    			
    			#top-left, #top-right {
    				top: 0;
    			}
    			
    			#bottom-left, #bottom-right {
    				bottom: 0;
    			}
    			
    			#top-left, #bottom-left {
    				left: 0;
    			}
    			
    			#top-right, #bottom-right {
    				right: 0;
    			}
    			
    			#top-left {background: #F00}
    			#top-right {background: #0F0}
    			#bottom-left {background: #00F}
    			#bottom-right {background: #FF0}
    			#content {background: #0FF}
    		</style>
    	</head>
    	<body>
    		<div id="wrapper">
    			<div id="content">foo bar baz</div>
    			<div id="top-left"></div>
    			<div id="top-right"></div>
    			<div id="bottom-left"></div>
    			<div id="bottom-right"></div>
    		</div>
    	</body>
    </html>
    Or, if you need more flexibility:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<style type="text/css">
    			#wrapper {
    				position: relative;
    				width: 200px;
    				height: 200px;
    			}
    			
    			#content, #top-left, #top-right, #bottom-left, #bottom-right, #h-bg, #v-bg {
    				position: absolute;
    			}
    			
    			#content, #h-bg, #v-bg {
    				left: 20px;
    				right: 20px;
    				top: 20px;
    				bottom: 20px;
    			}
    			
    			#h-bg {
    				left: 0;
    				right: 0;
    			}
    			
    			#v-bg {
    				top: 0;
    				bottom: 0;
    			}
    			
    			#top-left, #top-right, #bottom-left, #bottom-right {
    				width: 20px;
    				height: 20px;
    			}
    			
    			#top-left, #top-right {
    				top: 0;
    			}
    			
    			#bottom-left, #bottom-right {
    				bottom: 0;
    			}
    			
    			#top-left, #bottom-left {
    				left: 0;
    			}
    			
    			#top-right, #bottom-right {
    				right: 0;
    			}
    			
    			#top-left {background: #F00}
    			#top-right {background: #0F0}
    			#bottom-left {background: #00F}
    			#bottom-right {background: #FF0}
    			#content {background: #0FF; z-index: 1;}
    			#h-bg {background: #F0F}
    			#v-bg {background: #AAF}
    		</style>
    	</head>
    	<body>
    		<div id="wrapper">
    			<div id="content">foo bar baz</div>
    			<div id="h-bg"></div>
    			<div id="v-bg"></div>
    			<div id="top-left"></div>
    			<div id="top-right"></div>
    			<div id="bottom-left"></div>
    			<div id="bottom-right"></div>
    		</div>
    	</body>
    </html>

  5. #5
    Non-Member
    Join Date
    Feb 2005
    Posts
    737
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks,

    But how would it be done in DIV's rather than layers?

    Thanks

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Layers and divs are the same thing - layers is just a name that some WYSIWYG software apps use.

  7. #7
    SitePoint Enthusiast CanaryWoolf's Avatar
    Join Date
    Dec 2005
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My advice would be to forget about the rounded corners - I don't think it will add anything to the design and might make it look a little dated.

    Lose the background image as well - again looks dated - still to a solid colour or a faded edge imo

    CW
    Canary Woolf
    Do you know what a zook is?
    www.bamzooki.org.uk + | + www.cavaliermailing.com

  8. #8
    SitePoint Addict
    Join Date
    May 2006
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    have a look at the Spanky Corners info here
    http://www.sitepoint.com/forums/show...spanky+corners
    Might be useful


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
  •