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.