feed twitter facebook LinkedIn facebook

CSS » Código fuente en una capa con scroll

octubre 31, 2010 por Víctor Cuervo 2 Comentarios Imprimir Imprimir

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).

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

  1.  
  2. < pre class="codigo" >
  3. <!-- Código fuente -->
  4. < /pre >
  5.  

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:

  1. .codigo{
  2. width:400px;
  3. height:300px;
  4. display:block;
  5. overflow:scroll
  6. }

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

Visualizar el Codigo
Visualiza el artículo
Descargar el Codigo
Descargar el código
Error en el Codigo
Error en el código
Foro sobre CSS
Foro sobre CSS
tags: , , ,

Artículos relacionados:

2 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

  1. Bitacoras.com
    octubre 31, 2010 #

    Información Bitacoras.com…

    Valora en Bitacoras.com: 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ácti……

  2. aulambra.com » Semana 25.octubre.2010
    noviembre 1, 2010 #

    [...] Código fuente en una capa con scroll [...]

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*