闪存的好CSS(也就是Rails中的信息消息,OSX中的咆哮)

Question

我很难让CSS工作,就像我希望它用于闪存(当你登录或做某事或什么来确认你的行动时显示的那些小消息,例如在Rails中).

我希望它:

• 生活在任意的div中
• 看起来像一个带有文字的居中框
• 只需要适合文本所需的大小(如果小于指定的最大宽度)或包装文本(如果更大)
• 具有居中或左对齐(或组合)的文本,具体取决于闪光灯(例如,短错误是居中的;更长的操作方式新手入手是左对齐的); 一个额外的CSS类(例如'flash info left')来支持这个就行了
• 在页面上彼此相邻闪烁多次(如示例所示)
• 优选地,由具有围绕文本的类的单个元素组成,而不是由包装元素内的元素内的文本组成
• 最好是YUI CSS兼容和纯CSS(不是JS)
• 适用于IE7 +,FFx 3 +,Safari 3+; 在旧浏览器上工作"足够好"

我见过的大多数CSS都没有做到这一点 - 例如,大多数指定固定宽度,这意味着要么包裹得很差,要么填充太多.

我怎样才能做到这一点？(或者:我为什么不能？)

这是我目前的CSS:

<div class="flash info">
  <span class="close"><a href="AJAX callback">X</a></span>
  Some informational text here that can be closed w/ the X
</div>
<div class="flash error">
  Some other simultaneous error
</div>

.flash {
    text-align: center;
    padding:    .3em .4em;
    margin:     0 auto .5em;
    clear:      both;
    max-width:  46.923em; /* 610/13 */  
    *max-width: 45.750em; /* 610/13.3333 - for IE */
}

.flash.error {
    border: thin solid #8b0000;
    background: #ffc0cb;
}

.flash.notice, .flash.info {
    border: thin solid #ff0;
    background: #ffe;
}

.flash.warning {
    border: thin solid #b8860b;
    background: #ff0;
}

.flash .close {
    float:  right;
}

.flash .close a {
    color:              #f00;
    text-decoration:    none;
}

加分:我用下面的工具提示代码实现了我想要的部分内容; 即,它不能包装.

出于某种原因,除非指定nowrap或宽度,否则默认宽度非常小.我无法弄清楚为什么,或者如何让它以特定的,更宽的宽度包裹(就像我想要用闪光灯一样).

Some text with <span class="tooltip">info <span>i can has info?</span></span> about a word

.tooltip {
  position: relative; /*this is the key*/
    background-color: #ffa;
}

.tooltip:hover{
    background-color: #ff6;
}

.tooltip span {
    display: none
}

.tooltip:hover span { /*the span will display just on :hover state*/
    z-index:        1; 
    display:        block;
    position:       absolute;
    top:            1.6em; 
    left:           0;
    border:         thin solid #ff0;
    background:     #ffe;
    padding:        .3em .6em;
    text-align:     left;
    white-space:    nowrap;
}

谢谢!

• 西

Answer 1

这些都是 Javascript 中通知的有趣尝试，第一个有一个居中通知，也许你可以从中得到启发。

像（mootools）一样咆哮

咆哮（这个真的很好）