Мне трудно заставить 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;
}
Спасибо!