CODEWITHSUNDEEP
htmlcss
Adam
Adam

Reputation: 20882

CSS + Different sized text areas to fit inside an image

http://jsfiddle.net/adamadam123/qv2yR/

Above is the code I'm currently working with. Below is an image of what I'm trying to achieve.

enter image description here

Its basically a chat box 'IM' and I have a blue & pink image and need to be able to get different amounts of text to sit within the image.

I also tried using the image as CSS background but found it didn't stretch to fit the text. Also tried floating and absolute positioning.

Any help would be greatly appreciated.

thx

    <div class="chatMessengerBody">

        <div class="chatMessengerChatBubble chatMessengerChatBubbleBlueWrapper">
            <img src="images/chat-messenger-chat-bubble-blue.png" class="chatMessengerChatBubble chatMessengerChatBubbleBlue"/>
            <p class="chatMessengerChatBubbleContent">Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?
            Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?
            Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?
            </p>
        </div>

        <div class="chatMessengerChatBubble chatMessengerChatBubblePinkWrapper">
            <img src="images/chat-messenger-chat-bubble-pink.png" class="chatMessengerChatBubble chatMessengerChatBubblePink"/>
            <p class="chatMessengerChatBubbleContent">Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?</p>
        </div>

    </div>

Upvotes: 0

Views: 235

Answers (2)

Jared
Jared

Reputation: 12524

http://jsfiddle.net/qv2yR/10/

CSS

.blue {
    background: #EBF7FF;
    border: 1px solid #D4F1FD;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color :#6B95B0;
    margin-bottom: 5px;
    padding: 5px;    
    width: 200px;
}

.pink {
    background: #FFF8F2;
    border: 1px solid #FFEEE4;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color :#D386A8;
    margin-bottom: 5px;
    padding: 5px;    
    width: 200px;
}

HTML

<div class="blue">
 this is the blue one
</div>

<div class="pink">
    this is the pink one.
</div>

Upvotes: 1

Andy
Andy

Reputation: 1141

Instead of an image, why not use some CSS & CSS3 rounded corners:

.chatMessengerChatBubblePinkWrapper {
    background:#fff8f2;
    border:1px solid #ffeadb;
    -webkit-border-radius: 5px;
    border-radius:5px;
}

Upvotes: 1

Related Questions