Foros del Web » Creando para Internet » CSS »

darle estilo a un scroll

Estas en el tema de darle estilo a un scroll en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/01/2010, 15:39
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Pregunta darle estilo a un scroll

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 ?.
  #2 (permalink)  
Antiguo 29/01/2010, 16:12
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: darle estilo a un scroll

solo conosco con jQuery... pero vamos debe haber con otras librerias.... ami me funciono
http://www.kelvinluck.com/assets/jqu...crollPane.html
  #3 (permalink)  
Antiguo 29/01/2010, 17:31
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Respuesta: darle estilo a un scroll

gracias por responder alexk. le dare una revisada.

alguna otra alternativa ?.

saludos.
  #4 (permalink)  
Antiguo 29/01/2010, 17:51
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: darle estilo a un scroll

flash, pero alli si no se jeje :P
pero es facil... prueba y veras....
  #5 (permalink)  
Antiguo 29/01/2010, 17:51
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 7 meses
Puntos: 15
Respuesta: darle estilo a un scroll

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
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?
  #6 (permalink)  
Antiguo 29/01/2010, 20:42
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: darle estilo a un scroll

mmmm...
son propiedades para IE y un par de navegadores... no existen para W3C... y no valida
  #7 (permalink)  
Antiguo 30/01/2010, 15:54
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Respuesta: darle estilo a un scroll

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

cualquier consulta, se los dire.

saludos.
  #8 (permalink)  
Antiguo 09/02/2010, 16:34
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Respuesta: darle estilo a un scroll

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
  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: 45px;
  9.     padding-right: 0px;
  10.     padding-bottom: 14px;
  11.     padding-left: 50px;
  12.     overflow: auto;
  13. }

este es el archivo de mi proyecto que estoy haciendo.

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

me pueden ayudar por favor ?.

saludos.
  #9 (permalink)  
Antiguo 09/02/2010, 17:10
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: darle estilo a un scroll

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 :)
  #10 (permalink)  
Antiguo 09/02/2010, 17:22
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Pregunta Respuesta: darle estilo a un scroll

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.

Última edición por esaenz22; 09/02/2010 a las 17:23 Razón: correccion.
  #11 (permalink)  
Antiguo 09/02/2010, 17:47
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: darle estilo a un scroll

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
  #12 (permalink)  
Antiguo 09/02/2010, 18:06
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Respuesta: darle estilo a un scroll

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

mejor lo muestro.

http://yfrog.com/59dibujowhj

saludos.

Última edición por esaenz22; 09/02/2010 a las 18:07 Razón: correccion.
  #13 (permalink)  
Antiguo 09/02/2010, 18:14
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: darle estilo a un scroll

Hola:

Cita:
Iniciado por esaenz22 Ver Mensaje

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

  #14 (permalink)  
Antiguo 09/02/2010, 18:22
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: darle estilo a un scroll

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...
  #15 (permalink)  
Antiguo 09/02/2010, 20:42
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Respuesta: darle estilo a un scroll

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.
  #16 (permalink)  
Antiguo 09/02/2010, 21:18
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: darle estilo a un scroll

.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
  #17 (permalink)  
Antiguo 10/02/2010, 07:57
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Respuesta: darle estilo a un scroll

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.

Última edición por esaenz22; 10/02/2010 a las 08:13 Razón: correccion.
  #18 (permalink)  
Antiguo 10/02/2010, 08:23
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Respuesta: darle estilo a un scroll

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
  1. .justificar_servicios {
  2.     font-family:Arial, Helvetica, sans-serif;
  3.     font-size:12px;
  4.     text-align: justify !important;
  5.     color: #CCCCCC;
  6.     width:680px;
  7.     height:268px;
  8.     overflow: auto;
  9.     padding-top: 0px;
  10.     padding-right: 0px;
  11.     padding-bottom: 11px;
  12.     padding-left: 48px;
  13. }

en que estare fallando ?.

saludos.

Última edición por esaenz22; 10/02/2010 a las 08:24 Razón: correccion.
  #19 (permalink)  
Antiguo 10/02/2010, 15:34
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: darle estilo a un scroll

Hola:

Cita:
Iniciado por esaenz22 Ver Mensaje
@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 Ver Mensaje
#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.

  #20 (permalink)  
Antiguo 10/02/2010, 16:37
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Respuesta: darle estilo a un scroll

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
  1. .jScrollPaneContainer {
  2.     position: relative;
  3.     overflow: hidden;
  4.     z-index: 1;
  5. }

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

Código CSS:
Ver original
  1. .jScrollPaneContainer {
  2.     position: relative;
  3.     overflow: hidden;
  4.     z-index: 1;
  5.     top: 40px;
  6. }

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
  1. .jScrollPaneContainer {
  2.     position: relative;
  3.     overflow: hidden;
  4.     z-index: 1;
  5.     top: 5px;
  6. }

despues utilize la condicion para que me valide en ie6.

Código HTML:
Ver original
  1. <!--[if lte IE 6]>
  2. <link rel="stylesheet" type="text/css" href="css/ie6.css">
  3. <![endif]-->

eso era todo. tema cerrado.

saludos

Última edición por esaenz22; 10/02/2010 a las 16:39 Razón: correccion.

Etiquetas: estilo, scroll
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:50.