I found rounded corners! (Full Version)

All Forums >> [Web Development] >> General Web Development



Message


curious monkey -> I found rounded corners! (5/16/2006 11:29:30)

Looky

now I just need to learn how to use them[:D]




womble -> RE: I found rounded corners! (5/16/2006 11:55:50)

Hmmm, just been playing a little more (it's that "don't want to do any more work" time of afternoon that afflicts me when it's nearly tea time) and it works very well for fixed height <div>s, but it's not a technique that can be used for <div>s you want to grow with the content without tweaking the code.

Still jolly useful to know about though. [:)]

(and shift the colour info from the <div>s into the stylesheet and you've got valid xhtml strict!)




jaybee -> RE: I found rounded corners! (5/16/2006 12:23:19)

The problem with that one, and all the others I've found that do the box without graphics, is that they use a bullet to make the curve. A bullet is font and we all know that fonts are different sizes in different browsers and that visitors can make them bigger and smaller. So unless you make the entire thing fixed, including the font, the layout is gonna break.




Tailslide -> RE: I found rounded corners! (5/16/2006 14:29:28)

Too many divs.

Much better to attach the corners to stuff you have within the box like a heading, a span, a paragraph, a link - you get the idea.




jaybee -> RE: I found rounded corners! (5/16/2006 15:08:45)

And what she said. [8|]




womble -> RE: I found rounded corners! (5/16/2006 15:34:41)

Hmmmm, I agree that too many div's is Not A Good Thing and I can see the problems with the imageless methods with the whole font sizing thing. A couple of days ago I tried doing one with the attaching the corners to stuff in the box though and it required hacks galore to get it to play nice in IE. I ended up using an image one that had the corner images as backgrounds in various divs, then a central content div and I got that playing nicely in all of the browsers with no hacks. On the whole though rounded corners are a PITA and I rarely use them.




curious monkey -> RE: I found rounded corners! (5/17/2006 11:59:20)

ok going though Stu Nichol's site I found this gem. what are the draw back s here. he uses them. [8|]
rounded borders




Tailslide -> RE: I found rounded corners! (5/17/2006 12:12:22)

Can't see any massive drawbacks - apart from the extra markup used to attach the corners. So it'd boil down to whether you can live with that or not!




rdouglass -> RE: I found rounded corners! (5/17/2006 13:19:43)

quote:

apart from the extra markup used to attach the corners.


Ah, don't sweat the small stuff. [:D]

I like that one and plan to try it a little. Can anyone tell me 'exactly' where the round comes from? Is it in there?

border-width:0 2px;

And I see no necessary JavaScript in that source. Am I to assume none is required? If so, I like it more already. [8|]




jaybee -> RE: I found rounded corners! (5/17/2006 14:03:42)

Ah ha crafty. He's not using bullets.

This is what makes the corners

.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}


If you look at the margins, he makes them graduate.

You know one of these days I'll remember to go to Stu's site first instead of spending hours schlepping around in Google.




rdouglass -> RE: I found rounded corners! (5/17/2006 14:23:23)

quote:

If you look at the margins, he makes them graduate.


Ahhhh...I see it now. Nice trick. (Wish I wouda' thunk it. [&o] [:D])




digital_me -> RE: I found rounded corners! (6/15/2006 10:28:48)

So do I

http://www.html.it/articoli/niftycube/index.html




jaybee -> RE: I found rounded corners! (6/15/2006 13:47:28)

Hi and welcome to Outfront. Yes, there's another thread on here where we'd tried the Nifty Corners stuff and we were getting some problems with resizing in different browsers. Stu Nichols' corners don't have the same problem.




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125