What are effective ways to design a dialogue or conversation with CSS styling?

Looking to create a design similar to this one, but unsure of the terminology:

https://i.sstatic.net/4QRcw.png

I am open to different approaches for the layout, but possibly something along these lines: https://codepen.io/nachocab/pen/LaBwzw

.container  {
  width: 600px;
 }
.speaker {
  padding-right: 20px;
}

.speaker::after {
  content: ':';
 }
<div class="container">
  <p class="line">
    <span class="speaker">Mary</span><span class="sentence">Hello</span>
  </p>
  <p class="line">
    <span class="speaker">Luke</span><span class="sentence">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Aenean fringilla pharetra metus id blandit.</span>
  </p>
</div>

https://i.sstatic.net/YVYVO.png

css

Answer №1

If you're looking to avoid overlapping the .speaker and .sentence elements, try implementing the following solution:

I've utilized display: flex on the .line to ensure they are positioned next to each other.

.container {
  width: 600px;
}

.speaker {
  padding-right: 10px;
}

.speaker::after {
  content: ':';
}

.line {
  display: flex;
}
<div class="container">
  <p class="line">
    <span class="speaker">Mary</span><span class="sentence">Hello</span>
  </p>
  <p class="line">
    <span class="speaker">Luke</span><span class="sentence">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Aenean fringilla pharetra metus id blandit.</span>
  </p>
</div>

Answer №2

If you aim to have all character names neatly aligned, your best choice would be either a traditional table or a modern CSS grid. Using a grid can provide more flexibility, so those with expertise in grids may suggest alternative solutions. Below is an example of achieving this layout with a table. Remember, you can apply table display styles to non-table elements for semantic purposes.

.dialogue {
  border-spacing: 0;
}

.dialogue th, .dialogue td {
  padding: 0 0 1em 0;
  vertical-align: top;
}

.dialogue th {
  text-align: right;
  white-space: pre;
}

.dialogue td {
  text-align: left;
}
<table class="dialogue">
  <tr class="dialogue-alice">
    <th>Alice Bob: </th>
    <td>Culpa eiusmod qui enim Lorem quis aliquip Lorem id. Incididunt velit fugiat irure tempor ad culpa officia. Laborum magna dolor consequat ipsum aute eiusmod ad eu aute enim magna id non esse. Laborum mollit labore aute consectetur culpa cupidatat. Excepteur esse tempor proident reprehenderit minim duis. Irure eu ullamco ex non dolore sit duis consectetur eu enim officia cillum.</td>
  </tr>
  <tr class="dialogue-bob">
    <th>Charles Dickens: </th>
    <td>Anim duis laboris commodo mollit incididunt et cupidatat anim aliquip ipsum pariatur veniam. Sint amet esse et esse ea ea consequat ea. Dolore fugiat id et qui esse et ullamco sunt elit velit id.</td>
  </tr>
</table>

Answer №3

Feel free to test out this code snippet

If you want to implement it using flexbox, I recommend familiarizing yourself with flexbox through this guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.parent {
  display: table;
}
.message-row {
  display: table-row;
}
.user,
.message {
  display: table-cell;
  text-align: left;
}
<table style="width:100%">
  <tr>
    <td>Mary </td>
    <td>: Hello</td> 
  </tr>
  <tr>
    <td>Luke</td>
    <td>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla pharetra metus id blandit.</td> 
  </tr>
</table>

 <hr>
<div class="parent">
  <div class="message-row">
    <div class="user">Mary</div>
    <div class="message">: Hello</div>
  </div>
  <div class="message-row">
    <div class="user">Luke</div>
    <div class="message">: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla pharetra metus id blandit.</div>
  </div>
</div>

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

Embedding videos in HTML

I am experiencing difficulties with embedding a video in my HTML file. I attempted to use a YouTube video, but when I open it in my browser, it displays an error message stating that the video is unavailable because YouTube has refused to connect. I also ...

htmlcss

Mysterious extra space appearing on the right side of the left scroll div in Chrome

I am currently working with a table that dynamically increases in content when a button is clicked. I have successfully implemented a scroll on the right side to handle overflow. However, I encountered an issue when trying to change the scroll to the left ...

htmlcss

Is there a way to adjust the width of my web layout without sacrificing its responsiveness?

Struggling with my website layout design as I encountered an issue. The overall width of the layout is too excessive, and I want to introduce some margins on the sides for a better visual appeal. Although the responsive design works well originally, adding ...

htmlcssresponsive-designbootstrap-5

Adjust the row based on the smallest picture

I am looking to create a photo grid using Bootstrap with images pulled from the Google Places API. The issue I am facing is that currently, the row adjusts to the height of the tallest image, but I want it to be the other way around. <div class="contai ...

