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;
}
ありがとう！
- サイ