Artículos
CSS

Código fuente en una capa con scroll

31/Oct/2010

Hay situaciones en las que el contenido que queremos poner puede desbordar del tamaño de la capa en la que están contenidos. En este sentido ya vimos como controlar el overflow de una capa.

Ahora vamos a ver un caso práctico del uso de las capacidades CSS. Y es el que se produce, por ejemplo, al añadir código fuente que quieras mostrar en una página. Cosa que nos pasa ya en nuestros códigos fuente (y que deberíamos de subsanar). Así que veamos como podemos poner código fuente en una capa con scroll.

En este caso, ya que el contenido el código fuente y los caracteres pueden ser variopintos, va dentro de etiquetas PRE.

< pre class="codigo" >

< /pre >

La idea es ahora que el código fuente nos aparezca en una capa con scroll. Para ello vamos a manejar la propiedad CSS overflow. Lo que vamos a indicar, es que en caso de que haya overflow, se aplique un scroll.

El código CSS sería el siguiente:

.codigo{
  width:400px;
  height:300px;
  display:block;  
  overflow:scroll
}

De esta forma sencilla podremos tener capas en las cuales mostrar el código fuente. Sencillo verdad… Ahora solo queda que lo apliquemos a Linea de Código. :-D

Código Fuente

Descárgate el código fuente de Código fuente en una capa con scroll
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Test CSS

¿Te atreves a probar tus habilidades y conocimiento en CSS con nuestro test?

Test CSS
Suscribir
Notificar de
guest
2 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios