CSS - Crear conversación con bocadillos CSS/html

 
Vista:
sin imagen de perfil

Crear conversación con bocadillos CSS/html

Publicado por Juanito (2 intervenciones) el 04/02/2017 12:51:54
Buenas:

Intento crear una conversación con bocadillos en CSS. Soy novato en html y CSS y no tengo muy claro cómo hacerlo. Tengo un par de dudas.

Primero: ¿cómo puedo hacer para que los bocadillos estén uno debajo del otro? ¿Como si fuera una conversación? He probado con flotantes etc. pero no consigo recolocarlos.

Segundo: entre el texto y límites del bocadillo (arriba y abajo) hay demasiado espacio para mi gusto. ¿Cómo puedo corregirlo?

Adjunto el código del html para que lo podáis ver:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
 
<html>
 
	<head>
 
		<meta charset="utf-8"/>
 
		<style type="text/css">
 
			.talk-bubble {
				margin: 10px;
				display: inline-block;
				position: relative;
				width: inline-block;
				height: auto;
				background-color: #A9E2F3;	
 
			}
 
			.talktext{
				 padding: 0.5em;
				 text-align: left;
				 line-height: 1.15em;
				 margin-right: 15px;
			}
 
			.talktext p{
				-webkit-margin-before: 0em;
				-webkit-margin-after: 0em;
			}
 
			.tri-right.border.btm-right:before {
				content: ' ';
				position: absolute;
				width: 0;
				height: 0;
				left: auto;
				right: -8px;
				bottom: -20px;
				border: 10px solid;
				border-color: #A9E2F3 #A9E2F3 transparent transparent;
			}
 
			.tri-right.btm-right:after{
				content: ' ';
				position: absolute;
				width: 0;
				height: 0;
				left: auto;
				right: 0px;
				bottom: -10px;
				border: 12px solid;
				border-color: #A9E2F3 #A9E2F3 transparent transparent;
			}
 
 
		</style>
 
	</head>
 
<!-- CUERPO -->
 
    <body>
 
    <div class="talk-bubble tri-right btm-right">
          <div class="talktext">
            <p>Prueba</p>
          </div>
        </div>
 
        <div class="talk-bubble tri-right btm-right">
          <div class="talktext">
            <p>Hola.</p>
          </div>
        </div>
 
        <div class="talk-bubble tri-right btm-right">
          <div class="talktext">
            <p>que pasa.</p>
          </div>
        </div>
 
   </body>
 
</html>

Gracias por la ayuda.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 635
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Crear conversación con bocadillos CSS/html

Publicado por xve (490 intervenciones) el 04/02/2017 20:06:54
Hola Juanito, intento contestarte...

1.- quitale el display: inline-block; en el estilo: .talk-bubble
se te pondrá uno debajo del otro pero ocupando el 100% del navegador.
ponle un width con la medida que quieras que tenga.

2.- modifica el padding del estilo: talktext
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Crear conversación con bocadillos CSS/html

Publicado por Juanito (2 intervenciones) el 05/02/2017 12:12:14
Buenas xve y compañía:

En el primer punto ya había intentado eso y quería que estuviese tal como está pero uno debajo del otro, teniendo ese ancho automático.

En el segundo, también lo había probado, pero parece ser que tiene un tope. Es decir, que si lo pongo a cero, sigue teniendo ese margen superior e inferior en los cuadros respecto al texto. No sé si habrá algún moodo de arreglar estas dudas.

A ver si me podéis echar una mano. Muchas gracias y saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar