Hi Mo,
You have a few ways of going about doing this.
One is using CSS3 to set the border radius of a box. Example below.
.box {
border-radius:1.6em;
}
Unfortunately this doesn't work in IE6 and, I believe, 7 as well.
I've been working on a project which requires TONS of rounded corner
boxes and the client wants the rounded corner boxes to work across all
major browsers. So I've gone about building my rounded boxes using
images and a lot more divs then I would like to use. Since these boxes
are being used all over the site and the width of a box changes from
one template to the next, I made my boxes expandable for both width
and height. Take a look at the link below. You'll get the actual
examples along with code.
http://clients.interactivestrategies.com/NEXTDAY/site2/box.html
Hope this helps.
On Nov 11, 7:52 pm, Mo <[EMAIL PROTECTED]> wrote:
> On our site redesign, I have a pretty complex background over which I
> will be laying a semi-transparent content-div BG.
> (seehttp://www.voyagercomponents.com/download/example.jpgfor a crude
> example.)
> To improve scalability and decrease load times, I want to use small
> images and just REPEAT where necessary. In the example image, I also
> separately displayed the components used, for further understanding.
>
> My initial thought was to have a <div> with 3 <spans> for each the
> left and right sides:
> <div class="content">
> <div class="bgStyleHelper">
> <span id="topLeft">
> <span id="midLeft"></span></span>
> <span id="btmLeft"></span>
>
> <span id="topRight">
> <span id="midRight"></span></span>
> <span id="btmRight"></span>
> </div>
> <p> some content here </p>
> </div>
>
> Then just set the BG's, sizes, etc. to make those line up on the left
> & right sides of the content div:
> topLft topRt
> r r
> e some content e
> p content content p
> e content content e
> a content content a
> t content content t
> - goes here -
> y y
> btmLft btmRt
>
> span#topLeft{
> width: 24px;
> height: 24px;
> margin: -24px 0px;
> padding: 0;
> display: block;
> background-image: url(images/bgBody_tpLt_24x24.png);
> background-position: top left;
> background-repeat: no-repeat;
> }
> span#midLeft{
> width: 100px;
> height: 100px;
> margin: -25px 25px;
> padding: 0px 0px;
> display: block;
> background-image: url(images/bgBody24x24.png);
> background-position: center left;
> background-repeat: repeat-y;
> }
> span#btmLeft{
> width: 24px;
> height: 24px;
> margin: 50px 0px;
> padding: 0px 0px;
> display: block;
> background-image: url(images/bgBody_btmLt_24x24.png);
> background-position: bottom left;
> background-repeat: no-repeat;
> }
> ... etc ...
>
> But, I'm not making much progress.
> DOES ANYONE HAVE A BETTER WAY OF DOING THIS?
>
> I'm eager to learn, so lay it on me!
>
> Thanks-a-bunch,
> Mo
>
> NOTE: I am pretty-much a novice, so feel free to over-explain.
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [EMAIL PROTECTED]
-~----------~----~----~----~------~----~------~--~---
