darle estilo a un scroll

esaenz22 · #1 (**permalink**) 29/01/2010, 15:39

buenas. una consulta. se puede hacer un scroll como la imagen que voy a mostrar:

creo que se pone overflow: scroll.

mi consulta es si se puede dar un estilo a un scroll ?.

alexk · #2 (**permalink**) 29/01/2010, 16:12

solo conosco con jQuery... pero vamos debe haber con otras librerias.... ami me funciono
http://www.kelvinluck.com/assets/jqu...crollPane.html

esaenz22 · #3 (**permalink**) 29/01/2010, 17:31

gracias por responder alexk. le dare una revisada.

alguna otra alternativa ?.

saludos.

alexk · #4 (**permalink**) 29/01/2010, 17:51

flash, pero alli si no se jeje :P
pero es facil... prueba y veras....

Jask · #5 (**permalink**) 29/01/2010, 17:51

No se si te servirá esta web: http://websitetips.com/articles/css/scrollbars/ o esta http://www.webtaller.com/construccio...dor_en_css.php

Suerte

alexk · #6 (**permalink**) 29/01/2010, 20:42

mmmm...
son propiedades para IE y un par de navegadores... no existen para W3C... y no valida

esaenz22 · #7 (**permalink**) 30/01/2010, 15:54

gracias por sus repsuestas. les dare una revisada a los links que pusieron.

cualquier consulta, se los dire.

saludos.

esaenz22 · #8 (**permalink**) 09/02/2010, 16:34

buenas de nuevo. implemente el jquery scroll pane.

pero tengo un problema. porque la barra del scroll se coloca mas arriba ?

este es mi estilo.

Código CSS:

Ver original.justificar_noticias {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    text-align: justify !important; /* Para alinear a la izquierda */
    color: #CCCCCC;
    width:680px;
    height:268px;
    padding-top: 45px;
    padding-right: 0px;
    padding-bottom: 14px;
    padding-left: 50px;
    overflow: auto;
}

este es el archivo de mi proyecto que estoy haciendo.

http://viaintercom.com/teirsac/noticias.php

me pueden ayudar por favor ?.

saludos.

alexk · #9 (**permalink**) 09/02/2010, 17:10

enves de ".justificar_noticias" juega con el padding, margin, width y height con "#cuerpo_noticia" ya que es el div contenedor si lo haces con otor div hijo te pasara lo mismoya que el scroll usa posiciones absolutas automaticas sino me equivoco... pero bueno :)

esaenz22 · #10 (**permalink**) 09/02/2010, 17:22

gracias por la respuesta. pero como no tengo mucha experiencia de usar las posiciones absolutas, solo he utilizado divs de margin, width y height.

si modifico las propiedades de margin, width y height del id #cuerpo_noticia, el div pude que sze desplaze hacina abajo si le aumento de tamaño, ya que el div cuerpo_noticia contiene a otro div de .justificar_noticias.

por eso escribi que alguien me oriente.

saludos.

alexk · #11 (**permalink**) 09/02/2010, 17:47

pues no te entiendo... como te digo es "#cuerpo_noticia" no ".justificar_noticias".... no que me mas necesitas para resolverlo no hay que modificar mas que el padding y los tamaños... :S

esaenz22 · #12 (**permalink**) 09/02/2010, 18:06

en "#cuerpo_noticia" no es el problema. el problema es en "#justificar_noticias". bueno lo cambie por un id.

ya he cambiado los paddings de la clase ".justificar_noticias", pero aun asi no se arregla. en el padding-top le cambie por el valor de 20px, se ubica donde esta el scroll. pero cuando lo cambie a 40px, se mantuvo en la posicion donde estaba, pero el scroll no parecia ubicarse en el div ".justificar_noticias".

por eso puse el estilo.

Código CSS:

Ver original#justificar_noticias {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    text-align: justify !important; /* Para alinear a la izquierda */
    color: #CCCCCC;
    width:680px;
    height:268px;
    padding-top: 40px;
    padding-right: 0px;
    padding-bottom: 14px;
    padding-left: 50px;
    overflow: auto;
}

mejor lo muestro.

http://yfrog.com/59dibujowhj

saludos.

jomaruro · #13 (**permalink**) 09/02/2010, 18:14

Hola:

Cita:

Iniciado por esaenz22

#justificar_noticias {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align: justify !important; /* Para alinear a la izquierda */
color: #CCCCCC;
width:680px;
height:268px;
padding-top: 40px;
padding-right: 0px;
padding-bottom: 14px;
padding-left: 50px;
overflow: auto;
}

Un text-align:justify ¿para alinear a la izquierda? Revisa eso porque no te está funcionando, justify justifica si lo quieres alinear a la izquierda deberás poner left.

Saludos.

alexk · #14 (**permalink**) 09/02/2010, 18:22

ya ten entendi tio....

Cita:

ya he cambiado los paddings de la clase ".justificar_noticias", pero aun asi no se arregla. en el padding-top le cambie por el valor de 20px

