CODEWITHSUNDEEP
htmlcss
user3770449
user3770449

Reputation: 3

Speech Bubble code

My code has the sections overlapping, but I can't figure out how. I've tried changing borders, inserting padding, spaces, adjusting the width, checking code, removing absolute positions and none of it has worked. The speech bubbles don't need to be interactive, but I need them to stay the same width, but different heights. I also need a small gap between each of them, but at the moment there's no gap at all. 

<!DOCTYPE html>
<!-- Author: Lorna Costelloe -->
<html>
    <head>
    <meta charset = "utf-8">
    <title>Speech Bubble</title>
    <style media="screen" type="text/css">
        .speech-bubble{
            background-color: #f4911c;
            border: 3px solid #662f8c;
            border-radius: 5px;
            width: 500px;
            text-align: center;
            padding: 20px;
            position: absolute;}
        .speech-bubble .arrow {
            border-style: dotted;
            position: absolute;}
         .bottom {
            border-color: #662f8c transparent transparent transparent;
            border-width: 8px 8px 0px 8px;
            bottom: -8px;}
        .bottom:after {
            border-color: #f4911c transparent transparent transparent;
            border-style: dotted;
            border-width: 7px 7px 0px 7px;
            bottom: 1px;
            content: "";
            position: absolute;
            left: -7px;}
    </style>
</head>
<body>
    <!--copy and paste this for a new speech bubble. 
    <div class="speech-bubble">
        <div class="arrow bottom right">
        </div>
         CONTENT HERE. 
    </div>-->
    <div class="speech-bubble">
        <div class="arrow bottom right"></div>
        TESt test test test test test test tes test TESt test test test      test test test tes testTESt test test test test test test tes test<br><br>
        TESt test test test test test test tes testTESt test test test test test test tes testTESt test test test test test test tes test<br><br>
        TESt test test test test test test tes test TESt test test test test test test tes testTESt test test test test test test tes test<br><br>
        TESt test test test test test test tes testTESt test test test test test test tes testTESt test test test test test test tes test<br><br>
        TESt test test test test test test tes test TESt test test test test test test tes testTESt test test test test test test tes test<br><br>
        TESt test test test test test test tes testTESt test test test test test test tes testTESt test test test test test test tes test<br><br>
        TESt test test test test test test tes test TESt test test test test test test tes testTESt test test test test test test tes test<br><br>
        TESt test test test test test test tes testTESt test test test test test test tes testTESt test test test test test test tes test<br><br>
    </div>
    <br><br>
    <div class="speech-bubble">
        <div class="arrow bottom right">
        </div>
         second test second test second test second test second test second test second test second test second test second test <br><br>
         second test second test second test second test second test second test second test second test second test second test <br><br>
         second test second test second test second test second test second test second test second test second test second test <br><br>
         second test second test second test second test second test second test second test second test second test second test <br><br>
         second test second test second test second test second test second test second test second test second test second test <br><br>
         second test second test second test second test second test second test second test second test second test second test <br><br>
        second test second test second test second test second test second test second test second test second test second test <br><br>
    </div>
</body>

Upvotes: 0

Views: 6179

Answers (2)

misterManSam
misterManSam

Reputation: 24712

Simplify!

Update - Now with purple arrow border :)

Have a fiddle!

HTML

<div class="speech-bubble"></div>

CSS

 .speech-bubble {
      background-color: #f4911c;
      border: 3px solid #662f8c;
      border-radius: 5px;
      width: 500px;
      text-align: center;
      padding: 20px;
      position: relative;
      margin: 0 0 40px;
  }
  .speech-bubble:before {
      border-color: #662f8c transparent transparent transparent;
      border-width: 8px 8px 0px 8px;
      border-style: dotted;
      position: absolute;
      left: 9px;
      bottom: -8px;
      content:'';
  }
  .speech-bubble:after {
      border-color: #f4911c transparent;
      border-style: dotted;
      border-width: 7px 7px 0px;
      bottom: -7px;
      content:'';
      position: absolute;
      left: 10px;
  }

Upvotes: 1

G.L.P
G.L.P

Reputation: 7217

Try like this: LINK

CSS:

  .speech-bubble {
      background-color: #f4911c;
      border: 3px solid #662f8c;
      border-radius: 5px;
      width: 500px;
      text-align: center;
      padding: 20px;
      position: relative;
  }

Upvotes: 0

Related Questions