Jump to content

Help with rounded corners


skaero
 Share

Recommended Posts

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

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

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

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

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

×
×
  • Create New...