CSS Round Edged Boxes etc...

[joannapo]

Hi, back again :D,

I'm trying to create a rounded edge box, and I've followed a few web tutorials on line, but for whatever reason it's just not working, could someone have a look at my code and let me know if there's any obvious problem:

HTML:

<div style="width: 700px;" class="bl"><div
class="br"><div class="tl"><div class="tr">
<ul><li style="width: 538px;">
<--my content-->
</div></div></div></div> <div class="clear">&nbsp;</div>

CSS:

.bl { background: url (images/bl.jpg) 0 100% no-repeat #8BC159; width: 20em }
.br { background: url (images/br.jpg) 100% 100% no-repeat }
.tl { background: url (images/tl.jpg) 0 0 no-repeat }
.tr { background: url (images/tr.jpg) 100% 0 no-repeat; padding:10px }
.clear { font-size: 1px; height: 1px }

I've put the CSS section into the "content" part of the script - not that I'm sure that it matters.

It seems that Kompozer is having trouble attaching the images to the box - as the box is set out "in ghost form", but not in the colour I suggested.

Can anyone help?

Thanks

[alexporter]

hi,
I hate round corners with a passion as I can never get them to look right in all browsers. I use rico2.0 to do mine automatically.

http://www.openrico.org

might be worth checking out.

alex

[joannapo]

God, I'm hating them too! For some reason, which has to be mine, the img files for the corners are not being found, grrrrrr...

I'll give Rico a go though, as it looks nice and easy (but doesn't everything involved in web design???).

Thanks....

[farcaster]

Check out this tutorial for creating rounded corners.

http://css-tricks.com/video-screencasts/24-rounded-corners/

I have no affiliation with the site, but I do go there quite a bit for the screencasts.

[LinGNUbie]

CSS Stylesheet:


/* RNDBOX */
.rndboxtop, .rndboxbottom
{
display:block;
background:transparent;
font-size:1px;
}
.rndbox1, .rndbox2, .rndbox3, .rndbox4
{
display:block;
overflow:hidden;
height:1px;
}
.rndbox2, .rndbox3, .rndbox4
{
background:white;
border-left:1px solid navy;
border-right:1px solid navy;
}
.rndbox1
{
margin:0 5px;
background: navy;
}
.rndbox2
{
margin:0 3px;
border-width:0 2px;
}
.rndbox3
{
margin:0 2px;
}
.rndbox4
{
height:2px;
margin:0 1px;
}
.rndbox
{
height: 100%;
background: white;
border:0 solid navy;
border-width:0 1px;
}




HTML Code:


<DIV ID="yourid" class="rndbox">
<b class="rndboxtop">
<b class="rndbox1"></b>
<b class="rndbox2"></b>
<b class="rndbox3"></b>
<b class="rndbox4"></b>
</b>
<div class="rndbox">
PLACE CONTENT HERE
</div>
<b class="rndboxbottom">
<b class="rndbox4"></b>
<b class="rndbox3"></b>
<b class="rndbox2"></b>
<b class="rndbox1"></b>
</b>
</DIV>


You can either have the stylesheet directly on the page or imported from somewhere in your directory then use on many pages without reusing code. Of course, modify the colors and sizes to your requirements! :)