Css - Uso de overflow - Areas con Scroll

Códigos Css

Mostramos un area en la página con scroll. este seria un sencillo pero eficiente ejemplo de como utilizariamos la propieda overflow

Tutores.org

Inicio > Css

Visitas: 56,816 - 02/07/2005 1:27:54

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

/* Codigo ofrecido por Tutores.org */

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

ENLACE AL CODIGO

Si quieres enlazar desde tu pagina a este codigo

<a title="Tutores.org - Uso de overflow - Areas con Scroll" href="http://www.tutores.org/codigo/1498/" target="_blank">Uso de overflow - Areas con Scroll</a>

COMENTARIOS

Comentario usuario

PiRaTaRG 17/06/2006 15.24.08

3 5

Holaa! Acabo de encontrar este sitio y esta genial, no se dan una idea lo q busqué con respecto al acroll :( Paso a explicar, tengo un foro ipb y tengo problemas cuando utilizo el "code" si el texto es muy largo sobresale o me ensancha la página. Les dejo una imagen pa explicarlo mejor: http://img85.imageshack.us/img85/8281/code9lp.jpg
Una vez me dijeron q debia ir a: panel de admin -> LOOK & FEEL -> skin -> Edit Stylesheet (CSS Advanced Mode) y agregar algo en codemain pero no consigo dar en el clavo. Podrían ayudarme? les dejo el codigo.
[*CODE*].codetop,
.sqltop,
.htmltop{
background: #A0C48D url(<#IMG_DIR#>/css_img_code.gif) no-repeat right;
border: 1px dotted #000;
color: #000;
font-weight: bold;
margin: 0 auto 0 auto;
padding: 3px;
width: 98%;
}

.codemain,
.sqlmain,
.htmlmain{
background: #FAFCFE;
border: 1px dotted #000;
border-top: 0px;
color: #465584;
font-family: Courier, Courier New, Verdana, Arial;
margin: 0 auto 0 auto;
padding: 2px;
width: 98%;
}

/*
* ========================================
* old school quote and code styles - backwards compatibility
* ========================================
*/

#QUOTE,
#CODE{
background: #FAFCFE;
border: 1px solid #000;
color: #465584;
font-family: Verdana, Arial;
font-size: 11px;
padding: 2px;
white-space: normal;
}[*/CODE*]

Comentario usuario

adrian 26-06-2008 23:38:24

2 5

hola yo tengo una duda y quisiera ver si me podrias ayudar, es posible que el track del scroll aparezca hasta abajo, quieira sabe si me podrias manda el codigo si lo conoces. gracias

Comentario usuario

Jorge 08/11/2004 18.01.55

5 5

Hola necesito ayuda, URGENTE!, Alguien sabe como se hace para que en una caja de texto, cuando se hace un click, se marque todo el texto?

Por favor resp a mi mail

jorgito_kapo@hotmail.com, jorgito.kapo@gmail.com o en mi blog
http://jorgitokapo.blogspot.com

Comentario usuario

flor 05-07-2007 14:09:33

2 5

Hola necesito ayuda en algo, estoy haciendo unas tabla y necesito k cuando la pagina se miximice esta tabla se ponga del tamano de la pagina y cuando se minimize lo haga tambien. Si pueden porfis ayudenme. Gracias

Comentario usuario

Andy 31/08/2004 17.40.35

2 5

hola muy bueno el codigo lo que yo quiciera saber es si la puedo cambiar de posicion especificamente al centro ..bueno gracias por el codigo chau suerte.!

Comentario usuario

Sin definirSin definir

4 5

gracias tenia dias buscando esto, es muy facil y simple gracias mil gracias! =)

INSERTAR COMENTARIO

Usuario:
Email:
Comentario:
	Codigo Seguridad
	Antes de enviar un comentario... Todos los comentarios son revisados personalmente Todo comentario que no haga relacion al codigo mostrado en esta pagina sera eliminado Usuarios registrados tienen preferencia en recibir respuestas de ayuda!! Ademas de poder insertar Imagenes,Enlaces y otras propiedades del editor. Por favor, insertar los comentarios descriptivos.