How to: Colocar scrolls en un div

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í.
css div scroll con css
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 🙂

    1. danielmd 13 julio 2009
    2. karlaSanchez 13 julio 2009
      • danielmd 13 julio 2009

    Leave a Comment

    Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.