Creating interactive dialogue: the speech bubble script

I'm having trouble with my code overlapping in sections, and I just can't seem to figure out why. I've tried adjusting borders, adding padding, adjusting spaces, changing widths, reviewing the code, and even removing absolute positions, but nothing seems to work. The speech bubbles that I'm working with don't necessarily need to be interactive, but I do need them to have the same width and different heights. I also need a small gap between each bubble, but right now 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>
        Insert your content here.
    </div>
    <br><br>
    <div class="speech-bubble">
        <div class="arrow bottom right">
        </div>
         More content goes here.
    </div>
</body>

Answer №1

Let's make it simpler!

Update - Now featuring a stylish purple arrow border :)

Try it out!

HTML

<div class="chat-box"></div>

CSS

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

Answer №2

Give this a shot: CLICK HERE

Your CSS code:

  .chat-box {
      background-color: #12a4b9;
      border: 2px solid #8b63f4;
      border-radius: 8px;
      width: 600px;
      text-align: center;
      padding: 25px;
      position: relative;
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjusting the Transparency of the Background in a Pop-Up

I am experiencing an issue with my popup where I want the background to be transparent. However, when I set the opacity in CSS to 0.5 or less, the text also becomes transparent and very dark. How can I achieve a background with 50% opacity while keeping th ...

Having trouble getting custom tabs in jQuery to function properly?

I am facing an issue with a simple script I have created. The script is supposed to display a specific div when a user clicks on a link, and hide all other divs in the container. However, when I click on the link, nothing gets hidden as expected. Even afte ...

Achieving the desired results through the utilization of CSS3 rather than relying on images

I am currently exploring the use of CSS3 to create a menu instead of relying on images over at . You can view my progress and code (including images and styles) here: Although I attempted to use CSS3 for the border shadow and matching the background of ...

Centering an Image of Unspecified Dimensions Both Vertically and Horizontally with Hover Effect on Anchor

To achieve both horizontal and vertical centering of an image with unknown dimensions, I need to use max-width and max-height to constrain it within a container size of 101x84. Additionally, I want the image to display an icon in the middle when hovered ov ...

Input form and select form collide in conflict when the "Enter" key is activated

My search box includes input forms and a select form with various options. The issue arises when using the place autocomplete feature from Google Maps alongside the select form. When the enter key is pressed after entering a location in the autocomplete fi ...

Is the content within the h3 tag invisible on Internet Explorer 8?

The text within the h3 tag displays correctly in Firefox and Chrome, but is not visible in IE8. I'm unsure of what the issue might be. Here is the HTML code: HTML: <div id="right"> <h3> profile <div id='upload' cla ...

issue arising where the table's border is not displaying

I'm confused about why the border of the first tbody tr's td is not visible. https://i.stack.imgur.com/Fwlv7.png I can't see any reason why the border is not showing up. Here's what I've figured out: If the natural height of th ...

Setting the height of a box-inner div to full height in Bootstrap 4: A guide

Assistance Needed: I have encountered an issue with my design while using bootstrap-4. The box-inner div works perfectly on desktop, adjusting its height according to the content entered. However, on a real iPad, the columns are not of equal height as sho ...

CSS hover effect: altering background colors of both parent and child elements simultaneously

HTML: <div class="container"> <div class="parent">one <div class="child">two</div> </div> </div> CSS: .parent { background: red; height: 200px; width: 200px; } .child { back ...

Troubleshooting jQuery Dropdown Menu Animation Bugs

Take a look at this interesting fiddle: https://jsfiddle.net/willbeeler/tfm8ohmw/ HTML: <a href="#" class="roll-btn">Press me! Roll me down and up again!</a> <ul class="roll-btns"> <li><a href="#" class="control animated noshow ...

Internet Explorer is having issues displaying CSS text accurately, particularly in relation to the background-

Having an issue with Internet Explorer not displaying my background clipped text correctly. In other browsers like Chrome and Firefox, the code renders fine: https://i.stack.imgur.com/x9lio.png However, in IE it appears differently: Your code: HTML: & ...

Navigating on a stationary object: CSS Styling

I have a main div with another nested div inside. The nested div contains cards, but I am unable to scroll through them due to the fixed positioning of the main div. I need a way to enable scrolling for the cards within the nested div. Note that the presen ...

Graphing functions with three.js

Is it possible to create a function grapher using the three.js API to plot a function in the form of z=f(x,y)? The program should: Generate input values between -1 and 1 in increments of .1, and use these values to plot x, y, and z vertices as part of a ...

Mysterious attributes of angular 6's <table mat-table> tag

This particular question regarding the angular material table has not been duplicated in any other discussions. Other similar questions pertain to angular versions 2-5, not version 6 The issue I am encountering is as follows: Can't bind to 'dat ...

I am interested in altering the color of table rows using either JQuery or CSS

Looking to update row colors based on grouping. For example: Color the TR accordingly for every 5 rows: First 5 rows in green (0-4 Rows), Next five rows in red (5-9 Rows), Following five rows in yellow (10-14 Rows) and repeat the pattern... ...

How come the array's length is not appearing on the browser screen?

Code: initialize: function() { this.todos = [ {id: 100, text: 'Rich'}, {id: 200, text: 'Dave'} ]; }, activeTodos: function() { this.todos = this.todos.length(function() { return this.todos; }); ...

What is the proper way to input a valid path?

I am facing an issue with the path to the CSS folder in the linked picture. The HTML code is working fine, but the CSS seems to be not loading correctly. I suspect that the problem lies in the path. How can I rectify this? I'm unsure of what steps to ...

Ensure there is a blank space preceding a table only when the table is being physically printed

I am currently in the process of developing a report card system for students in grades K-6. The report card will display specific tables based on the student's grade level. For example, a 5th grader may not have a "Reading Stage" table displayed on t ...

Material UI Grid Items not stretching to fill the entire available width

I'm currently working with a nested Grid system in Material UI, but the Grid items are only occupying a fixed width and leaving some empty space. The issue arises when this fixed space is used up and instead of adjusting their internal free space, the ...

How can you set an input field to be initially read-only and then allow editing upon clicking a button using Vue.js?

//I have two divs that need to be set as readonly initially. When an edit button is clicked, I want to remove the readonly attribute and make them editable. <div> <input type="text" placeholder="<a href="/cdn-cgi/l/email-protection ...