Bueno, hoy he estado trabajando en una web donde quiero colocar un pequeño div que servirá para ir agregando noticias y que este aunque este muy largo no deforme la web colocando un scroll si el cuadro sobre pasa el largo y ancho de mi div principal. Bien, para hacer esto es muy sencillo, tan solo tenemos que agregar la propiedad overflow:scroll; a nuestro div y listo.
Aquí esta un ejemplo rápido de la web w3schools que me envió @sgenius por el twitter ya que pregunte si también funcionaba en ie6 y el me mando eso :).
div { width:150px; height:150px; overflow:scroll; } |
Y así lo estaba haciendo pero no estaba seguro si también servia para ie6, pero pues me dijeron que si, así que entonces seguí con mis modificaciones y cree el siguiente div con scrolls y algo de estilo para que se vea bien chukis nice. A continuación les voy a dejar el código para que vean lo que hice.
Primero tenemos el CSS que necesitamos para darle formato, a ustedes les tocara investigar para que sirve cada cosa o preguntarme en los comentarios.
/*NOTICIAS*/ .contenedornoticias { padding: 0px 0px 0px 0px; margin-right: 0%; margin-left: 0%; clear: both; width: 200px; height:316px; margin-top: 0px; margin-bottom: 5px; line-height: 17px; color: #272727; font-weight: bold; overflow:scroll; } .noticias { padding: 0px 0px 0px 0px; margin-right: 0%; margin-left: 0%; clear: both; width: 98%; margin-top: 0px; margin-bottom: 1px; border: 1px solid #DAE1B0; line-height: 17px; color: #272727; font-weight: bold; background-color:#FC9; } .noticias h1{ font-size:12px; background-color:#F39; color:#FFF; margin-top:0; margin-bottom:0; } .noticias p { font-size: 10px; font-weight: normal; line-height: 9pt; text-align: justify; margin: 1px 2px 2px 2px; } /*FIN NOTICIAS*/ |
.contenedornoticias: Este es el DIV que utilizo como contenedor y va ser al que le pondré los scrolls.
.noticias: Este lo utilizo para crear varios contenedores que van a tener las noticias que van a estar dentro de .contenedornoticias, o sea puedo ir agregando los que sea.
.noticias h1: Este es para Los títulos de las noticias o eventos
.noticias p :Con este le doy formato al párrafo de las noticias, es decir, la descripción.
Ya implementado en el código HTML quedaría de la siguiente forma.
<div class="contenedornoticias"> <div class="noticias"> <h1><strong>Noticia</strong>: </h1> <p>El dia bla bla<br />No</p> </div> <div class="noticias"> <h1>Evento 1</h1> <p>Colocar aquí el contenido para class "texto"</p> </div> <div class="noticias"> <h1>Evento 2</h1> <p>Colocar aquí el contenido para class "texto"</p> </div> </div> |
Y el resultado quedaría así.
Ya lo único que resta sería cambiar los colores, el ancho y demás cosas que ustedes quieran.
Y bueno, eso es todo, espero les guste y si tienen dudas, pues llamen a quien mas confianza le tengan o preguntenme en los comentarios 🙂
Ching!! el blog me detecta parte del código y no se ve todo completo u.u luego les pongo una captura del código html porque le falta un pedazo en cada div.
lo bueno que tu le sabes a esto, porque a mi se me complica demasiado! jajaja
Jajaja luego te lo explico para que vayas agregando noticias mas rápido que como lo estabas haciendo con el Flash 😛
También acepto sugerencias de como mejorarlo esta onda 🙂