I'm new with CSS; can someone help me get this effect :
- text with colored borders (if possible with rounded corners), colored
background or picture and controlable margins (see upper picture in the
link ). All I could get is the uggly thing under:
http://www.rentonic.com/borders/model.html
Thanks!
Olaf
Scripsit -:
> I'm new with CSS; can someone help me get this effect :
> - text with colored borders (if possible with rounded corners),
If you want rounded corners, you have three options:
1) Use a table, as people have often used for such purposes (a 3 by 3 table,
with images in the corner cells, etc.).
2) Use -moz-border-radius, accepting the fact that browsers other than
Mozilla won't round your corners.
3) Stop wanting them. :-)
> colored background or picture and controlable margins (see upper
> picture in the link ). All I could get is the uggly thing under:
> http://www.rentonic.com/borders/model.html
Apart from the rounded corners issue, this is rather easy. You have set
border-style to groove, and that's what you get. You probably want to set
border-style: solid. And you need to add padding to the p element, e.g.
padding: 0.5em 1em. You also need to modify the color value to get the one
you have in the picture.
--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
Jukka K. Korpela wrote:
> Scripsit -:
>
>> I'm new with CSS; can someone help me get this effect :
>> - text with colored borders (if possible with rounded corners),
>
> If you want rounded corners, you have three options:
> 1) Use a table, as people have often used for such purposes (a 3 by 3
> table, with images in the corner cells, etc.).
> 2) Use -moz-border-radius, accepting the fact that browsers other than
> Mozilla won't round your corners.
> 3) Stop wanting them. :-)
There is a #4, using 4 corner images within with positioning, but is a
bit "ugly" markup wise.
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Jonathan N. Little wrote:
> Jukka K. Korpela wrote:
>> Scripsit -:
>>
>>> I'm new with CSS; can someone help me get this effect :
>>> - text with colored borders (if possible with rounded corners),
>>
>> If you want rounded corners, you have three options:
>> 1) Use a table, as people have often used for such purposes (a 3 by 3
>> table, with images in the corner cells, etc.).
>> 2) Use -moz-border-radius, accepting the fact that browsers other than
>> Mozilla won't round your corners.
>> 3) Stop wanting them. :-)
>
> There is a #4, using 4 corner images within with positioning, but is a
> bit "ugly" markup wise.
>
Here is a fifth method, which don't use images
http://www.html.it/articoli/nifty/nifty1.html
seems to work ok in Opera, gecko (SeaMonkey), khtml (Konqueror) and MSIE (6).
--
//Aho
Kiitos and thanks to all!
I tried #3 but I it didn't work out, I'm too stubborn :)
#5 is almost perfect, but I think it has no borders, I don't know if you can
add them??.
The solutions with images seem not to adjust well with changes in the text
size so I suspect awful results when you change the browser settings.
I also found this #6
www.webcredible.co.uk/user-friendly-resources/css/css-round- corners-borders.shtml
but I couldn't make it work yet, and I don't know yet if you can change the
background color.
So if someone has a hint..
thanks to all,
"J.O. Aho"
news:5bqtecF2ulko6U1@mid.individual.net...
> Jonathan N. Little wrote:
>> Jukka K. Korpela wrote:
>>> Scripsit -:
>>>
>>>> I'm new with CSS; can someone help me get this effect :
>>>> - text with colored borders (if possible with rounded corners),
>>>
>>> If you want rounded corners, you have three options:
>>> 1) Use a table, as people have often used for such purposes (a 3 by 3
>>> table, with images in the corner cells, etc.).
>>> 2) Use -moz-border-radius, accepting the fact that browsers other than
>>> Mozilla won't round your corners.
>>> 3) Stop wanting them. :-)
>>
>> There is a #4, using 4 corner images within with positioning, but is a
>> bit "ugly" markup wise.
>>
>
> Here is a fifth method, which don't use images
> http://www.html.it/articoli/nifty/nifty1.html
>
> seems to work ok in Opera, gecko (SeaMonkey), khtml (Konqueror) and MSIE
> (6).
>
> --
>
> //Aho
- wrote:
> Kiitos and thanks to all!
>
> I tried #3 but I it didn't work out, I'm too stubborn :)
> #5 is almost perfect, but I think it has no borders, I don't know if you can
> add them??.
in worst case scenario you could try to have to "boxes" and put them over each
other, the one in the bottom a pixel bigger, far from an optimal solution.
There are quite many tricks for rounded corners, but I guess those with image
backgrounds may be the best.
--
//Aho
- wrote:
> Kiitos and thanks to all!
>
> I tried #3 but I it didn't work out, I'm too stubborn :)
> #5 is almost perfect, but I think it has no borders, I don't know if you can
> add them??.
> The solutions with images seem not to adjust well with changes in the text
> size so I suspect awful results when you change the browser settings.
> I also found this #6
> www.webcredible.co.uk/user-friendly-resources/css/css-round- corners-borders.shtml
> but I couldn't make it work yet, and I don't know yet if you can change the
> background color.
> So if someone has a hint..
>
> thanks to all,
Here is one way:
http://www.sarroukhs.f2s.com/roundedcornerbox/
The size of the box is contrained by the size of the images but you
could make the images /much/ larger before the byte size becomes
unreasonable.
<-> wrote:
> Kiitos and thanks to all!
What is a kiito[s]?
--
Blinky RLU 297263
Killing all posts from Google Groups
The Usenet Improvement Project: http://blinkynet.net/comp/uip5.html
Blinky the Shark wrote:
> <-> wrote:
>> Kiitos and thanks to all!
>
> What is a kiito[s]?
They're a kind of crunchy chip made of corn, seasoned with just a hint
of paprika. Dee-lish!
Actually, I'm wondering if "kiitos" isn't OCRed and dully [sic]
spell-check-corrected from "kudos".
I have no third explanation.
--
John
Blinky the Shark wrote:
> <-> wrote:
>> Kiitos and thanks to all!
>
> What is a kiito[s]?
It's a Finnish word that means thanks (singular: kiitos)
If you want to know more about Finnish, take a look at this link
http://www.idiocentrism.com/squib.finn2.htm
--
//Aho
John Hosking wrote:
> Blinky the Shark wrote:
>> <-> wrote:
>>> Kiitos and thanks to all!
>>
>> What is a kiito[s]?
>
> They're a kind of crunchy chip made of corn, seasoned with just a hint
> of paprika. Dee-lish!
>
> Actually, I'm wondering if "kiitos" isn't OCRed and dully [sic]
> spell-check-corrected from "kudos".
I thought of "kudos", too, but wrote off the idea, even though it works
in context.
> I have no third explanation.
I can top that -- I don't have any fourth or fifth explanations. ;)
--
Blinky RLU 297263
Killing all posts from Google Groups
The Usenet Improvement Project: http://blinkynet.net/comp/uip5.html
J.O. Aho wrote:
> Blinky the Shark wrote:
>> <-> wrote:
>>> Kiitos and thanks to all!
>>
>> What is a kiito[s]?
>
> It's a Finnish word that means thanks (singular: kiitos)
Kiitos.
--
Blinky RLU 297263
Killing all posts from Google Groups
The Usenet Improvement Project: http://blinkynet.net/comp/uip5.html
Kiitos is 'thanks!' in finnish language, as my first help came from a Finn.
(I can speak some finnish)
"Blinky the Shark"
news:slrnf5gtrs.9m2.no.spam@thurston.blinkynet.net...
> <-> wrote:
>> Kiitos and thanks to all!
>
> What is a kiito[s]?
>
>
> --
> Blinky RLU 297263
> Killing all posts from Google Groups
> The Usenet Improvement Project: http://blinkynet.net/comp/uip5.html