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>
(ejemplo)

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