Forum Moderators: not2easy
hackers love noodles - errgh tables
i'm doing websites since years and from time to time i fall in love with boxes, espeacially the ones with rounded corners. all the years i made them by using a table with 3 rows and 3 colums and then putting gif images into the corners:
/¦.........¦\
------------
.¦.content.¦.
------------
\¦.........¦/
that worked quite nice but produced a lot of html code: 1 table, 3 tr, 9 td and 4 img tags.
however while switching over to css based designs within the years, i often asked myself, what is a nice way to have the corners appearing round - but only by using one div if possible like:
<div class="rounded-red">content</div>
to get rid of my beloved html 3.2 tables.
i know i'm not the only one who did it like this and if you've got your own solution how to create rounded corners by using css, i'll be glad to know and to found the fan club of the rounded-corner boxes :) .
for me it was clear to have the corners rounded by images, because that's the only way to do so today. since putting <img> tags into the xhtml code only to have an image placed in the corner is not quite nice. on the other hand, the only solution to attach an image onto a <div> is by using the css background property. but when using the background property, you can only apply one image, but i need 4 images, one for each corner.
since the css pseudo classes :after and :before do not work with IE currently in use, there need to be 4 tags at least for applying four cornerimages. if the rounded box has got a fixed width then it could be reduced on 2 tags for two cornerimages.
so i said byebye to "having one css applied div-tag" (the best practise case) and started to create a "some" div solution, which is not as delicious. the good in stepping away from using a table with images is, while using background css properties, all the images are relativly linked to the css file, so writing a box with rounded corners later on is in no way envolved with the location of the file or url later on. even a chunk of code begin generated within a template system or webapplication has not to care about. another plus is the reducement of xhtmlcode needed to be written and the big plus of editing the rounded corner boxes appereances later on.
since css' background property is powerfull, it was quite easy to get results fast. my concept was to create a div on top to take care about the top-left and top-right corners. then there is the content-div which only needs to have the background color and another div is taking care about the bottom-left and -right corners. since i'd like to create a colored box, i only needed inverted corners as gif images "cutting out" the corners counterparts from the colored box. this works because background images are placed over background colors. but how to put two corners into one div without using an <img> tag? my straight answer was to put another two divs into the soupe and applying the images as background again there, too. becaue of the background postition property they are automatically arranged on the right end of the block element.
finishing move
as said, this was fast done and worked like a charme ... until i watched that in IE. urgs. to make a long story short: the fix was to apply a font-size of 0px to the outer div because IE just extends the height for the block element to it's font-size even if there is no char at all in there.
warning: i have not tested this implementation on mac osx, but i guess it will work quite right and no more "hacks" are needed.
finally it's all done with 5 div tags and a css definition useable everywhere. additionally a 6th div can be used as block element around this "rounded box" applying another color or similar.
the code
<style>
.rrto, .rrcn, .rrbo {background-color: red;}
.rrto, .rrto div, .rrbo, .rrbo div {
height: 4px;
background: red url(crn-tl.gif) no-repeat;
font-size: 0px;
}
.rrto div {
background: url(crn-tr.gif) no-repeat top right;
}
.rrbo {
background: red url(crn-bl.gif) no-repeat;
}
.rrbo div {
background: url(crn-br.gif) no-repeat top right;
}
</style><div class="rrto"><div></div></div>
<div class="rrcn">#content#</div>
<div class="rrbo"><div></div></div>
--hakre
.rounded_box {
background: red url(crn-tl.gif) no-repeat top left;
}
.rounded_box div {
background: url(crn-tr.gif) no-repeat top right;
}
.rounded_box div div {
background: url(crn-bl.gif) no-repeat bottom left;
}
.rounded_box div div div {
padding:4px;
background: url(crn-br.gif) no-repeat bottom right;
}
</style><div class="rounded_box"><div><div><div>#content#</div></div></div></div>
It uses only 4 divs instead of 5, and the CSS is a bit cleaner. It doesn't require you to specify a width for all sections if you wish to have a fixed width. The padding can be adjusted based on the size of your images, and the content will not fill in the borders.
You could stick one more div around the content, and then set the background color of that, and the effect will be a full border with rounded corners.
Like this:
<style>
.rounded_box div div div div {
padding:0;
background: white;
}
</style>
<div class="rounded_box"><div><div><div><div>#content#</div></div></div></div></div>
<style>
.tlcorner {
background: red url(cnr_tl.gif) no-repeat;
}
.trcorner {
background: url(cnr_tr.gif) no-repeat top right;
}
.blcorner {
background: url(cnr_bl.gif) no-repeat bottom left;
}
.brcorner {
background: url(cnr_br.gif) no-repeat bottom right;
clear: both;
padding: 10px;
}
</style>
<div class="tlcorner">
<div class="trcorner">
<div class="blcorner">
<div class="brcorner">
Hello I am some text.
</div>
</div>
</div>
</div>
Simple but probably wrong. Its easy for my brain to follow.
It looks almost the same as above but the above method is more refined than my hammer a nail method.
@dcrombie
m$ noticed that and they said they have no plans on this nice feature - what a pitty!
Essentially, the structure is...
<div id="the_box">
<h2></h2>
<div id="the_body">
<p></p>
</div>
<div id="the_footer">
<p></p>
</div>
</div>
The background images are then applied to the following elements...
Top Left = #the_box
Top Right = #the_box h2
Middle = #the_body
Bottom Left = #the_footer
Bottom RIght = #the_footer p
Note that several images are applied to semantic elements (the h2 and the p) making for a little less source code. With a little creativity and some knowledge of the particular structure of the content of your box, this model can be adapted to use even less code in certain situations.
cEM
There's some pretty good stuff mentioned over here about "Nifty Rounded Corners [techpatterns.com]" with no images. The downside is that it uses a little javascript, but it degrades well with JS turned off. The big advantages with this are that it doesn't require any extra elements, and it's entirely scalable. The fact that no images are needed is negated in my mind by the amount of javascript you have to deliver instead.
Then whenever I want a rounded box I create a div, add the 4 spans right at the top, followed by whatever content I want in the box. The four spans are positioned absolutely in the four corners of div. Giving a round cornered div that can also by styled/positioned however you want.
I may have to read the article mentioned above though!
@Mr_Brutal:
in case you mean unique = id, i don't get you wrong, but while using boxes, there are plenty per page so unique might be wrong and i preferred class. that's all about the class/id discussion to say i guess. as usual: correct me if i'm wrong.
[edited by: createErrorMsg at 2:15 am (utc) on Sep. 10, 2005]
About the combination of CSS and javascript, I'm not sure about that. I can definitely see potential with the idea, but then I'm also not sure that's the direction CSS ought to go. You can already do a lot of things by parsing CSS for PHP at the server level, and I'm inclined to think that's about as far as it needs to go as far as mainstream use is concerned.
As far as CSS is concerned, you might call me a "CSS purist in the future-tense." ;) What that means is that I'm all for the elimination of presentational markup, getting rid of hacks, and not using js for presentational purposes, but I don't think the day has yet come that such a goal is 100% attainable in the real world. It's coming, though, and I'm doing everything I know to bring it along. When it comes, I'll be ready for it. In the meantime, I'll (grudgingly) do all the things I just mentioned, sparingly, provided they degrade gracefully and aren't too hard on the old bandwidth bill! ;)
However, as much as I question the general use of javascript for merely presentational purposes, I think it is finally starting to come into its own as a robust programming language. AJAX has incredible possibilities, far beyond what server-side programming could do alone. But then, that has nothing to do with presentation or rounded corners, and thus is another conversation for another time! ;)
Hopefully someone can benefit from the link I posted. I won't claim it's the best solution for everyone, but I do think it's a viable option for some.
Is it necessary that the box's width be fluid? If not you can certainly get away with less coding.
quoting you
Is it necessary that the box's width be fluid? If not you can certainly get away with less coding.
if the rounded box has got a fixed width then it could be reduced on 2 tags for two cornerimages.
:) i think we mean the same. using 2 cornerimages instead of 4 is possible then. but my box ain't fixed width and i wanted to keep the issue general.
Soren Madsen wrote a seminal article...
And, searching for it in Google [google.co.uk] brings up this WW page in #1. It's going to become more and more difficult finding things in Google if WW takes up top spaces for everything. :(
Anyway, finally found the article here. Browsed through it and looked at the final finished product. Ahem, it's broken in Firefox. I know why I go "arrghhh!" whenever I've got to do some CSS.
<added> Removed the links to the article and "finished product" as WW doesn't seem to like the alist-apart (no hyphen) URL, and the swear filter kicks in.
Oddsod, not sure what you're seeing that is broken in FF, but I've used this technique a number of times and it works fine when properly implemented across every non-legacy browser (and several legacy ones) I've ever seen it in. Can you describe what's "broke"? (Note that, with the images Madsen uses, a few of his boxes don't extend the full width of the screen at higher resolutions. This is simply a question of sizing certain images correctly, though, not a shortfall of the CSS.)
cEM
Can't see the same error? Try changing your resolution to 1280x1024. It's even worse at 1600 x 1200. Just when you thought that you could cope with all the quirks and workarounds to get the simplest design working in the major browsers it turns out that it doesn't really work if someone's using a different resolution! What was it I said earlier about the sentiments CSS evokes? Oh, yes, it was aaarrrggghhh!
If these seminal works by people who deserve the greatest respect still get all messed up, what hope have idiots like me got?
I suspect this was because the article was written at a time when 800X600 was a far more predominant screen resolution than it is now (the article is several years old). And, of course, I think the author probably expects that we will create our own images. If you make the upper and lower left hand images at about 1500px wide, you shouldn't experience that particular problem at all. The CSS, however, is rock solid. :)
what hope have idiots like me got?
Lots! ;)
cEM
>> Lots!
Thanks for the encouragement. OK, I'll plod on. But, warning: It may be a while before the term CSS gets me all excited and panting for breath.
It may be a while before the term CSS gets me all excited and panting for breath.
Don't worry, it won't be that long! ;) Seriously, once you work with it for awhile, a few key concepts wil "gel" and you'll be an instant and enthusiastic convert. Just give it a little time for practice - it WILL come, and when it does, you'll be thrilled with the possibilities!
<style type="text/css">
.raised {background: transparent; width:400px;}
.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden; font-size:1px;}
.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}
.raised .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}
.raised .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}
.raised .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;}
.raised .b4b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #999;}
.raised .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #999;}
.raised .b2b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #999;}
.raised .b1 {margin:0 5px; background:#fff;}
.raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}
.raised .b3, .raised .b3b {margin:0 2px;}
.raised .b4, .raised .b4b {height:2px; margin:0 1px;}
.raised .b1b {margin:0 5px; background:#999;}
.raised .boxcontent {display:block; background:#ccc; border-left:1px solid #fff; border-right:1px solid #999;}
</style>
</head>
<body>
<div class="raised">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
put yer content here
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>
</body>
Not all the above may be necessary, just a quick cut n paste post!
