Log in

View Full Version : Please help me with Round Corners.


Cheng
08-27-2006, 05:41 AM
Hi.

I looked at the source file from this website here:

http://www.freecenter.com/checkit.html

Because there is a container on the top of the webpage made with round corners and I think it was done with CSS and not with images or javascript
because this is what I found in the source code:

.roundedCorners {
-moz-border-radius: 10px;
width: 85%;
margin-left: auto;
margin-right: auto;
padding: 3px;
border: 1px solid black;
}
I hope now someone of you guys can give me a hand by explaing how this is done.

Thanks in advance.

Cheng

PS
I'm sorry because I just found out that it was done with images.
So it looks like that it is not possible to have round corners without images.
mburt
08-27-2006, 01:10 PM
I made my own rounded corners script. Check this out:


<html>
<head>
<script type="text/javascript">
function tleft(left,top) {
var topleft = new Array
topleft[0]=[17,16,15,14,14,13,13]
topleft[1]=[14,14,15,16,17,18,19]
document.body.innerHTML+="<span class='px' style='left:"+(left+13)+";top:"+(top+20)+";height:5px'></span>"
document.body.innerHTML+="<span class='px' style='left:"+(left+18)+";top:"+(top+13)+";width:80px'></span>"
for (i=0;i<=topleft[0].length-1;i++) {
document.body.innerHTML+="<span class='px' style='left:"+(left+topleft[0][i])+";top:"+(top+topleft[1][i])+"'></span>"
}
}
function tright(left,top) {
var topright = new Array
topright[0] = [99,100,101,102,102,103,103]
topright[1] = [14,14,15,16,17,18,19]
document.body.innerHTML+="<span class='px' style='left:"+(left+103)+";top:"+(top+18)+";height:5px'></span>"
document.body.innerHTML+="<span class='px' style='left:"+(left+98)+";top:"+(top+13)+"'></span>"
for (i=0;i<=topright[0].length-1;i++) {
document.body.innerHTML+="<span class='px' style='left:"+(left+topright[0][i])+";top:"+(top+topright[1][i])+"'></span>"
}
}
function bleft(left,top) {
var bottomleft = new Array
bottomleft[0]=[17,16,15,14,14,13,13]
bottomleft[1]=[29,28,27,26,25,24,23]
document.body.innerHTML+="<span class='px' style='left:"+(left+17)+";top:"+(top+29)+";width:82px'></span>"
for (i=0;i<=bottomleft[0].length-1;i++) {
document.body.innerHTML+="<span class='px' style='left:"+(left+bottomleft[0][i])+";top:"+(top+bottomleft[1][i])+"'></span>"
}
}
function bright(left,top) {
var bottomright = new Array
bottomright[0] = [99,100,101,102,102,103,103]
bottomright[1] = [29,28,27,26,25,24,23]
for (i=0;i<=bottomright[0].length-1;i++) {
document.body.innerHTML+="<span class='px' style='left:"+(left+bottomright[0][i])+";top:"+(top+bottomright[1][i])+"'></span>"
}
}
function createCorner(l,t,text,link) {
tleft(l,t)
tright(l,t)
bleft(l,t)
bright(l,t)
document.body.innerHTML+="<span class='buttontxt'><a href='"+link+"' style='left:"+(l+13)+";top:"+(t+14)+"'>"+text+"</a></span>"
}
onload=function() {
createCorner(40,50,"Dynamic Drive","http://www.dynamicdrive.com/")
createCorner(130,50,"Dynamic Drive","http://www.dynamicdrive.com/")
createCorner(220,50,"Dynamic Drive","http://www.dynamicdrive.com/")
}
</script>
<style type="text/css">
.px {
width:1px;
height:1px;
overflow:hidden;
position:absolute;
background:#000;
z-index:100
}
.buttontxt a {
width:91;
text-align:center;
position:absolute;
font:10px verdana;
text-decoration:none;
color:black;
height:15
}
.buttontxt a:hover {
color:red
}
</style>
</head>
<body>
<input type="button" value="Create Button" onclick="disabled=true;createCorner(310,50,'Dynamic Drive','http://www.dynamicdrive.com/')">
</body>
</html>
Cheng
08-27-2006, 01:46 PM
Hi Mike.

Thanks for your reply.
It looks ok but I cant see anything when I open it in Dreamweaver.
Only if I try it in the browser I can see the 3 buttons with rounded corners.
would be nice if I can see it in the editor as well.
Is this possible?

Thanks again.
Cheng.
mburt
08-27-2006, 01:59 PM
Err... No. I don't think you could see it in an editor.

The function createCorner I made pretty simple.

Let me break down the parameters:

createCorner(40,50,"Dynamic Drive","http://www.dynamicdrive.com/")
Above what you see in red is the value 40. This tells the button how many pixels left to move.

createCorner(40,50,"Dynamic Drive","http://www.dynamicdrive.com/")
The next parameter is the button's distance from the top of the page in pixels.

createCorner(40,50,"Dynamic Drive","http://www.dynamicdrive.com/")
This is the text for the button.

createCorner(40,50,"Dynamic Drive","http://www.dynamicdrive.com/")
And finally, this is the button's target (URL).
Cheng
08-27-2006, 02:19 PM
Hi Mike.

Thanks again.
This what you got is alright for a button but does it work as a layout cell or table as well?
Using it for a layout one must see it in the editor at least I do.
Some guys can work only with code but I'm far away from that.
Still it's handy to do cornerd buttons.
Here is a tutorial on how to use it for layouts but it's a little to complicated for me.

http://kalsey.com/2003/07/rounded_corners_in_css/

Maybe you got use for it.

So long.

Cheng