{"id":665,"date":"2011-08-29T18:25:31","date_gmt":"2011-08-29T18:25:31","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=665"},"modified":"2023-10-04T04:29:44","modified_gmt":"2023-10-04T04:29:44","slug":"caja-comentarios","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/caja-comentarios\/","title":{"rendered":"Dise\u00f1o CSS para caja de comentarios"},"content":{"rendered":"

Hoy en d\u00eda, la interacci\u00f3n Web con los usuarios est\u00e1 presente en pr\u00e1cticamente todas las Webs ya sea para participar en votaciones, enviar comentarios, dar opiniones, entre otras opciones.<\/p>\n

En aplicaciones muy de moda tales como foros, redes sociales o comunidades, la libertad de expresi\u00f3n de los usuarios de dichas comunidades es esencial.<\/p>\n

En este art\u00edculo vamos a mostrar un dise\u00f1o algo antiguo pero eficaz para visualizar en pantalla una caja de comentarios que se podr\u00eda utilizar en cualquier sistema de comentarios ya que personalizarlo es muy sencillo si est\u00e1s familiarizado con las reglas CSS.<\/p>\n

En la hoja de estilos CSS que est\u00e9s utilizando en tu p\u00e1gina web, agrega las siguientes reglas:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
.titular-comentario<\/span> {<\/span>\n    margin<\/span>:<\/span> 0.3em<\/span>;<\/span>\n    padding-bottom<\/span>:<\/span> 4px<\/span>;<\/span>\n    padding-left<\/span>:<\/span> 0.2em<\/span>;<\/span>\n}<\/span>\n \n.titular-comentario<\/span> {<\/span>\n    height<\/span>:<\/span> 60px<\/span>;<\/span>\n    width<\/span>:<\/span> 500px<\/span>;<\/span>\n    overflow<\/span>:<\/span> hidden<\/span>;<\/span>\n    padding<\/span>:<\/span> 5px<\/span> 5px<\/span> 0 !important;<\/span>\n}<\/span>\n \n.esquinas<\/span> {<\/span>\n    -moz-border-radius:<\/span> 4px<\/span> 4px<\/span> 4px<\/span> 4px<\/span>;<\/span>\n}<\/span>\n \n.contenido-comentario<\/span> {<\/span>\n    background<\/span>:<\/span> url<\/span>(<\/span>"images\/fondotitulo.png"<\/span>)<\/span> repeat-x<\/span> scroll<\/span> 50<\/span>%<\/span> 50<\/span>%<\/span> #222222<\/span>;<\/span>\n    border<\/span>:<\/span> 1px<\/span> solid<\/span> #191919<\/span>;<\/span>\n    color<\/span>:<\/span> #EEEEEE<\/span>;<\/span>\n    font-weight<\/span>:<\/span> bold<\/span>;<\/span>\n}<\/span>\n \n.fondo_mensaje<\/span> {<\/span>\n\tbackground-color<\/span>:<\/span> #eeeeee<\/span>;<\/span>\n    height<\/span>:<\/span> 100<\/span>%<\/span>;<\/span>\n    width<\/span>:<\/span> 520px<\/span>;<\/span>\n    overflow<\/span>:<\/span> hidden<\/span>;<\/span>\n    padding<\/span>:<\/span> 2px<\/span> 2px<\/span> 0 !important;<\/span>\n    margin-left<\/span>:<\/span> 100px<\/span>;<\/span>\n}<\/span>\n \n.texto_mensaje<\/span> {<\/span>\n\tfont-family<\/span>:<\/span> "Lucida Sans Unicode"<\/span>;<\/span>\n\tfont-size<\/span>:<\/span> 12px<\/span>;<\/span>\n\ttext-align<\/span>:<\/span> justify<\/span>;<\/span>\n\tpadding-top<\/span>:<\/span> 5px<\/span>;<\/span>\n\tpadding-left<\/span>:<\/span> 10px<\/span>;<\/span>\n\tpadding-right<\/span>:<\/span> 10px<\/span>;<\/span>\n\tpadding-bottom<\/span>:<\/span> 10px<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
Son reglas que nos sirven para darle el aspecto siguiente:<\/p>\n
\"Dise\u00f1o<\/p>\n
El c\u00f3digo HTML para la maquetaci\u00f3n es el siguiente:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"fondo_mensaje esquinas"<\/span>><\/span>\n\t<div<\/span><\/a> class<\/span>=<\/span>"titular-comentario contenido-comentario esquinas"<\/span>><\/span>\n\t\t<table<\/span><\/a> cellpadding<\/span>=<\/span>"0"<\/span> cellspacing<\/span>=<\/span>2<\/span>"><\/span><\/span>\n\t\t\t<tr<\/span><\/a>><\/span>\n\t\t\t\t<td<\/span><\/a>><img<\/span><\/a> src<\/span>=<\/span>"meme.jpg"<\/span> width<\/span>=<\/span>"40px"<\/span> height<\/span>=<\/span>"50px"<\/span> border<\/span>=<\/span>"0"<\/span>><\/<\/span>td<\/span><\/a>><\/span>\n\t\t\t\t<td<\/span><\/a> width<\/span>=<\/span>"10px"<\/span>><\/<\/span>td<\/span><\/a>><\/span>\n\t\t\t\t<td<\/span><\/a>><b<\/span><\/a>><\/span>Nombre Usuario<\/<\/span>b<\/span><\/a>><\/span> dice (26-02-2011 10:05:37): <\/<\/span>td<\/span><\/a>><\/span>\n\t\t\t<\/<\/span>tr<\/span><\/a>><\/span>\n\t\t<\/<\/span>table<\/span><\/a>><\/span>\n\t<\/<\/span>div<\/span><\/a>><\/span>\n\t<div<\/span><\/a> class<\/span>=<\/span>"texto_mensaje"<\/span>><\/span>Contenido del mensaje.<\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Las im\u00e1genes que se usan se pueden descargar del c\u00f3digo fuente.<\/p>\n
Debes tener en cuenta que este post es una publicaci\u00f3n de hace m\u00e1s de 10 a\u00f1os. Actualmente, CSS ha avanzado bastante para beneficio de los programadores y ahora hacer esta caja de comentarios es muy simple con Flexbox o CSS Grid evitando as\u00ed el uso de table ya desfasado para la maquetaci\u00f3n web.<\/p>\n
Ver demo<\/a> <\/i> Descargar<\/a><\/p>\n
Esta entrada ha sido editada el d\u00eda 4 de Octubre del 2023 para ampliar la informaci\u00f3n.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Descubre como maquetar una caja de comentarios usando la etiqueta table y algunas reglas CSS interesantes.<\/p>\n","protected":false},"author":1,"featured_media":6469,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[74],"class_list":["post-665","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-contenedores"],"yoast_head":"\nDise\u00f1o CSS para caja de comentarios - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Descubre como maquetar una caja de comentarios usando la etiqueta table y algunas reglas CSS interesantes.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dise\u00f1o CSS para caja de comentarios - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Descubre como maquetar una caja de comentarios usando la etiqueta table y algunas reglas CSS interesantes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/caja-comentarios\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2011-08-29T18:25:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-04T04:29:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/08\/caja-comentarios-table.png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/caja-comentarios\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/caja-comentarios\/\",\"name\":\"Dise\u00f1o CSS para caja de comentarios - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/caja-comentarios\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/caja-comentarios\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\",\"datePublished\":\"2011-08-29T18:25:31+00:00\",\"dateModified\":\"2023-10-04T04:29:44+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Descubre como maquetar una caja de comentarios usando la etiqueta table y algunas reglas CSS interesantes.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/caja-comentarios\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/caja-comentarios\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/caja-comentarios\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\",\"width\":282,\"height\":300},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/caja-comentarios\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dise\u00f1o CSS para caja de comentarios\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dise\u00f1o CSS para caja de comentarios - Jose Aguilar Blog","description":"Descubre como maquetar una caja de comentarios usando la etiqueta table y algunas reglas CSS interesantes.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Dise\u00f1o CSS para caja de comentarios - Jose Aguilar Blog","og_description":"Descubre como maquetar una caja de comentarios usando la etiqueta table y algunas reglas CSS interesantes.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/caja-comentarios\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2011-08-29T18:25:31+00:00","article_modified_time":"2023-10-04T04:29:44+00:00","og_image":[{"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/08\/caja-comentarios-table.png","type":"","width":"","height":""}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/caja-comentarios\/","url":"https:\/\/www.jose-aguilar.com\/blog\/caja-comentarios\/","name":"Dise\u00f1o CSS para caja de comentarios - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/caja-comentarios\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/caja-comentarios\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","datePublished":"2011-08-29T18:25:31+00:00","dateModified":"2023-10-04T04:29:44+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Descubre como maquetar una caja de comentarios usando la etiqueta table y algunas reglas CSS interesantes.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/caja-comentarios\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/caja-comentarios\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/caja-comentarios\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","width":282,"height":300},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/caja-comentarios\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Dise\u00f1o CSS para caja de comentarios"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/665","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=665"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/665\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/6469"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}