Curious if this can be done, a rounded text box with a colour fill in dreamweaver. I would also like the option of keeping or deleting the border
Use css? Do you have some knowledge of how to deploy it?
#roundedBox {
width: 500px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
background-color:#CF9;
border: 1px solid #990;
}
<div id="roundedBox">
<p>This box has rounded corners</p>
<p>This box has rounded corners</p>
<p>This box has rounded corners</p>
<p>This box has rounded corners</p>
</div>
The above will work in all modern browsers and versions of IE9 upwards.
If you need to support less than IE9 you will have to use another techinque to address the issue like 'curvycorners' or just let the website degarded gracefully in older browsers.
LS8 9KN wrote:
Thanks for the code but what is the curvycorners technique? Is this something using html5?
No 'curvey corners' http://www.curvycorners.net/ is used to support older versions of IE, 6,7 and 8. Support for rounded corners in IE was only made possible when IE9 appeared on the scene.
Primarily you should use the method I detailed above and then IF you want to support IE6, 7 and 8 think about using curvey corners.
Of course you could always use images to created the rounded corners too!
I have found a site where he is using the corners that I want. I dont know much about the code but this is the bit I copied and pasted which looked useful. The site looks the same in my iphone and he isnt using images for the corners. Can you please have a look and give some ideas. For CurvyCorners only the javascripts API works which now they dont reccomend,the CSS dosent work in my version of firefox. Here is the code:
<script>
$(window).one("load", function() {
if ($("#content").height() < 820) {
var wh = 820 + 100;
var bh = 820;
}
else {
var wh = $("#content").height() + 100;
var bh = $("#content").height();
}
$("#white-content").css("height", wh + "px");
$("#blue-content").css("height", bh + "px");
});
</script>
<div id="column-left">
<div class="box">
<div class="box-heading">Categories</div>
<div class="box-content">
<div class="box-category">
<ul>
<!--[if IE]>
<script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.4-ie fix.js"></script>
<![endif]-->
<script type="text/javascript" src="catalog/view/javascript/jquery/tabs.js"></script>
<script type="text/javascript" src="catalog/view/javascript/common.js"></script>
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/steroidonline/stylesheet/ie7.css" />
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/steroidonline/stylesheet/ie6.css" />
<script type="text/javascript" src="catalog/view/javascript/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('#logo img');
</script>
<![endif]-->
<script type="text/javascript">
Basically I want the corners to show in every version of internet. The images will take up too much space or if I am forced to then I will have to use
LS8 9KN wrote:
Was wondering how to position the box on the page so I can drag and position and also how to overlay different boxes to create a design pattern?
It sounds as though you are treating this project like you would a DTP project which is completely the wrong way.
There is no easy way to do ths succesfully unless you know some html and css.
You can insert absolutely positioned <divs> - Insert> Layout Objects> AP Div and drag them around all day but I would not advise it as a method to layout a page because of their limitations.
A quote from page 48 of Adobe CS5 CIB
"
CSS breaks all these default constraints and lets you place elements almost anywhere
you want them to be. Positioning can be specifi ed in relative terms (such as left,
right, center, and so on) or by absolute coordinates measured in pixels, inches,
centimeters, or other standard measurement system. Using CSS you can even place
one element on top of or below another in a stack to create amazing graphical eff ects"
So what I am wanting to do is possible. I just need to devote more time to learning CSS.
See near bottom how to use a file called PIE.htc to get rounded corners in older versions of IE
http://forums.adobe.com/message/4460760#4460760
Download the file called PIE.htc
@David
The HTC workarounds for older IE browsers do have some notable side effects. #1 the removal of Clear Type which makes fonts look horrible in browsers. #2 HTC workarounds don't work well on complex layouts or when different border radii values are used in the 4 corners.
@LS8,
You have decide for yourself if it's worth extra effort to support older browsers for the sake of "eye candy." While rounded borders look nice, having them doesn't make your site perform better. Ultimately, performance is what counts; not rounded borders.
just my 2 cents...
Nancy O.
North America
Europe, Middle East and Africa
Asia Pacific