 | |
Simple Rounded Corners on Div
Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)
 |
| | Thread Tools | Display Modes |
#1
 
| |||
| |||
|
Simple Rounded Corners on Div -
10-18-2007
, 07:58 PM
#2
| |||
| |||
|
|
Searching the web, there seems to be a myriad of ways to achieve rounded corners on a fixed-width div. I'm looking for suggestions on the simplest, most straight-forward method of achieving this. |
http://www.sitepoint.com/article/bre...out-of-the-box
--
dorayme
#3
| |||
| |||
|
|
In article 1192755498.193114.25760 (AT) i38g200...oglegroups.com>, rfox (AT) scoe (DOT) net wrote: Searching the web, there seems to be a myriad of ways to achieve rounded corners on a fixed-width div. I'm looking for suggestions on the simplest, most straight-forward method of achieving this. |
http://www.neuroticweb.com/recursos/css-rounded-box/
to your purposes.
--
dorayme
#4
| |||
| |||
|
|
In article 1192755498.193114.25760 (AT) i38g200...oglegroups.com>, rfox (AT) scoe (DOT) net wrote: Searching the web, there seems to be a myriad of ways to achieve rounded corners on a fixed-width div. I'm looking for suggestions on the simplest, most straight-forward method of achieving this. You are likely to profit by reading: http://www.sitepoint.com/article/bre...out-of-the-box |
I see the more it worries me the fixation on pixels...
And about the url to that rounded corner generator, now that I
have time to look closer, you are likely to need to be a bit
handy with image manip programs... that generator at:
http://www.neuroticweb.com/recursos/css-rounded-box/
is actually rather wooden and does not always function correctly.
It does not always change the backgound colour for the little
images reliably!). But it is not a hard thing to get the gifs
right. Now, if you do not want the divs to be too rigid and you
anticipate big variations in size on different users machines,
you may have to em size all the relevant gifs for them to grow
and shrink right. There is no way out but to experiment. But lett
me not say this without doing it myself:
How about this adaptation:
<http://netweaver.com.au/test/roundCnr/roundCnrExperiment.html>
Seems to grow and adapt pretty well?
--
dorayme
#5
| |||
| |||
|
|
you may have to em size all the relevant gifs |
things. I think I need antibiotics, I am crook... Fancy having to
go to the bloody doc and chemist instead of the beach on a day
like this in Sydney.
Quote:
|
for them to grow and shrink right. There is no way out but to experiment. But let me not say this without doing it myself: How about this adaptation: http://netweaver.com.au/test/roundCn...xperiment.html Seems to grow and adapt pretty well? |
dorayme
#6
| |||
| |||
|
#7
| |||
| |||
|
|
Dorayme, sounds like you're havin' the same kind of Friday I am! :P Thanks for the links. I checked 'em out and was impressed by the generator, but realized that perhaps my rounded boxes aren't as straight-forward as I thought. My layout calls for a lightly shaded box with a darker stroke around the edge -- something the generator can't pull off. I'm not even sure it can be pulled off. But I appreciate your input. |
You need to be handy with Photoshop or Fireworks or the like if
you want to vary the plain colours that the generator generates.
Look at the code on the url I made for you, and look at the
little images, you need to vary those to suit your purposes, not
the dimensions so much as the fill, perhaps even the feathering
transitions (blow image up temporarily on screen to manipulate).
But the code you find at that link should be basically get you
going...
<http://netweaver.com.au/test/roundCnr/roundCnrExperiment.html>
(Please quote the relevant bits of what you are replying to
everyone can follow along. There are a rreal lot of people that
hang on my every word here and do not want to miss a single thing
I do or say...)
I had a terrible Friday! Maybe these antibiotics will fix it...
cough splutter...
Basically, you want a border around the rounded corner box, yes?
perhaps this has been done already. I reckon it would not be too
hard to do... If I get time to fiddle about...
--
dorayme
#8
| |||
| |||
|
#9
| |||
| |||
|
|
Searching the web, there seems to be a myriad of ways to achieve rounded corners on a fixed-width div. I'm looking for suggestions on the simplest, most straight-forward method of achieving this. None of those myriad appealed to you? |
--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
#10
| |||
| |||
|
|
On 2007-10-19, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote: [...] http://netweaver.com.au/test/roundCn...xperiment.html This looks doesn't look so good in Firefox. The problem seems to be that you're setting "font-size: 1px; height: 1em" on the divs that contain the curved bits. If the font-size is 1px then 1em should be about 1px, so Firefox looks right to me. But Konqueror and Opera both make those boxes much higher. |
changed a few things I thought needed more fluid treatment... I
looked in Opera and Camino, you are right, it was bad! Hope it it
better now, I just put the font-size concerned into em without
thinking further about it, it seems to work now.
--
dorayme
|
« Previous Thread
|
Next Thread »
| Thread Tools | |
| Display Modes | |
Linear Mode
| |
Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.