SprintDevelop.com - Diseño y desarrollo web - Diseño, desarrollo web,Aplicaciones Móviles, TabletasSprintDevelop.com - Diseño y desarrollo web
Mostrando Codigo - Css
Code

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
Visitas: 55,286 - 02/07/2005 1:27:54
DemoNO CONTIENE ARCHIVO DESCARGABLEComentario
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 probado en ChromeCodigo probado en Mozilla FirefoxCodigo probado en Internet Explorer 7+Codigo probado en OperaCodigo probado en Safari


    /* Codigo ofrecido por Tutores.org */

    1. <head>
    2. <style type="text/css">
    3. div.scroll {    height: 200px; width: 300px; overflow: auto; border: 1px solid #666666; background-color: #cccccc; padding: 8px;}
    4. </style>
    5. </head>
    6. <body>
    7. <div class="scroll">
    8.   <p>Este scroll esta creado con Css</p>
    9.   <p>
    10.   <span style="color: orange;">Color naranja</span>
    11.   Este seria mas texto,Este seria mas texto,Este seria mas texto,Este seria mas texto, </p>
    12.   <p>Texto normal,Texto normal, Texto normal
    13.   <span style="font-weight: bold; font-size: 22px;">NEGRITAS NEGRITAS NEGRITAS </span>
    14.   </p>
    15.   <p>Podemos agregar enlaces  <a href="http://www.Tutores.org">Visita:tutores.org</a></p>
    16.   <p>Imagenes:<br><img src="/tutores/images/mundo3.gif"></p>
    17.   <p>Texto normal,Texto normal, Texto normal</p>
    18. </div>
    19. </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 -->
    COMENTARIOS
    Comentario usuario
    17/06/2006 15.24.08
    5 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
    26-06-2008 23:38:24
    5 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
    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
    05-07-2007 14:09:33
    5 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
    31/08/2004 17.40.35
    3 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 definir
    3 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.