[haiku-web] Re: CSS notice boxes challenge

Hi Charlie,

Charlie Clark wrote:

Am 16.06.2008 um 21:05 schrieb Jorge G. Mare:
Mea culpa Remi. :) I did not mean to imply that you have to use the same method or code as the source of inspiration that I pointed to. :)
Instead, I look at this from the user point of view, and I was hoping that there was a way where one could use something like...
<div class="box_warning">Formatting will destroy all the data on your partition.</div> 

or

<div class="box_notice">Welcome to Haiku!</div>
...that would render the text inside a rounded corner box with a background color and icon (to the left of the text?) specific to the note type (warning/notice/etc.).
No, it's just not possible to do it that easily in CSS before CSS 3.0 You end up with fairly clunky div's defining a box to put a background image in with four rounded corners. 

Not so fast. :)
I think I may have found the kind of solution that I was looking for. Please see the following example: 

http://myhaiku.org/css-test/corners.html

This uses Nifty Corners from...

http://www.html.it/articoli/niftycube/

...which relies on a combination of JS & CSS.

The HTML to render each of the boxes in this example are:

<div id="box_plain">Plain box</div>
<div id="box_info">Info box</div>
<div id="box_tip">Tip box</div>
<div id="box_warning">Warning box</div>
The rounded corners seem to render OK in FF2 and 3 as well as on IE5, 6 and 7. 

# Known problem
The icons' transparency don't render properly in IE6 and below, but that can be fixed easily by changing the icon's background to match that of each box background. 

# Room for improvement
- Color: Austin, maybe you can make some recommendations on what color combinations would work better for each box type (info, tip, warning)?
- Icons: any suggestions for the icons? Info and Warning seem appropriate, but we could use something different for the Tip icon.
- Testing in other browsers: if you guys use browsers other than FF and IE, please test and report results. 

Cheers,

Koki

-----------------------------------------------------------------------
haiku-web@xxxxxxxxxxxxx - Haiku Web & Developer Support Discussion List

Other related posts: