¿Como se llama el componente HTML de la imagen que adjunto?

[micro_pepe]

Tengo que hacer un area de texto como el de la imagen que adjunto ¿como se llama para buscarlo?

Gracias!

[BrunoF]

Hola!

Puedes explorar el elemento html. Desde Firefox se hace desde el menú Firefox->Desarrollador Web->Inspector. Posicionandote sobre el elemento te mostrará el tag html relacionado y puedes ir explorandolo. Chrome tiene un sistema similar. Hay muchas formas de hacer las cosas en html.

Saludos!

[micro_pepe]

Hola!

Puedes explorar el elemento html. Desde Firefox se hace desde el menú Firefox->Desarrollador Web->Inspector. Posicionandote sobre el elemento te mostrará el tag html relacionado y puedes ir explorandolo. Chrome tiene un sistema similar. Hay muchas formas de hacer las cosas en html.

Saludos!

La cosa es que esa imagen que puse es de un pdf... no tengo la página html. Seguiré buscabdo.

Saludos!

[planeta9999]

No te calientes la cabeza con HTML, que no van por ahí los tiros, todo eso se maqueta con hojas de estilo CSS.
Busca cajas de texto CSS, en google, y encontrarás información a cascoporro.

En esencia creas un tag div en html, le asignas una clase o un identificador único, y creas la hoja de estilo definiendo esa clase, ahí ya defines la estética de esa caja, forma, tamaño, color de fondo, etc....

<div class= "miclase">
    texto a sacar
</div>

<div id= "miclase">
    texto a sacar
</div>

[AngelGris]

No te calientes la cabeza con HTML, que no van por ahí los tiros, todo eso se maqueta con hojas de estilo CSS.
Busca cajas de texto CSS, en google, y encontrarás información a cascoporro.

En esencia creas un tag div en html, le asignas una clase, y creas la hoja de estilo definiendo esa clase, ahí ya defines la estética de esa caja, forma, tamaño, color de fondo, etc....

<div class= "miclase">
    texto a sacar
</div>

<div id= "miclase">
    texto a sacar
</div>

  También pensé en ello, pero me confunde la flecha superior izquiera.... aunque tal vez sea un borde agregado al "div"

[planeta9999]

 También pensé en ello, pero me confunde la flecha superior izquiera.... aunque tal vez sea un borde agregado al "div"

Ese "pico" anexo a la caja, es una imagen, una vez la tengas hecha, la puedes ubicar en la hoja de estilo de la caja, para ponerla en la posición que quieras.
Por CSS, que yo sepa, en las cajas puedes definir su forma, tamaño, color de fondo, grosor y color del borde, si las esquinas estarán redondeadas y con que ángulo, y alguna cosilla más.

[AngelGris]

 También pensé en ello, pero me confunde la flecha superior izquiera.... aunque tal vez sea un borde agregado al "div"

Ese "pico" anexo a la caja, es una imagen, una vez la tengas hecha, la puedes ubicar en la hoja de estilo de la caja, para ponerla en la posición que quieras.
Por CSS, que yo sepa, en las cajas puedes definir su forma, tamaño, color de fondo, grosor y color del borde, si las esquinas estarán redondeadas y con que ángulo, y alguna cosilla más.

  Sí, lo de las esquinas redondeadas lo sabía, pero me parece que no todos los navegadores lo soportan (por ejemplo el maldito explorer)
  Por tal motivo cuando tuve que hacer algo con esquinas redondeadas recurrí a 4 imágenes (una para cada esquina) y así pude verlas bien.

[micro_pepe]

OK, ese piquito es el que me estaba mosqueando, pense que seria un componente de html. Ahora a ver como hago para que no se me amontonen unos bloques div con otros, pues eso se rellena dinamicamente con el contenido de una tabla de una BD.

Saludos!

