Jump to content

Curved border help


JasonDavis

Recommended Posts

Hi all, please reference my site for my issue:

http://www.jasonrobertdavis.net/cc/

 

I used this site ( http://www.roundedcornr.com/ ) to generate some curved borders for myself, and realized in the process I'm missing something fundamental about CSS classes and DIVs.

 

The HTML and CSS works properly, but I'm not satisfied to use someone else's code until I understand why this works. I cleaned it all up and still didn't get why it works.

 

Questions:


  1.  
  2. The HTML code only has DIVs for roundedcornr_top, roundedcornr_bottom, and roundedcornr_content. How on earth are the rest of the curved borders even showing up?
  3. After the roundedcornr_bottom DIV in the HTML code, there is a blank DIV section. If I remove that, the bottom right corner vanishes. Why? If nothing is in the DIV, how is it even doing anything?
  4. In the CSS code, there are two classes that have the word DIV after them (.roundedcornr_top div and .roundedcornr_bottom div). What is that all about? What does using the word DIV in a class definition in CSS mean?

 

Thanks all for any help.

 

Jason

Link to comment
Share on other sites

If i were you i wouldn't use images to create rounded corners for your div. Have a read up about css3. Most browsers support it now. I know firefox and chrome do, am pretty sure Safari does and IE 9 supports some css3, am sure it does border radius.

 

To get you started my mate has created a site that will generate code for you, and trust me it's a lot easier to understand than using images! The link is here

 

There is also ways you can set your css so that if the browsers doesn't support css3 then use images, but i'd not bother messing around with that and just use css3. In my view so what if some people using an old version of IE see square corners?!?! Serves that right for using a rubbish browser :lol::lol::lol:

Link to comment
Share on other sites

1) There are background images for 2 of the corners on roundedcrnr_top and roundedcornr_bottom, and there are also two background images on the div within those two rounded corner divs.

 

2) There is nothing in those divs, but they have a background image in them that creates a corner.

 

3) Using ".roundedcornr_top div" just targets any div elements within .roundedcornr_top. It's not part of the class, but referring to a div element within something that has the correct class.

 

I personally would be hesitant to use CSS3 for rounded corners unless you don't mind that a majority of your audience who uses IE won't be able to see them (and would see square corners instead. If you need to keep it consistent, stick to your current method for now.

 

According to http://www.w3schools.com/browsers/browsers_explorer.asp, only 1.1% of users are currently using IE9. That means that 98.9% of users (anyone still using IE6-8) can't see CSS3 based rounded corners. I'm sure that number will change over time, but just keep that in mind.

Link to comment
Share on other sites

Yea, I'm hesitant to use CSS3 to do this because of the legacy IE users. I've done it before, but this is a redesign of an existing site that uses corners. The corners were previously accomplished with tables, so I need to trash that method.

 

Ben, thanks for the clarity on 2 and 3. So essentially, with that, we are applying TWO background images in different positions to the same DIV, right? Kind of a sneaky workaround to do that?

Link to comment
Share on other sites

Hello,

 

Here are your two best options. If css3 use http://css3pie.com/. If images you use 3 images 4 dives. Images are top, mid, bot.jpg. Top div holds top.jpg, mid holds mid.jpg with repeat-y, and bot div holds bot.jpg and nested in the the middle is content div which holds the padding. This is a fixed width rounded corner that will extend length wise as much as needed. If you need a flexible width box then you need about 8 images/divs.

Edited by Eric
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...