Basically, i'm building a game. In my game I wan't the players to be able to speak with each other. You have a figure, and when you speak, your text goes in a speak bubble div over your character.
My dilemma is, that when i type to much text in the bubble, the bubble expands over the character. So i want the bubble to grow upwards. I've been trying to think of a way to do this in both JS and CSS, but i'd had to give up and ask you guys.
Here's an example: /
HTML
<div class="wrapper">
<div class="character1" style="position: absolute; top: 124px; left: 392px; width: 36px; height: 36px; background-color: blue;">
<div class="bubble"><span>Hi my name is Mads</span></div>
</div>
<div class="character2" style="position: absolute; top: 124px; left: 192px; width: 36px; height: 36px; background-color: blue;">
<div class="bubble"><span>Hi my name is MadsHi my name is MadsHi my name is MadsHi my name is MadsHi my name is MadsHi my name is Mads</span></div>
</div>
</div>
CSS
.bubble {
position: relative;
background-color:#eee;
margin: 0;
padding:2px;
min-width:100px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
box-shadow: 0px 0 3px rgba(0,0,0,0.25);
top: -80px;
}
.bubble:after {
position: absolute;
display: block;
content: "";
border-color: #eee transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-19px;
left:1em;
}
.bubble span {
height: auto !important;
color: #000 !important;
font-family: verdana;
}
Basically, i'm building a game. In my game I wan't the players to be able to speak with each other. You have a figure, and when you speak, your text goes in a speak bubble div over your character.
My dilemma is, that when i type to much text in the bubble, the bubble expands over the character. So i want the bubble to grow upwards. I've been trying to think of a way to do this in both JS and CSS, but i'd had to give up and ask you guys.
Here's an example: http://jsfiddle/tDrNN/
HTML
<div class="wrapper">
<div class="character1" style="position: absolute; top: 124px; left: 392px; width: 36px; height: 36px; background-color: blue;">
<div class="bubble"><span>Hi my name is Mads</span></div>
</div>
<div class="character2" style="position: absolute; top: 124px; left: 192px; width: 36px; height: 36px; background-color: blue;">
<div class="bubble"><span>Hi my name is MadsHi my name is MadsHi my name is MadsHi my name is MadsHi my name is MadsHi my name is Mads</span></div>
</div>
</div>
CSS
.bubble {
position: relative;
background-color:#eee;
margin: 0;
padding:2px;
min-width:100px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
box-shadow: 0px 0 3px rgba(0,0,0,0.25);
top: -80px;
}
.bubble:after {
position: absolute;
display: block;
content: "";
border-color: #eee transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-19px;
left:1em;
}
.bubble span {
height: auto !important;
color: #000 !important;
font-family: verdana;
}
- I am building something similar and ran into the exact same problem! – marano Commented Sep 20, 2014 at 4:35
2 Answers
Reset to default 8Here's an edited fiddle: http://jsfiddle/Z8fg3/
Notice two main differences: the class bubble is also absolutely positioned (like the character), and, instead of specifying a top, it has a bottom equal to the height of the character (plus some padding for the arrow and stuff).
(I moved one of the character both to fit the bubble and to show that it sticks to it regardless.)
I suppose you could set the container of the bubble to be relative and set the bubble to absolute with a bottom of 0 and add enough margin-bottom so it's no longer on of it's container (the character)... it should expand upward rather than downward since it's fixed to the container..
There's quite a few problems with your CSS though and I doubt much of this is going to be very cross-browser friendly.
See this fiddle: http://jsfiddle/HnezM/
.