Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Software - Troubleshooting and Discussion > Developer Center > Rounded corners easy?

Rounded corners easy?
Thread Tools
timmerk
Mac Elite
Join Date: Jan 2001
Status: Offline
Reply With Quote
Jan 12, 2006, 02:15 AM
 
Hi,

How hard would it be to add rounded corners to my site, http://referralaccelerated.com/ ? I want it to have a raised look, similar to macnn.com. I am mostly concerned with an easy upgrade, and if it works in winIE, firefox, safari, etc.

Thanks!
     
Sage
Mac Elite
Join Date: Apr 2003
Location: SoCal
Status: Offline
Reply With Quote
Jan 12, 2006, 02:36 AM
 
Are you asking how to make round corners in Photoshop/whatever, how to layer them in the site itself using CSS, or both?
     
timmerk  (op)
Mac Elite
Join Date: Jan 2001
Status: Offline
Reply With Quote
Jan 12, 2006, 02:45 AM
 
I was thinking CSS, but now that I think about it, I would need help in Photoshop as well. I'm really not a frontend designer as you can tell from the site. ;-)
     
Sage
Mac Elite
Join Date: Apr 2003
Location: SoCal
Status: Offline
Reply With Quote
Jan 12, 2006, 03:00 AM
 
Well, I can’t help too much with Photoshop, since I’m a Fireworks guy (makes it dead-simple to create rounded corners), but for the CSS, I can point you to this ALA article. Basically, it’s just a matter of hooking the background-images onto something. Good luck!

(BTW, toning down the intensity of that yellow will do a lot of good. )
     
Chuckit
Clinically Insane
Join Date: Oct 2001
Location: San Diego, CA, USA
Status: Offline
Reply With Quote
Jan 12, 2006, 05:13 AM
 
Yeah, you can't really write rounded corners into your CSS. You have to make images of what the corners should look like rounded and put those images at the corners of your box. But it's not too difficult. And since it's just images, it's one of the best-supported features on the Web! I used to do it with GraphicConverter back when I was 12 or so.
Chuck
___
"Instead of either 'multi-talented' or 'multitalented' use 'bisexual'."
     
Chris O'Brien
Grizzled Veteran
Join Date: Nov 2003
Location: Hebburn, UK
Status: Offline
Reply With Quote
Jan 12, 2006, 08:04 AM
 
Well, if you're only going for gecko support you could take a look at -moz-border-radius
Just who are Britain? What do they? Who is them? And why?

Formerly Black Book
     
registered_user
Dedicated MacNNer
Join Date: Nov 2001
Location: Are Eye
Status: Offline
Reply With Quote
Jan 12, 2006, 08:18 AM
 
You may or may not like this technique (that's been a debate), but it's pretty easy as far as things go:

Nifty Corners: http://pro.html.it/articoli/id_599/i...pag_1/pag.html
     
- - e r i k - -
Posting Junkie
Join Date: May 2001
Location: Brisbane, Australia
Status: Offline
Reply With Quote
Jan 13, 2006, 04:02 AM
 
OT, but the message that the site doesn't render correctly in IE is only needed for IE-users, correct? Why not make sure that only IE-users see it? It's easy, just enclose it in conditional tags (that only IE understands anyway), like this:
[html]<!--[if IE]><p>With this site, each user can get about <strong>$6700</strong> worth of products for free! </p>
<p>Note: This site does not render correctly in Internet Explorer. Please use Firefox if this bothers you:</p>
<script type="text/javascript"><!--
google_ad_client = "pub-7889412495387665";
google_ad_width = 110;
google_ad_height = 32;
google_ad_format = "110x32_as_rimg";
google_cpa_choice = "CAAQ_-KZzgEaCHfyBUS9wT0_KOP143Q";
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script><![endif]-->[/html]

Also consider installing the IE7 JavaScript extension if you have problems getting IE to render your site correctly.

[ fb ] [ flickr ] [] [scl] [ last ] [ plaxo ]
     
timmerk  (op)
Mac Elite
Join Date: Jan 2001
Status: Offline
Reply With Quote
Jan 13, 2006, 04:34 AM
 
Originally Posted by - - e r i k - -
OT, but the message that the site doesn't render correctly in IE is only needed for IE-users, correct? Why not make sure that only IE-users see it? It's easy, just enclose it in conditional tags (that only IE understands anyway), like this:
[html]<!--[if IE]><p>With this site, each user can get about <strong>$6700</strong> worth of products for free! </p>
<p>Note: This site does not render correctly in Internet Explorer. Please use Firefox if this bothers you:</p>
<script type="text/javascript"><!--
google_ad_client = "pub-7889412495387665";
google_ad_width = 110;
google_ad_height = 32;
google_ad_format = "110x32_as_rimg";
google_cpa_choice = "CAAQ_-KZzgEaCHfyBUS9wT0_KOP143Q";
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script><![endif]-->[/html]

Also consider installing the IE7 JavaScript extension if you have problems getting IE to render your site correctly.
Thanks, that is a good idea. BTW, it really does render correctly in winIE now (I worked around the bugs), but I left it there because it is making me lots of money! :-)
     
timmerk  (op)
Mac Elite
Join Date: Jan 2001
Status: Offline
Reply With Quote
Jan 13, 2006, 04:40 AM
 
Originally Posted by registered_user
You may or may not like this technique (that's been a debate), but it's pretty easy as far as things go:

Nifty Corners: http://pro.html.it/articoli/id_599/i...pag_1/pag.html
I'm going to try to implement it right now. I'll let you know how it turns out! Thanks all!
     
   
Thread Tools
 
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Top
Privacy Policy
All times are GMT -4. The time now is 09:32 PM.
All contents of these forums © 1995-2017 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.8 © 2000-2017, Jelsoft Enterprises Ltd.,