how to apply rounded corners to every div

[seco]

Hi

i have alot of divs that ha a specific class and i have to add images and so on to make it rounded

im asking if i can apply a css style to make the div rounded instead of iterating by hand which takes alot of time

 

thanks in advance.

 

[datafan]

Something like this? http://www.tamstouch.com

 

You can view the source, the .gif files are the 4 rounded corners, (2 are called in the external style sheet) it's the only way I know how to do it. I don't think there is a simple way. If you want the style sheet file let me know. I downloaded it from somwhere else on the web and have been tweaking it for different things. 

 

I am in the process of building another one here http://www.goodstylist.com/files/test/new_page_top.php

 

And the "Check Out Our Top rated Stylists" pain in the middle of this page is also using the code mentioned above http://www.goodstylist.com/

[seco]

sounds like no way and have to use images ok let me see the css file that do it anyway

thanks in advance

 

[datafan]

I am a newb to css so if you find a better way post it please...

 

.roundcont {
width: 100%;
background-color: #f90;
color: #fff;
}

.roundcont p {
margin:10px 10px;
}

.roundtop { 
background: url(../images/tr.gif) no-repeat top right; 
}

.roundbottom {
background: url(../images/br.gif) no-repeat top right; 
}

img.corner {
   width: 15px;
   height: 15px;
   border: none;
   display: block !important;
}

[AndyB]

http://www.cssjuice.com/25-rounded-corners-techniques-with-css/ - lots to choose from

 

and without any images - http://www.spiffycorners.com/

[bronzemonkey]

It really depends on your requirements:

 

No images? Liquid box? Fixed box? Needs to be rounded even for users with javascript disabled?

 

Every situation requires different solutions and varying amounts of superfluous markup. The worst of all is to use images within the markup. Disable styles on the pages linked in the first reply and you'll see just one reason why.

[datafan]

Why would someone have styles disabled? CSS is everywhere and I don't see it going away. There is a point where you have to decide, am I going to contunue to cater to the minority or make them upgrade their browsers with rest of the world. 

[bronzemonkey]

Why would someone have styles disabled? CSS is everywhere and I don't see it going away. There is a point where you have to decide, am I going to contunue to cater to the minority or make them upgrade their browsers with rest of the world. 

 

Why have styles disabled? Why have images disabled? Why have javascript disabled? Why use a screen reader?

 

It doesn't matter what you think or if you can't understand why these situations would arise, it matters how different people choose (or have) to browse the internet. The internet isn't about catering to the majority and ignoring the numerous other minorities, it is about inclusiveness - both for moral and business reasons. Using purely presentational images in your markup in order to produce rounded corners is not only unsemantic but unnecessary. It can be done better without compromising.

[dbrimlow]

A "DIV" is simply an HTML placeholder element ... CSS doesn't apply styles to DIVS, it applies styles to elements using "Selectors" like class, ID, type, universal, etc.

 

I see this over and over in Forums when beginners talk about css - "I have a Div that has a background of..." and so on.

 

I think we, as helpers, need to nip this in the bud as soon as we see it so they can lose that habit and start to learn how to think of css as using selectors to style elements. I know for me it was a huge breakthrough in understanding the difference in html,  css and semantic markup.

 

One should actually avoid using DIVs whenever they are unnecessary.

 

If you can have the same effect simply by adding a class to a tag element (like p or h2 or ul) , you don't NEED to ALSO wrap it in divs. Divs simply allow you to group elements within a common container.

 

The mistake beginners make seems to be thinking of Divs as the actual method of applying css to an element - whereas it is just another html element in and of itself.

 

How many beginners do we see who limit selects that could be universal by naming them with div as a prefix in the css? I think this is the reason ... they don't see div as apart from CSS.

 

 

 

 

 

[datafan]

ahh, ok. Examples please? I don't want to require the user to have javascript enabled, and I don't have control over what my web host has loaded on their server.

 

Perhaps we should all go back to simple text pages? They load a lot faster and work on any browser.

[AndyB]

see the second example URL I posted for the js-free alternative

[seco]

yea but can't control the radius

[bronzemonkey]

Perhaps we should all go back to simple text pages? They load a lot faster and work on any browser.

 

Why do that when a lot of people use browsing equipment that allows them to access a fuller experience? The point is that your website should gracefully degrade, make sense without style or presentational elements, and be accessible to people who are blind, can't use a mouse, disable images, etc.

 

Perhaps you should read about web accessibility and the W3C Web Accessibility Initiative - http://www.w3.org/WAI/ - rather than making facetious comments.

[TheFilmGod]

dbrimlow, good words of advice -

 

Let me explain what he was saying:

 

Let us say you want a box w/ a black border that says "hello" and Welcome, how are you?" The text should be centered with "hello" size 18px and "welcome, how are you" w/ size 12px.

 

You might do this:

 

/* Css Declarations */
#box {
border: 1px solid black;
padding: 5px;
}
#hello {
text-align: center;
font-size: 18px;
}
#text {
text-align: center;
font-size: 12px;
}

<!-- HTML CODE -->
<div id="box">
<div id="hello">hello</div>
<div id="text">Welcome, how are you?</div>
</div>

 

Instead you should:

 

/* Css Code */
#box {
border: 1px solid black;
padding: 5px;
text-align: center;
}
#box h1 {
font-size: 18px;
}
#box p {
font-size: 12px;
}

<!-- HTML CODE -->
<div id="box">
<h1>Hello</h1>
<p>Welcome, how are you?</p>
</div>

 

Once you learn to do this you will create 100 X cleaner and more semantic code.

[dbrimlow]

Perhaps we should all go back to simple text pages? They load a lot faster and work on any browser.

 

Actually, that's EXACTLY how everyone SHOULD start when creating a new web page.

 

It is SO much easier to craft a layout using css to an existing, perfectly semantic text-only document.

 

I advise my interns to not even THINK about how a page will look with styles; create the page using nothing but headers, paragraphs, lists, etc. as if it were a word presentation.

 

Begin with H1 for the site title, H2 for the page title, UL for the navigation, P for text, H3 for sub-headers and ul for footer lists with p for copyright and company name.

 

If you can't understand what the page is about using text only ... than neither can Search Engine bots or people with disabilities.

 

It is EASY to add the most elaborate graphic intensive style in the world to an existing text document ... not so if the document was conceived, designed and crafted only by how it will look using graphics.

 

The killers of many business sites are "conveyance over content" and "form over function".  No business would agree to ignoring ANY potential client/customer just because it is inconvenient for the contractor to build an office that accommodates everyone.

 

[datafan]

I appreciate the insight and examples and yes the constructive criticism as well.

 

 

"Perhaps you should read about web accessibility and the W3C Web Accessibility Initiative rather than making facetious comments."

This is very true. I seem to always find myself in a position of learning something on the fly, hacking it together, and later learning how it works and what my mistakes were.

[bronzemonkey]

I seem to always find myself in a position of learning something on the fly, hacking it together, and later learning how it works and what my mistakes were.

 

I think that's how almost everyone does things! Certainly is for me. Nothing wrong with that approach as long as it always includes the "later learning how it works and what my mistakes were" part.