harryd Posted February 16, 2009 Report Share Posted February 16, 2009 I am trying to do a news style box for my first site. Example from tutorial. http://www.html.it/articoli/nifty/nifty4js.html here is the style from tutorial Rounded("div#header","transparent","#C3D9FF","small"); Rounded("div#box","#FFF","#E4E7F2"); How can I add this style to mine. #content { float: left; width: 506px; height: 630px; padding: 10px; margin: auto; border: 1px solid #FFFFFF; background-color:#FFFFFF; } .col1, .col2 { float: left; width: 230px; height: 200px; margin: 0px 15px 15px 0px; } .clear: { clear: both; width: 100%; height: 0; visibility: none; } Thanks for your help Quote Link to comment Share on other sites More sharing options...
JBall Posted February 17, 2009 Report Share Posted February 17, 2009 (edited) Well, for sure you will need to add this in between your tags in your HTML And you'll need to add this to your CSS: div.news{width: 250px;background: #F0F0E7;margin-bottom: 20px} h3{font-size: 100%;margin:0;padding: 0 0 3px;background: #FFC5FF;color: #000;text-align: center} p{margin:0;padding: 5px 10px;line-height: 1.3;text-align: justify} .rtop,.rbottom{display:block} .rtop *,.rbottom *{display:block;height: 1px;overflow: hidden} .r1{margin: 0 5px} .r2{margin: 0 3px} .r3{margin: 0 2px} .r4{margin: 0 1px;height: 2px} .rs1{margin: 0 2px} .rs2{margin: 0 1px} You'll need to tweak for size and color. Other than that just give whatever div you want to have rounded corners a class of "news" and you should be golden. Edited February 17, 2009 by JBall Quote Link to comment Share on other sites More sharing options...
harryd Posted February 18, 2009 Author Report Share Posted February 18, 2009 Thanks JBall, I followed your instruction. I am doing something wrong. here is my div New Test Thanks again Quote Link to comment Share on other sites More sharing options...
harryd Posted March 10, 2009 Author Report Share Posted March 10, 2009 I added HTML tags. I would really be happy if I could make rounded corners with no image work here is the css and is not working. div.news{ width: 230px; background: #F0F0E7; margin-bottom: 20px; color: #000000; background-color: #FFFFFF; } h3{font-size: 100%;margin:0;padding: 0 0 3px;color: #DF0000;text-align: center; font:bold} h4{font-size: 100%;margin:0;padding: 0 0 3px;background: #BAFF75;color: #000;text-align: center} p{ margin:0; padding: 5px 10px; line-height: 1.3; } .rtop,.rbottom{display:block} .rtop *,.rbottom *{display:block;height: 1px;overflow: hidden} .r1{margin: 0 5px} .r2{margin: 0 3px} .r3{margin: 0 2px} .r4{margin: 0 1px;height: 2px} .rs1{margin: 0 2px} .rs2{margin: 0 1px} Thanks harryd Quote Link to comment Share on other sites More sharing options...
Wickham Posted March 11, 2009 Report Share Posted March 11, 2009 There's another javascript curved corners method here:- http://www.curvycorners.net/examples/demos/demo.html Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.