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
Mostrando Codigo - Css
EXPLICACION
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<!-- Inicio enlace Tutores.org -->
<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>
<!-- Final enlace Tutores.org -->
<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>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Comentario usuario
PiRaTaRG
17/06/2006 15.24.08
1
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*]
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
4
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
1
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
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
3
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
5
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
3
5
gracias tenia dias buscando esto, es muy facil y simple gracias mil gracias! =)
INSERTAR COMENTARIO