Curved Edges won't work ?
Hello, sorry to bother you all, and this is probably a rookie question
I am designing a web site, and i'm using css
I want to make some div's with curved edges, and this works with one div but i want to make the rest curved but this does not work.
Here's a snapshot: http://img103.imageshack.us/img103/3443/design2gd9.jpg -- the black box inside the green one is the problem
Here's what a want the div to look like: http://img66.imageshack.us/img66/8249/divjc2.jpg
here is the html code of the page:and here's the cssCode:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="syle2.css" rel="stylesheet" type="text/css"> </head> <body><div id="main"><div class="tlm"><div class="blm"><div class="brm"><div class="trm"><div id="logo"> </div><div id="lg-icon"> </div> <div id="lg-icon"><img src="home3.gif"></div><p> </p><div id="small-icons"><A HREF="somewhere.html" onmouseover="document.sub_but.src='home2.gif'" onmouseout="document.sub_but.src='home1.gif'"> <IMG SRC="home1.gif" BORDER="0" ALT="Move your mouse over me" NAME="sub_but"> </A></div> <p> </p> <p> </p> <p> </p> <p> </p> <div id="heading"> <div class="t"> <div class="b"> <div class="l"> <div class="r"> <div class="blh"> <div class="brh"> <div class="trh"> <div class="tlh"> <div id="title"><div class="blt"><div class="brt"><div class="tlt"><div class="trt">Welcome</div></div></div></div></div> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div></div></div></div></div></div></div></div></div> <p> </p> <p> </p> <p> </p> <p> </p> </div> </body> </html>
Code:body { margin: 0px; padding: 0px; background-color: #383838; font-family: tahoma, arial, sans-serif; font-size: 8pt; background-image:url(body_bg.gif) } p, td, input, select, a { font-family: tahoma, arial, sans-serif; font-size: 8pt; } #main {background-color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; margin:20px 20px 20px 20px;} .tlm {background-image:url(tlm.bmp); background-position: 0 0; background-repeat:no-repeat;} .trm {background-image:url(trm.bmp); background-position: 100% 0; background-repeat:no-repeat;} .blm {background-image:url(blm.bmp); background-position: 0 100%; background-repeat:no-repeat;} .brm {background-image:url(brm.bmp); background-position: 100% 100%; background-repeat:no-repeat;} #logo { margin: auto; width: 202px; height: 160px; background-image: url(logo.gif) } #lg-icon {float:left; margin-left: 30px; width:auto; height:auto; background-image: url(home3.gif); background-repeat:no-repeat;} #small-icons {float:right; margin-right: 100px; width:auto; height:auto;} #heading {height:300px; width:auto; margin: 30px 30px 30px 30px; font-family:Arial, Helvetica, sans-serif; background-color:#FFFFFF;} #title {width: 98%;height:20px; background-color:#000000;font-color: #ffffff; margin: 0 10px 10px 10px;} .tlh {background:url(tlh.gif); background-position: 0% 0%; background-repeat:no-repeat;} .trh {background:url(trh.gif); background-position: 100% 0%; background-repeat:no-repeat;} .blh {background:url(blh.gif); background-position: 0 100%; background-repeat:no-repeat;} .brh {background:url(brh.gif); background-position: 100% 100%; background-repeat:no-repeat;} .t {background: url(dot.gif) 0 0 repeat-x;} .b {background: url(dot.gif) 0 100% repeat-x} .l {background: url(dot.gif) 0 0 repeat-y} .r {background: url(dot.gif) 100% 0 repeat-y} .cbl {background: url(cbl.png) 0 100% no-repeat #e9eef1; width: 100%} .cbr {background: url(cbr.png) 100% 100% no-repeat} .ctl {background: url(ctl.png) 0 0 no-repeat} .ctr {background: url(ctr.png) 100% 0 no-repeat; padding:10px} .blt {background:url(blt.bmp) 0 100% no-repeat;} .brt {background:url(brt.bmp) 100% 100% no-repeat;} .tlt {background:url(tlt.bmp) 0 0 no-repeat;} .trt {background:url(trt.bmp) 100% 0 no-repeat;} .bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 20em} .br {background: url(br.gif) 100% 100% no-repeat} .tl {background: url(tl.gif) 0 0 no-repeat} .tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px} .clear {font-size: 1px; height: 1px}
it works !!
Bookmarks