harryd Posted February 16, 2009 Report 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
JBall Posted February 17, 2009 Report 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
harryd Posted February 18, 2009 Author Report Posted February 18, 2009 Thanks JBall, I followed your instruction. I am doing something wrong. here is my div New Test Thanks again Quote
harryd Posted March 10, 2009 Author Report 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
Wickham Posted March 11, 2009 Report Posted March 11, 2009 There's another javascript curved corners method here:- http://www.curvycorners.net/examples/demos/demo.html Quote
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.