Boxes and Tables with Rounded Corners
Posted by RobElliott on 24 Feb 2009 10:43, last edited by GoVegan on 09 May 2010 05:32
Tags: box boxes corner css elastic expandable how-to rounded table tables
What we are trying to achieve
One of the features of CSS3 is the ability for users of Firefox and Safari to see boxes and tables with rounded corners without the developer using lots of CSS.
This solution has an elastic CSS layout so that both the header and main content expand or contract (in height, not width) depending on the text you enter.
This solution just uses a small amount of CSS and some wiki syntax using divs.
For the CSS for tables with rounded corners please see the comments further down the page.
How to do this
CSS
The CSS properties that provide the rounded corners are as follows:
Firefox
-moz-border-radius: values;
Safari
-webkit-border-radius: values
In your custom CSS add the following CSS code. As always you can change the background and text colours to blend in with your site.
.box-container {
height: auto;
width: 350px;
float: left;
padding:35px;
}
.box-header h2 {
background: #DDDDDD;
border: 1px solid #ccc;
padding: 10px 15px;
-moz-border-radius: 2em 0;
-webkit-border-radius: 10px;
margin:-15px;
padding-top: 15px;
padding-left: 15px;
width: 333px;
border-left-width: 0px;
border-top-width: 0px;
color: #468259;
}
.box {
background: #D8E7EC;
border: 1px solid #ccc;
padding: 15px;
-moz-border-radius: 2em 0;
-webkit-border-radius: 10px;
width: 333px;
}
Wiki syntax
Then in your wiki page you need to enter some divs to hold the header and content boxes and your text. You will see that in this example I have added the header box inside the box which will contain the content text in order to achieve the effect I wanted.
[[div class="box-container"]]
[[div class="box"]]
[[div class="box-header"]]
++ Your header text
[[/div]]
Your content text
[[/div]]
[[/div]]
Make sure you use the ++ h2 syntax for the header or the header text won't render properly. In an update to this how to I will provide an alternative that doesn't limit you to using the h2 header.
Corner styles
By changing the -moz-border-radius: 2em 0; line in your CSS you can change the style of the corners
Internet Explorer
This solution works for users with Firefox 3 and Safari but not with Internet Explorer. IE users will see a square header and content box which still expands depending on the content.
Links
http://www.the-art-of-web.com/css/border-radius/
http://community.wikidot.com/howto:design-your-own-css-theme
Author
RobElliott. Please visit his/her userPage.
Rate this solution
If you think this solution is useful, please increase the rating.
Related articles
Comments
Rob,
Thanks for this - it's very cool and I've already plugged it into my private wiki at work.
One thing you should clarify: As written, you must use h2 text in the header (++ Header Text) or the header section won't render correctly. This tripped me up for a second.
Which prompts this question: Is there a "method to your madness" in limiting the header to h2 only? Changing the CSS to:
would allow you to place any text with any wikidot markup you want. Or am I missing something?
Thanks again. I have a feeling we're going to see a lot of this kind of formatting on many sites. I also see a lot of potential for combining this with live templates to make it easy to have it ripple through a whole site.
-Ed
Community Admin
Ah yes I will clarify the text regarding using h2. But there was no method whatsoever in my madness and you've not missed anything. I had just tried it with h2 and hadn't looked at better alternatives.
Thanks for the comment.
Rob
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Thanks, Rob. This is really great stuff. Just a question: is there any way to apply this method to tables as well?
Eduardo R. Ribeiro
http://www.etnolinguistica.org
My search through various CSS3 sites indicates that there probably isn't a way to achieve this with tables.
Rob
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
I can remember - I had a page written - where such a box was surrounding div's ( block's) with images -
Like on the wikipiano it was done on the fornt page!
And in prior time on the main page for featured sites!
Without ANY CSS! Only with images - means this can work with tables ( are blocks too) .
I need only to find my own pages….
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
Í found it!
http://community.wikidot.com/start-featured2
Have a look at the source code!
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
Thanks, Helmut! So, is that the trick used in Wikidot's official wiki? There, all tables have rounded corners…
Eduardo R. Ribeiro
http://www.etnolinguistica.org
Yes, I can remember , i copied the trick from the official ( older) featured site tables - when they were not yet with 90 degrees corner build ( as now).
And I can not remember where I get the code - the official wikidot com has no page options to view the source.. I can rememeb I had a look on the open source wiki… or I get the code from wikpiano ?
The only bad issue is the fact that such tables & Div#s has to be defined exact in the same size as the background images - they cannot change their width and height with changing the zoom factor of the browser-window.
It is an interesting but conventional task to build such tables and div's with conventional images & tricks..
@ Kawina: can you remember: http://community.wikidot.com/forum/t-112862/the-problem-with-signatures#post-336196 ?
and Hartnells answer:
(I copy it here into my post: )
In that case, it's a table which splices the image into smaller parts.
The same trick I believe is used in the code I have copied into the http://community.wikidot.com/start-featured2 :
Block with round corners
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit.
Maecenas in urna. Curabitur hendrerit risus vitae ligula.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit.
Maecenas in urna. Curabitur hendrerit risus vitae ligula.
Here is the code for this:
Make your zoom factor higher ( with "control" + "+") and you will see the pixel sizes of the background image are the same , but the fonts get higher and higher - and the text goes outside the box. - The size of the image is not changing.
On the official wikidot main site it is the same - on a high zoom factor the text goes outside….
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
@Helmuti
«… is the fact that such tables & Div#s has to be defined exact in the same size as the background images …»
Actually, that is not quite true. It depends on how you slice the images and borders. Also how you split the tables or divs. If you have compose the image to its composite parts, then both tables and divs can resize. Honestly while I use this frequently, it is more trouble than it is worth and not very elegant, but provides great results. Using this configuration with divs gets the trick done:
This is with CSS already defined. I use it on my site for my header which is almost perfectly resizable.
If you don't want to use separate CSS, but style attributes, you may use the following:
As I said, its ugly, but it works. I do prefer the solution above, but this one shows up the same in all browsers, as well.
@strath
Thanks! That really is awesome and useful.
But you can have a LOT of fun with many other elements! I've been playing around on one of my development sites. I might have to call this theme "Dizzy" since it has so many curves…
Obviously, I've still have a lot to clean up, but I actually think this playing around could turn into a nice looking theme.
I thought I'd share what I've got to get your creative juices flowing for other ideas.
-Ed
Community Admin
Ed, hehe that's a nice use of the rounded corners, even if the pink is a bit…er..shocking. I think you've mastered -moz-border-radius! The thing I like about it is that it degrades well for IE users, they still get a nice box just without the rounded corners. It means we can develop sites for FF without worrying that this aspect will be broken in IE.
That's a useful solution as well helmuti. This has developed into quite an interesting thread.
Rob
Edit: talking about degrading to IE, my wife's bank in the UK is Abbey and if you log in to online banking using FF3.0.6 a notice comes up saying that although it is possible to use older browsers they recommend using a modern browser like Internet Explorer! Numpties.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
"My search through various CSS3 sites indicates that there probably isn't a way to achieve this with tables"
I was being daft and not thinking: of course there is a way of doing this with tables. It works with both ordinary tables and something like ListPages as shown in the image below:
This uses the following CSS:
In this example I have removed all the borders from the table data but some could be added back in, perhaps the bottom border would be one I would use.
Rob
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
And as another example I have now put the ListPages module into the divs using the original box css:
which gives:
This is just a quick example and I haven't tidied up the link background colour, but I hope it shows some of the ways ways that rounded corners can work with boxes and tables.
Rob
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
For those out there not all that familiar with CSS, it should be noted that changing the -moz-border-radius line will only change how the box appears in Firefox & other Mozilla browsers. Changing the -webkit-border-radius line will alter the appearance in Safari, Google Chrome, iPhone and other browsers that use Apple's Webkit.
Bryce
BMC Creative | RoaringApps | @brycecammo
Hi Bryce.
Nice theme, has it gone a bit wrong?
Not wrong per se, it just took a while for me to work out why when I changed the -moz- line nothing happened (I use safari). I'm still tweaking the CSS of the theme in my private site.
BMC Creative | RoaringApps | @brycecammo
I have clarified this in the main text.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Nice css codes explanation for beautiful tables.