HTML-речевая разметка

Question

fyi: я работаю над разметкой HTML для некоторых речевых пузырей.
Причина этой сложной разметки заключается в том, что речевой пузырь должен расти вместе с его содержимым.

Итак, прежде всего, мой недавнийразметка:

<div class="speachbubble">
<div class="topbar">
    <div class="corner top-left"></div>
            <div class="top"></div>
            <div class="corner top-right"></div>
    <div class="clear"></div>
</div>
<div class="middlebar">
    <div class="left"></div>
            <div class="content">HERE iS SOME TEXT</div>
            <div class="right"></div>
    <div class="clear"></div>
</div>
<div class="bottombar">
    <div class="corner bottom-left"></div>
            <div class="bottom"></div>
            <div class="corner bottom-right"></div>
    <div class="clear"></div>
</div>

На загруженной картинке слева вы видите весь речевой пузырь.Правая сторона показывает расщепленную графику. Значит, содержание в речевом пузыре остается динамичным по своей длине.

Я очень плохо разбираюсь в сложных вещах CSS, может, кто-то может мне помочь?:( БОЛЬШОЕ СПАСИБО!

PS: Все, что должно быть написано БЕЗ CSS3!

Answer 1

Вам не нужна сложная разметка, чтобы сделать ее «растущей» вместе с текстом, а пузырь речи - это НЕ CSS3 (кроме закругленных углов). В приведенном ниже примере все CSS1 за исключением селектора «: after», который является CSS2

проверить эту скрипку: http://jsfiddle.net/FbHVk/3/

или посмотрите на приведенный ниже код HTML и CSS:

HTML:

<span class="bubble"> this is some text</span>

CSS:

.bubble{
   position:relative;
   padding: 10px;
   background: #AAAAFF;
}

.bubble:after{
   position:absolute;
   content: ""; 
   top:15px;right:-10px;
   border-width: 10px 0 10px 15px;
   border-color: transparent  #AAAAFF;
   border-style: solid;
 }​

Answer 2

Спасибо за ответ.Я немного изменил его для двух разных людей.

http://jsfiddle.net/FbHVk/73/

<style type="text/css">
    .bubbleright {
        position:relative;
        padding: 10px;
        background: #ddd;
        margin: 5px 5px;
        max-width: 250px;
        left: 50px;
    }

    .bubbleright:after{
        position:absolute;
        content: ""; 
        top:15px;right:-10px;
        border-width: 10px 0 10px 15px;
        border-color: transparent  #ddd;
        border-style: solid;
     }

    .bubbleleft{
        position:relative;
        left: 15px;
        padding: 10px;
        background: #aaa;
        margin: 5px 5px;
        max-width: 250px;
    }

    .bubbleleft:before{
        position:absolute;
        content: ""; 
        top:15px;left:-10px;
        border-width: 10px 15px 10px 0px;
        border-color: transparent  #aaa;
        border-style: solid;
    }

</style>

<div class="bubbleleft">
  I say something
</div>

<div class="bubbleright">
  So does he
</div>

Answer 3

Теоретически вам нужна только верхняя полоса и нижняя полоса. Если вы поместите изображения в середину, они не будут расти вместе с текстом. Сделайте всю верхнюю панель одним изображением, а нижнюю - другим, и установите их в качестве фона для topbar и bottombar соответственно. Затем вам нужно определить ширину для speechbubble, равную ширине изображений, используемых для topbar и bottombar. Возьмите ширину из изображений, которые вы использовали бы справа и слева и поместите их как padding-right и padding-left в ваш текст соответственно. Это позволит вам поддерживать эффект закругленного угла и увеличивать содержание.

Answer 4

Почему вы используете jQuery с его плагином

Это экономит ваше время, попробуйте это:

qTip