|
Uso de overflow - Areas con Scroll |
|
|
|
martes, 01 de agosto de 2006 |
|
Mostramos un area en la página con scroll. este seria un sencillo pero eficiente ejemplo de como utilizariamos la propieda overflow
Explicacion:
-
overflow: auto - Al especificar auto este mostrará las barras de scroll segun sean necesarias, horizontales, verticales o las dos, aunque el contenido no lo requiera
-
overflow: scroll - Mostrara las barras de scroll vertical u Horizontal siempre que el contenido lo requiera
-
overflow: visible - No se mostrarán barras de Scroll y todo el contenido se expandirá
-
overflow: hidden - No se mostrarán barras de Scroll y todo el contenido se colapsará según el tamaño que hayamos especificado en el Estilo
Codigo:
<!-- El codigo ha sido proporcionado: http://www.tutores.org -->
<a href="http://www.tutores.org">Codigo ofrecido por Tutores.org</a>
<head>
<style type="text/css">
div.scroll { height: 200px; width: 300px; overflow: auto; border: 1px solid #666666; background-color: #cccccc; padding: 8px;}
</style>
</head>
<body>
<div class="scroll">
<p>Este scroll esta creado con Css</p>
<p>
<span style="color: orange;">Color naranja</span>
Este seria mas texto,Este seria mas texto,Este seria mas texto,Este seria mas texto, </p>
<p>Texto normal,Texto normal, Texto normal
<span style="font-weight: bold; font-size: 22px;">NEGRITAS NEGRITAS NEGRITAS </span>
</p>
<p>Podemos agregar enlaces <a href="http://www.Tutores.org">Visita:tutores.org</a></p>
<p>Imagenes:<br><img src="/tutores/images/mundo3.gif"></p>
<p>Texto normal,Texto normal, Texto normal</p>
</div>
</body>
Fuente: tutores.org |