[planeta9999]

  Sí, lo de las esquinas redondeadas lo sabía, pero me parece que no todos los navegadores lo soportan (por ejemplo el maldito explorer)
  Por tal motivo cuando tuve que hacer algo con esquinas redondeadas recurrí a 4 imágenes (una para cada esquina) y así pude verlas bien.

Yo juraría que Explorer si que soporta esquinas redondeadas en las cajas, pero ciertas instrucciones CSS difieren entre algunos navegadores. Hace mucho tiempo que dejé de utilizar Internet Explorer, ya todo lo hago y compruebo para Chrome, y a veces también para Firefox.

[planeta9999]

He estado trasteando un momento con CSS, y si que se puede crear ese pico sin necesidad de hacer una imagen, te quedará algo así:





Este es el código HTML, como se puede ver, se trata de una lista de elementos, de manera que de cada pareja, el primer elemento es el pico, y el segundo elemento es la caja con el texto:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='styles.css'>
</head>
<body>


<div id='cssmenu'>
<ul>
     <li class='has-sub'><a> </a>
      <ul>
         <li class='has-sub'><a><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
         dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
         cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
           </a>
         </li>
      </ul>
   </li>
  
</ul>
</div>
</body>
</html>

Y este el código de la hoja de estilos CSS, seguro que se puede depurar y eliminar todo lo superfluo:

Código: [Seleccionar]

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu a {
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}


#cssmenu > ul > li:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 150px;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #cccccc;
  margin-left: -10px;
}

#cssmenu .has-sub ul {
  display: block;
  position: absolute;
  width: 400px;
  top: 100%;
  left: 100px;
}

#cssmenu .has-sub ul li a {
  background: #cccccc;
  border-bottom: 1px dotted #cccccc;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
  color: #000000;
}

[AngelGris]

  Sí, lo de las esquinas redondeadas lo sabía, pero me parece que no todos los navegadores lo soportan (por ejemplo el maldito explorer)
  Por tal motivo cuando tuve que hacer algo con esquinas redondeadas recurrí a 4 imágenes (una para cada esquina) y así pude verlas bien.

Yo juraría que Explorer si que soporta esquinas redondeadas en las cajas, pero ciertas instrucciones CSS difieren entre algunos navegadores. Hace mucho tiempo que dejé de utilizar Internet Explorer, ya todo lo hago y compruebo para Chrome, y a veces también para Firefox.

  Ahora me has hecho dudar, pero creo haber hecho dicha prueba con el viejo explorer 6 (el que traía la instalación de XP) y no funcionaba... pero ahora no estoy seguro.

[planeta9999]

Y una versión mucho más simplificada y depurada del código:


Para el HTML:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='styles.css' />
</head>

<body>
<div id='cssmenu'>
     <span class='has-sub'> </span>
     <span class='has-sub2'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
         dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
         cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </span>
</div>

</body>
</html>


Y para la hoja de estilos CSS:

Código: [Seleccionar]

#cssmenu {
  margin: 0;
  padding: 0;
  position: relative;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  text-decoration: none;
  list-style: none;
}

#cssmenu .has-sub:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  margin-top: 50px;
  position: relative;
  left: 180px;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #cccccc;
  margin-left: -10px;
}

#cssmenu .has-sub2 {
  display: block;
  position: absolute;
  width: 400px;
  top: 100%;
  left: 100px;
  background: #cccccc;
  font-size: 11px;
  padding: 10px;
  color: #000000;
}

[planeta9999]

  Ahora me has hecho dudar, pero creo haber hecho dicha prueba con el viejo explorer 6 (el que traía la instalación de XP) y no funcionaba... pero ahora no estoy seguro.

Explorer 6 es una versión bastante antigua, seguro que no soporta HTML5 ni CSS3, normal que no saque esquinas redondeadas en las cajas.

[PalitroqueZ]

en alguno sitios con wordpress usan ese estílo para dejar respuestas y usan CSS para generarlas, es como dice planeta9999 , separan la caja del "pico" con div

[micro_pepe]

Muchas gracias por las respuestas. Ya lo tengo funcionando.

Saludos!