Jump to content

Rounded corners with CSS

SmokingMan

By SmokingMan
in CSS

 Share

Recommended Posts

SmokingMan Member

SmokingMan

Posted
Posted

I'm trying to do rounded corners using CSS, but it's not working. I think I need a new set of eyes. I've only tried it on the left column so far. Here's the code:CSS:

body{  background: transparent;  background-color: #ffffff;}.wrapper{  width: 98%;  height: auto;  margin: auto;  overflow: hidden;  background: transparent;  background-color: #ffffff;  border: none;}							 .banner{  width: 100%;  height: auto;  position: relative;  border: none;  margin-bottom: 3px;  text-align: center;  background: transparent;  background-color: #ffffff;}							 .lcontainer{  float:left;  width: 20%;  height: 100%;  padding-bottom: 32000px;  margin-bottom: -32000px;  background: #ffffff;  background-color: #d3fdfd;}.lcontainer p{  margin: 10px;} .ccontainer{  float:left;  margin-left: .5%;  width: 59%;  height: 100%;  padding-bottom: 32000px;  margin-bottom: -32000px;  background: transparent;  background-color: #cc99cc;}.ccontainer p{  margin: 10px;}.rcontainer{  float:left;  margin-left: .5%;  margin-right: -2%;  width: 20%;  height: 100%;  padding-bottom: 32000px;  margin-bottom: -32000px;  background: transparent;  background-color: #d3fdfd;}.rcontainer p{  margin 10px;}					 .footer{  width: 98%;  margin: auto;  height: auto;  margin-top: 5px;  background: transparent;  background-color: #99ffff;}.footer p{  margin: 10px;}.roundtop{  background: url(../images/trcorner.gif) no-repeat top right;}.roundbottom{  background: url(../images/brcorner.gif) no-repeat top right;}img.corner{  width: 33px;  height: 32px;  border: none;  display: block;}

XHTML:

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><!-- Last Updated 11/25/2006 --><meta content= "Mike Saylor" name= "author" /><meta content="Welcome to the Hot Dog Hut.  Your destination for the finest Hot Dogs in Bristol, TN!" name="description" /><meta content="hot dogs, restaurant, bristol, tennessee" name="keywords" /><link rel="stylesheet" type="text/css" href="stylesheets/hdh-master-styles.css" /><title>Welcome To The Hot Dog Hut!</title></head><body><div class= "wrapper">  <div class="banner">	<img alt="Hot Dog Hut Logo" src="images/hdh-logo.jpg" height="138" width="758" />  </div>  <div class="lcontainer">	<div class= "roundtop">	  <img alt= "" src= "images/tlcorner.gif" class= "corner" height= "32" style= "display: none" width= "33" />	</div>	<p>This column will contain links for specials, events, ordering, and whatever else 	you can think of.</p>	<p>The column will adjust in height according to what it's filled with.</p>	<div class= "roundbottom">	  <img alt= "" src= "images/blcorner.gif" class= "corner" height= "32" style= "display: none" width= "33" />	</div>  </div>  <div class= "ccontainer">	<p>The menu could go here.  List all of the items and their prices.  	The column height will adjust according to what is put in here.</p>	<p>You don't have to have a three column layout.  You can go with	two columns or even with one.  That will be up to you as to how you	want the site to be laid out.</p>	<p>You can go with or without a banner also.  I just inserted a faux	banner to give you a general idea.  You could go with an image of your	store blended into the background.  It's all up to you.</p>  </div>  <div class="rcontainer">	<p>We could do more links, advertising, and other stuff in this column.  It will 	expand vertically to accomodate whatever you put here.</p>  </div></div><div class="footer">  <p>Maybe ads or other things.  I'll leave it up to you.  The column will adjust in   height according to what it's filled with.  And none of these elements have to have   a background color or outlines. I put in the colors just to highlight them.</p></div></body></html>

Any ideas?

Link to comment
Share on other sites
jlhaslip Devoted Member

jlhaslip

Posted
Posted

Try removing the display:none to see if that is stopping the image from showng.Also, convert the lconainer into an id'd div instead of a class. I assume there would only be one left-container, so it would be better as a 'named' div, I think. Then refer to it in your css as '#lcontainer'. I don't know if it actually makes a difference, but i am wondering if you can place a background image on a class???

Link to comment
Share on other sites
SmokingMan Member

SmokingMan

Posted
  • Author
Posted

I removed the "display: none" style from the <img> tags that hold the rounded corners. And if you only use Opera and Firefox it looks fine. But what a surprise, IE messes it up. The top rounded corners look fine, but the bottom ones...well it's easier just to provide a link. Be sure to view it in IE to see the problem in the left column. By the way, I'm viewing it with the new and improved IE 7 :)______________________________________________________________I removed the bottom padding & margin from the CSS and now it works. I had the padding & margin in to force the columns to be equal in height because "height: 100%" didn't work, but now it does?! I sure wish someone could explain this one to me. I'n not only confused, but also befuddled.

Link to comment
Share on other sites
SmokingMan Member

SmokingMan

Posted
  • Author
Posted

While I got the rounded corners to work, I had to remove " padding-bottom: 32000px; margin-bottom: -32000px;" from the CSS to make the corners render correctly. But now all columns are not equal in height. Does anyone have any ideas, or is it just a pipe dream to have rounded corners and equal column heights?

Link to comment
Share on other sites
SmokingMan Member

SmokingMan

Posted
  • Author
Posted
http://www.cssplay.co.uk/boxes/curves.htmlcheck this out it might help.
I checked it out, but could find no explanation or tutorial on how it was done, just markup I could copy and use. And it uses absolute positioning, which I'm not so sure how well that would work in a fluid three column layout.
Link to comment
Share on other sites
chemo Newbie

chemo

Posted
Posted
I checked it out, but could find no explanation or tutorial on how it was done, just markup I could copy and use. And it uses absolute positioning, which I'm not so sure how well that would work in a fluid three column layout.
I was wondering would it work if you were to give each of the columns a different z-index. Sorry I can’t be of more help. :)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...