skaero Posted June 22, 2006 Share Posted June 22, 2006 Hi, I am have a bit of a problem with some css, I am trying to get rounded corners, On this div, but I have no text, on the div, The corners will not show up with out texted, and if I just add <br>'s It get like 8 px to big, can some one help me, It need to be hight=165px, I am sry that I can'tput the code online, My sever is down...Thanks, -SkaeroPS here is the code I have: <html><head><title>title</title><style>.top{background: url(pic.png) repeat-x;width:80%;overflow:auto;padding:0px;border:0px;height: 165px;text-align: left;margin:0 auto;}.p {padding:5px}.c3 {background: url(pic.gif) 0 100% no-repeat;background-position: bottom left;position: fixed;bottom: 165px}.c4 {background: url(pic.gif) 100% 100% no-repeat;background-position: bottom right;position: fixed;bottom: 165px}</style><body><div class="top"><div class="c3"><div class="c4"><img src="pic.gif" align="right"></div> </div></div></body></html> Link to comment Share on other sites More sharing options...
Jonas Posted June 22, 2006 Share Posted June 22, 2006 Take a look at one of these:http://www.cssplay.co.uk/boxes/snazzy.htmlhttp://www.cssplay.co.uk/boxes/curves.htmlIt's a better way of doing it, as it takes no images, and loads faster. Plus, it will look the same in all browsers, which images don't always do because of differances in browser margins/paddings/alignments. Link to comment Share on other sites More sharing options...
skaero Posted June 22, 2006 Author Share Posted June 22, 2006 Thats some good code but it didn't work the code thinks there nothing there, try it here the code I got now <html><head><title>title</title><style type="text/css">body{padding: 20px;background-color: #FFF;font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}p{padding-bottom:1em}h2{padding-top: 0.3em}div#nifty{margin: 0 10%;background: #9BD1FA}b.rtop, b.rbottom{display:block;background: #FFF}b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #9BD1FA}b.r1{margin: 0 5px}b.r2{margin: 0 3px}b.r3{margin: 0 2px}b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}</style></head><body><div id="nifty"><b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b><img src="pic.gif" align="right"><b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div></body></html> Link to comment Share on other sites More sharing options...
skaero Posted June 28, 2006 Author Share Posted June 28, 2006 I Am still have this problem they will not work with pics Link to comment Share on other sites More sharing options...
pulpfiction Posted June 28, 2006 Share Posted June 28, 2006 Why are you using <b> tag?? <b> is bold tag, i guess you need a <p> there... Link to comment Share on other sites More sharing options...
snowboard01 Posted June 28, 2006 Share Posted June 28, 2006 NO I have seen rounded corners with b tags it works great. Link to comment Share on other sites More sharing options...
pulpfiction Posted June 28, 2006 Share Posted June 28, 2006 MY bad... i just checked. yeah, the tags are <b>, thanks for correcting me..... Link to comment Share on other sites More sharing options...
yoshida Posted June 30, 2006 Share Posted June 30, 2006 I use this: #r0 { display: block; overflow: hidden; height: 2px; background: #222299;}#r1 { display: block; overflow: hidden; height: 1px; background: #fafaff; margin: 0px 8px;}#r2 { display: block; overflow: hidden; height: 1px; background: #f9f9ff; margin: 0px 6px;}#r3 { display: block; overflow: hidden; height: 1px; background: #f8f8ff; margin: 0px 4px;}#r4 { display: block; overflow: hidden; height: 1px; background: #f7f7ff; margin: 0px 3px;}#r5 { display: block; overflow: hidden; height: 2px; background: #f6f6ff; margin: 0px 2px;}#r6 { display: block; overflow: hidden; height: 3px; background: #f5f5ff; margin: 0px 1px;}#inhoud { background: #f4f4ff; padding: 5px;} then this: <div id=r1></div><div id=r2></div><div id=r3></div><div id=r4></div><div id=r5></div><div id=r6></div> <div id=inhoud>blablabla </div> <div id=r6></div><div id=r5></div><div id=r4></div><div id=r3></div><div id=r2></div><div id=r1></div> and it looks like this.The code isn't 100% efficient (should've used classes for instance) but it does the J-O-B. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now