Sigueme por RSS! RSS

CSS para sistema de comentarios


Como el titulo lo dice es solo el CSS, los datos tales como, número de comentario, avatar, usuario, contenido del comentario, etc. deben ser asignados dinámicamente usando algún lenguaje de programación, como PHP, por ejemplo.

css:
body {
   background: url(imagen_de_fondo) top left no-repeat fixed;
}
#main {
  margin:0 auto;
  padding:0;
  text-align:center;
  width: 600px;
}
#comment_box { /* div contenedor de comentarios */
   margin:0 auto;
   margin-top:10px;
   padding:0;
   width: 540px;
   text-align:center;
   height:auto; /* se adapta a la altura de los elementos contenidos */
}
#comment_box .autor {
   color: #fff;
   float: left;
}
#comment_box .numero {
    border:solid 1px #455b80;
   color: yellow;
   float: right;
   width: 45px;
}
#comment_box .avatar {
   border:solid 2px #455b80;
   padding:0;
   width: 100px;
   height: 100px;
   float:left;
   margin-right:10px;
   margin-bottom:5px;
   margin-top:5px;

   /* sombra de la caja */
   -moz-box-shadow: 10px 13px 7px #000000;
   -webkit-box-shadow: 10px 13px 7px #000000;
   box-shadow: 10px 13px 7px #000000;
}
#comment_box .contenido {
   border:dashed 2px #455b80;
   padding: 5px 10px 10px 10px;
   width: 400px;
   height: auto;
   float:left;
   margin-bottom:5px;
   margin-top:5px;
   text-align:justify;
   text-indent: 1.5em; /* sangria */
   font-size:12px;
   background-color: #edf3ff;
   color: #000;
   -moz-box-shadow: 10px 13px 7px #000000;
   -webkit-box-shadow: 10px 13px 7px #000000;
   box-shadow: 10px 13px 7px #000000;
}
#clear {
   clear: both;
}
#comment_area
{
   margin:0 auto;
   margin-top: 15px; 
   padding:0;
   text-align:center;
   height:auto;
   width:518px;
   padding:1px 10px 1px 10px;
   clear: left; /* fuerza a mostrarse debajo de cualquier caja flotante */

   opacity:.70; /*CSS3*/
   -moz-opacity:.70; /*Mozilla*/
   filter: alpha(opacity=80);/*IE*/
   
   border:double 4px #4356d1;
   -moz-border-radius-topleft: 0px;
   -moz-border-radius-topright:75px;
   -moz-border-radius-bottomleft:44px;
   -moz-border-radius-bottomright:0px;
   -webkit-border-top-left-radius:0px;
   -webkit-border-top-right-radius:75px;
   -webkit-border-bottom-left-radius:44px;
   -webkit-border-bottom-right-radius:0px;
   border-top-left-radius:0px;
   border-top-right-radius:75px;
   border-bottom-left-radius:44px;
   border-bottom-right-radius:0px;
}
img {
   border:0;
   width:98px;
   height:98px;
}
textarea {
   width: 515px;
   height: 100px;
   background-color: #edf3ff;
   border:solid 1px #4356d1;
   padding:2px 2px 2px 5px;
}
input {
   background-color: #edf3ff;
   border:solid 1px #4356d1;
}
hr {
   color: red;
}
h3,.nota,.campo{
   margin: 5px 0 5px 0;
   text-align:left;
   color: #fff;
}
h3, .campo {
   font-size:12px;
}
.requerido {
   color: yellow;
}
.nota, .requerido {
   font-size: 11px;
}
.submit {
   text-align:center;
   width:100%;
   margin: 5px 0 5px 0;
}

ejemplo de uso:
<div id='main'>
<div id="comment_box">
 <div class='numero'>1</div>
 <div class="avatar"><img src='AVATAR'></div>
 <div class='autor'>usuario dijo ..</div>
 <div class="contenido">comentario ..</div>
 </div>
 <div id='clear'/>
</div>
<div id="comment_box">
 <div class='numero'>2</div>
 <div class="avatar"><img src='AVATAR'></div>
 <div class='autor'>usuario dijo ..</div>
 <div class="contenido">comentario .. :s</div>
 </div>
 <div id='clear'/>
</div>
<div id="comment_area">
 <h3>Deja un comentario</h3>
 <p class='nota'>Tu Email NO será publicado. Los campos marcados con asteriscos 
(<span class="requerido">*</span>) son obligatoríos.</p>
 <form action="#" method="post" id="formComment">                
 <p class='campo'><input tabindex='1' id="txtNombre" name="txtNombre" size="30" 
type="text"> Nombre <span class="requerido">*</span></p>
  <p class='campo'><input tabindex='2' id="txtEmail" name="txtEmail" size="30" 
type="text" value='@'> Email <span class="requerido">*</span></p>
  <p class='campo'><input tabindex='3' id="txtURL" name="txtURL" size="30" 
type="text"> Web</p>
  <p class='campo'>Comentario: <span class="requerido">*</span></p>
  <p class='campo'><textarea tabindex='4' class='estilotextarea' id="txtComentario" 
name="txtComentario"></textarea></p>
  <p class='submit'><input tabindex='5' name="submit" id="submit" 
value="Publicar comentario" type="submit"></p>
   </form>
  </div>
 </div>

0 comentarios: Suscribete a los comentarios por RSS

Publicar un comentario

- Los comentarios están siendo moderados y serán publicados en la brevedad posible.