cssangularjstwitter-bootstrap

The concept of the "Centering Effect" refers

Check out the code I have below: http://jsfiddle.net/G8Ste/577/ I want the effect to expand in all directions, not just to the right and bottom. I've experimented with margin: 0, auto, and other CSS and HTML styles to center it, but nothing seems t ...

jqueryhtmlcss

Preventing parent properties from overriding descendants is a key part of maintaining a hierarchical

I found a css file online that I'm using for a website I'm building, but I am only incorporating certain components from it. The issue is that the global styles in this css file are overriding all the global styles on my website. My solution was ...

htmlcsscss-selectors

Bringing in typefaces to enhance your email signature

I am trying to design a unique email signature with a custom Adobe font. My email account is hosted by Strato, a German mail server. However, when I attempted to insert the signature using Apple Mail, I realized that the CSS <style> part was not bein ...

cssemailfontsadobesignature

Making a switch from one image to another - JavaScript

I need a solution to swap out an image that is used in multiple locations on a webpage. Consider this sample HTML page: <html> <head> </head> <body> <img id="1" src="example.com/img/1889.png"> <d ...

javascripthtmlcss

Find all elements located in between two headers with varying ids

I am trying to select a specific range of elements in between two headers, excluding everything after the second header. For example, I want to select elements 1-5 from the following code snippet: <!DOCTYPE html> <html> <head> <link r ...

csscss-selectors

Design your HTML select element with a unique custom arrow where the text elegantly appears over the arrow

I've encountered an issue with a select element in my HTML page that has a custom arrow. The problem is that the text within the select element overlaps with the arrow, which is not desired. I'm seeking a cross-browser solution for this specific ...

htmlcss

Embed the div within images of varying widths

I need help positioning a div in the bottom right corner of all images, regardless of their width. The issue I am facing is that when an image takes up 100% width, the div ends up in the center. How can I ensure the div stays in the lower right corner eve ...

htmlcssangulartypescript

Rendering Local HTML with local styling and scripts in React Native Webview

I am having trouble loading a local HTML, CSS, and JS file in my React Native webview. The CSS is not being applied to the HTML. Here is my folder structure: My HTML file, along with CSS, images, and JS file are all placed in the following app folder stru ...

javascripthtmlcssreact-nativewebview

The tab content refuses to show up in its designated fixed location

I've been working on creating a responsive tab system that functions as an accordion on smaller mobile devices, inspired by this example. I've made great progress and I'm almost where I want to be, but for some reason, the active tab content ...

htmlcsstabsaccordion

Ways to display a different div when clicking on a div?

Good afternoon, I've noticed that this question has been asked numerous times before, but none of the solutions provided seem to work for my specific issue. My problem involves a div with the class .title3. I want another div with the class .Content ...

javascriptjqueryhtmlcss

Tips for adjusting the font size of a Chip using Material-UI

I am using a widget called Chip const styles = { root:{ }, chip:{ margin: "2px", padding: "2px" } } const SmartTagChip = (props) =>{ const classes = useStyles(); return( <Chip style={{color:"white&q ...

javascriptcssmaterial-ui

Is it possible to set the radius of a d3.js circle using a style attribute?

Learn more about styling in d3.js with this detailed guide that explains how style attributes can be leveraged to customize the look of a circle, including fill color, stroke color, and stroke width. Is it possible to adjust the radius of a d3.js circle u ...

javascriptcssd3.js

Show information from mysql in a dual-column format

I am pulling data from a single table in mysql, currently displaying it in one column. I want the data to be displayed in two columns next to each other. You can check out the results at www.urimsopa.com Here is my current code: $results = $mysqli->qu ...

phphtmlmysqlcss

Is there a way to make the edges of this table more curved?

I utilized an HTML code generator to easily create this table, but I am struggling to give it rounded borders. .tg { border-collapse: collapse; border-spacing: 0; } .tg td { border-color: black; border-style: solid; border-width: 3px; font- ...

htmlcss

Latest Chrome Update Resolves Fixed Positioning Bug

I am currently facing an issue with setting the second background image in the "Great people providing great service" section to a fixed position. You can view the website here: While the fixed position works in Safari and Firefox, it used to work in Chro ...

htmlcssgoogle-chromepositioning

Enhancing Image Upload with Ajax/JavaScript: Generating Multiple Previews

I've been experimenting with an Ajax image uploader that I found on this website. Currently, I have managed to create duplicate preview images: one displayed under the input field and the other elsewhere on the page labeled as "this what you chose". H ...

javascriptjqueryhtmlcssajax