Código:

   1.
      #justificar_noticias {
   2.
          font-family:Arial, Helvetica, sans-serif;
   3.
          font-size:12px;
   4.
          text-align: justify !important; /* Para alinear a la izquierda */
   5.
          color: #CCCCCC;
   6.
          width:680px;
   7.
          height:268px;
   8.
          padding-top: 40px;
   9.
          padding-right: 0px;
  10.
          padding-bottom: 14px;
  11.
          padding-left: 50px;
  12.
          overflow: auto;
  13.
      }

alli no hay 20px

como sea no importa cuanto le pongas ES EL DIV CON EL SCROLL o sea que BAJARA O SUBIRA CON EL CONTENIDO EN EL.... si quieres separacion con el top TIENES QUE DARLE PADDING A UN ELEMENTO PADRE QUE NO SE MUEVA! como #cuerpo_noticia claro si no lo intentas pues solo no se arregla...

esaenz22 · #15 (**permalink**) 09/02/2010, 20:42

gracias por la respuestas

@jomaruro. la propiedad text-align: justify es para alinear a la izquierda ?.

que yo sepa es para justificar textos, es decir alinearlos correctamente. de todas mahnera le dare una revisada.

@alexk. si le doy padding: 20 a "#cuerpo_noticia", se desalineara el div y perdera su posicion actual.

alguna otra solucion ?.

saludos.

alexk · #16 (**permalink**) 09/02/2010, 21:18

.justificar_noticias quitarle el padding-top osea
padding:0 0 14px 50px;
y a
.jScrollPaneContainer
aprovechar que tiene posicion absoluta ponerle un
top:40px;
o lo que creas conveniente...
pero vamos la mejor opcion es la que te digo desde antes...
y nose por que no lo intentas suponiendo que partes de un diseño "psd" o "png" pues alli tienes las medidas y es cuestion de sumar y restar las medidas... :S no le veo el problema pero bueno suerte

esaenz22 · #17 (**permalink**) 10/02/2010, 07:57

gracias por la respuesta alexk. como usted me recomendo que utilizara el jquery scrollPane, debi preguntarle antes que si debo modificar la clase .jScrollPaneContainer y si debo alli ponerle padding a la clase.

disculpeme si no he especificado bien mi pregunta.

saludos.

esaenz22 · #18 (**permalink**) 10/02/2010, 08:23

ya corregi mi clase de .justificar_noticias, le puse en la clase .jScrollPaneContainer top:40 y corregi mi problema.

ahora mi problema esta en la clase .justificar_servicios. me he guiado en la anterior clase, le puse padding-top: 0 y me muestra de esta manera:

mi clase

Código CSS:

Ver original.justificar_servicios {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    text-align: justify !important;
    color: #CCCCCC;
    width:680px;
    height:268px;
    overflow: auto;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 11px;
    padding-left: 48px;
}

en que estare fallando ?.

saludos.

jomaruro · #19 (**permalink**) 10/02/2010, 15:34

Hola:

Cita:

Iniciado por esaenz22

@jomaruro. la propiedad text-align: justify es para alinear a la izquierda ?.

que yo sepa es para justificar textos, es decir alinearlos correctamente. de todas mahnera le dare una revisada.

Nooo, está bien, es para justificar texto. Te lo indicaba porque a la derecha tienes un comentario que dice para alinear a la izquierda

Cita:

Iniciado por esaenz22

#justificar_noticias {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align: justify !important; /* Para alinear a la izquierda */
color: #CCCCCC;
width:680px;
height:268px;
padding-top: 40px;
padding-right: 0px;
padding-bottom: 14px;
padding-left: 50px;
overflow: auto;
}

No fuera a ser que pensaras que era para alinear a la izquierda porque no te iba a funcionar, nada mas.

Saludos.

esaenz22 · #20 (**permalink**) 10/02/2010, 16:37

bueno. gracias por aclararme la duda jomaruro. de todas maneras he solucionado mi problema. lo unico que hice es hacer una validacion de la clase del jquery scroll ".jScrollPaneContainer" para ie6.

anteriormente no tenia la propiedad top:

Código CSS:

Ver original.jScrollPaneContainer {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

pero siguiendo el consejo de alexk coloque la propiedad top en 40px.

Código CSS:

Ver original.jScrollPaneContainer {
    position: relative;
    overflow: hidden;
    z-index: 1;
    top: 40px;
}

vi los resulatdos en firefox, ie6, ie7, ie8. pero me di con la sorpresa que no se visualizaba bien en ie6. asi que he creado un archivo css para colocar la clase del .jScrollPaneContainer y colocarle la propiedad top a 5px.

Código CSS:

Ver original.jScrollPaneContainer {
    position: relative;
    overflow: hidden;
    z-index: 1;
    top: 5px;
}

despues utilize la condicion para que me valide en ie6.

Código HTML:

Ver original<!--[if lte IE 6]> 
<link rel="stylesheet" type="text/css" href="css/ie6.css">
<![endif]-->

eso era todo. tema cerrado.

saludos