[Ovillo] pseudo-clases en atributo style
Hola, Ovillo A ver si se os ocurre cómo darle solución a lo siguiente: En un sitio dinámico muestro todos los productos de un catálogo. Saco las imágenes de la base de datos, las remuestreo, las pongo en escala de grises y las meto en el css como background de un enlace, hasta ahí bien. Como tengo que darle un background distinto a cada producto, lo hago con el atributo style (a href=... style=background-image:...). El problema viene ahora: si quiero que al pasar el ratón por encima la imagen se muestre con color en lugar de en b/n, ¿hay manera de hacer algo parecido a a href=... *style[hover]*=background-image:... o tengo que recurrir a javascript? Un saludo Rodrigo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Separar silabas
Si no te convence ninguna solución CSS siempre puedes hacer uso de la entidad shy; que te permite señalar puntos de ruptura dentro de una palabra para estos casos. Úsalo en el/los sitios en los que convengas que se puede dividir la palabra, y en el momento de renderizar el texto, el navegador te dividirá la palabra por un guión en el punto que encuentre esta entidad si procede, dejándola tal cual en caso contrario. Por ejemplo, en el código... pLa palabra larga supercalifragilísticoespialidoso es capaz de afearme la justificación./p ...quedaría, si el contenedor es algo estrecho, tal que así: Lapalabra larga supercalifragilísticoespialidoso escapazde afearme la justificación. En cambio, cambiando el código por... pLa palabra larga supercalifragishy;lísticoespialidoso es capaz de afearme la justificación./p ...la presentación del texto quedaría así, en caso de un contenedor estrecho,: La palabra larga supercalifragi- lísticoespialidoso es capaz de afearme la justificación. o permanecería sin dividir, en caso de que el contenedor fuera lo suficientemente ancho, así: La palabra larga supercalifragilísticoespialidoso es capaz de afearme la justificación. Por supuesto, no te tienes por qué limitar a la hora de poner más de un shy; en la misma palabra si deseas que la palabra pueda dividirse por varias sílabas: pLa palabra larga sushy;pershy;cashy;lishy;frashy;gishy;lísshy;tishy;coshy;esshy;piashy;lishy;doshy;so es capaz de afearme la justificación./p Deberías usarlo en aquellas palabras tan largas que te parezca puedan ser conflictivas. Si el texto procede de un gestor de contenidos podrías crear un script de servidor intermedio que examine cada palabra de más de 'n' letras y, en caso afirmativo, que insertara un shy; entre las sílabas que se encuentren a partir del carácter número 'n'. Para averiguar donde comienza o termina un sílaba puedes utilizar varias aproximaciones, pero creo que una de las más sencillas consistiría en tener las más comunes en una matriz y realizar comparaciones. Espero haberte sido de ayuda y que tu texto quede como se merece. guiño Un saludo, David Merino Ogando On 9/2/07, JosÃ(c) Manuel (EB8CXW) [EMAIL PROTECTED] wrote: Hola a [EMAIL PROTECTED]: Mi pregunta era si se puede hacer con CSS, que cuando una palabra al final de una línea no entre entera la parta (por la silaba correcta) y pase lo que sobre a la segunda línea. Ya que ahora cuando justificas el texto y la palabra es grande y no entra en una línea la baja completa a la segunda línea, dejando un espacio en blanco en la línea anterior, eso a la vista es poco estético. Que el navegado parta la palabra o no, que tiene que ver con la programación de páginas web, o existe alguna utilidad, que si destrozarte la estructura de tu página te separe las silabas. Bueno volviendo a mi pregunta, existe alguna forma de hacerlo en CSS, y sino que forma lo hacéis sin utilizar CSS. Reitero mi agradecimiento, a los que ya me han contestado a pesar de no solucionar mi problema, y a los que me contesten. -- Un saludo, José Manuel Gran Canaria/España Si vas a escribir.. piensa en esto: no digas nada que no sea mas precioso que el silencio!!! LISTAS escribió: Ah, sí... ¡qué lindo sería! Pero no sé cuán tristes fueron esos años con el Quark, che... Yo la pasé de maravillas ante los fanáticos del PageMaker que si bien era compatible entre Macintosh y Windows no le llegaba ni a las rodillas al QXP (que todavía uso, amo y defiendo a pesar de la sombra de InDesign y de trabajar sobre la chapucera alfombra de Windows)... Pero ahora volvamos a CSS. Sí, lo de Firefox es maravilloso (otra maravilla más del mejor navegador que usé desde el '97 a esta parte). Y podría ser la antesala de la nueva generación de bowsers: pequeñas aplicaciones que leen el texto en memoria y al cargarse la página por completo, dibuje (render) la página aplicándole los cortes de acuerdo al idioma declarado en el body (body lang=ES en nuestro caso). Lo otro sería el wraping, que se podría crear con los mismos parámetros que usamos para definir áreas de mapas sensibles en una imagen (wraping: 10px) como si fuese un padding contextual. También estaría bueno y lo vengo planteando desde hace años. A.V.W. - Original Message - From: Agustin Bouillet [EMAIL PROTECTED] To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Sent: Saturday, September 01, 2007 1:34 PM Subject: Re: [Ovillo] Separar silabas Que tristes fueron esos años con el Quark; te entiendo perfectemente! Ahora uso InDesign.. De todos modos, me imagino que el corte de palabra podria llegar a adaptarse a los browsers; lo digo considerando que, por ejemplo, Mozilla ya trae incorporado un corrector otrográfico (lease diccionario). Supongo que en futuras versiones podrian adaptar una propiedad CSS que actue con él; de modo de poder especificar que tipo
Re: [Ovillo] pseudo-clases en atributo style
Hola Rodrigo,
en principio puedes especificar por CSS distintas imágenes de fondo para
los distintos estados del enlace (puesto que se trata de un enlace,
no?), y no utilizar JS querrá decir utilizar algún mecanismo en servidor
que haga la selección.
Si obtienes una lista de los productos a mostrar y conoces el límite de
productos mostrados (esto es, la BBDD te da ya una lista de 10, o de 20,
o de lo que sea pero un número conocido), puedes hacer que la propia
consulta a la BBDD te cree la hoja de estilos a la vez que el HTML.
Si eres tú quien ha creado el sistema de consultas a la BBDD puede ser
factible.
Tras la consulta a la BBDD:
- Puesto que la consulta necesariamente te devuelve un ARRAY con
los productos, puedes atribuir a cada producto un estilo
mediante el ID (a id=prod01... , a id=prod02..., hasta a
id=prod10 href= etc)
- A cada una de las imágenes recuperadas de la BBDD, atribuirle
un nombre según la nomenclatura anterior:
producto 01:color01.jpg bn01.jpg
producto 02 color02.jpg bn02.jpg
...
producto 10 color10.jpg bn10.jpg
- En la hoja de estilos tendrías los siguientes estilos:
#prod01.a:link, #prod01.a:visited {
background-image: url(./bn01.jpg)}
#prod01.a:active, #prod01.a:hover {
background-image: url(./color01.jpg)}
#prod02.a:link, #prod01.a:visited {
background-image: url(./bn02.jpg)}
#prod02.a:active, #prod02.a:hover {
background-image: url(./color02.jpg)}
...
#prod10 a:link, #prod10 a:visited {
background-image: url(./bn10.jpg)}
#prod10 a:active, #prod10 a:hover {
background-image: url(./color10.jpg)}
- En el HTML, para cada producto, debes construir el enlace
dando el ID de producto para que todo sea correcto.
Espero que te funcione
Un saludo
Victoria Gracia
El mar, 04-09-2007 a las 12:34 +0200, Rodrigo Álvarez Virgós escribió:
Hola, Ovillo
A ver si se os ocurre cómo darle solución a lo siguiente:
En un sitio dinámico muestro todos los productos de un catálogo. Saco
las imágenes de la base de datos, las remuestreo, las pongo en escala de
grises y las meto en el css como background de un enlace, hasta ahí bien.
Como tengo que darle un background distinto a cada producto, lo hago con
el atributo style (a href=... style=background-image:...). El
problema viene ahora: si quiero que al pasar el ratón por encima la
imagen se muestre con color en lugar de en b/n, ¿hay manera de hacer
algo parecido a a href=... *style[hover]*=background-image:... o
tengo que recurrir a javascript?
Un saludo
Rodrigo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] pseudo-clases en atributo style
Pues va a ser que no :(
El mar, 04-09-2007 a las 13:20 +0200, Rodrigo Álvarez Virgós escribió:
Agradezco a todos vuestras aportaciones, pero mi pregunta es si existe
algo parecido a
a style[hover]=... (en el A-T-R-I-B-U-T-O style)
a:hover {...} en una hoja de estilo no me sirve, no sé si es que no me
he explicado bien ...
Victoria, tu solución ya la había pensado, pero es imposible conocer el
límite de productos mostrados, y además las imágenes recuperadas de la
base de datos no las guardo como jpg, las muestro sin más.
Un saludo
Rodrigo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] pseudo-clases en atributo style
Agradezco a todos vuestras aportaciones, pero mi pregunta es si existe
algo parecido a
a style[hover]=... (en el A-T-R-I-B-U-T-O style)
a:hover {...} en una hoja de estilo no me sirve, no sé si es que no me
he explicado bien ...
Victoria, tu solución ya la había pensado, pero es imposible conocer el
límite de productos mostrados, y además las imágenes recuperadas de la
base de datos no las guardo como jpg, las muestro sin más.
Un saludo
Rodrigo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] pseudo-clases en atributo style
Hola Rodrigo,
Creo que las respuestas que te han dado...
Te dejo un enlace:
http://www.w3.org/TR/css-style-attr
Pero no cuentes con el soporte de los navegadores.
Puedes probar con:
.. onmouseover=this.style... onmouseout=this.style...
jeje, pero te aconsejo que barajes las otras opciones.
Original Message
Subject: Re: [Ovillo] pseudo-clases en atributo style
From: Rodrigo ?lvarez Virg?s [EMAIL PROTECTED]
Date: Tue, September 04, 2007 4:20 am
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Agradezco a todos vuestras aportaciones, pero mi pregunta es si existe
algo parecido a
a style[hover]=... (en el A-T-R-I-B-U-T-O style)
a:hover {...} en una hoja de estilo no me sirve, no sé si es que no me
he explicado bien ...
Victoria, tu solución ya la había pensado, pero es imposible conocer el
límite de productos mostrados, y además las imágenes recuperadas de la
base de datos no las guardo como jpg, las muestro sin más.
Un saludo
Rodrigo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] pseudo-clases en atributo style
Usando css:
Te cuento segun mi experiencia, si quieres cambiar una imagen sin usar
javascript tienes q tener en cuenta que la imagen que se sustiuira deberia
de estar cargada, por lo q lo se podria hacer es cargar las dos imagenes en
una, y mostrar primero la parte superior y luego la inferior.
Sin embargo este sistema no se suele utilizar para mostrar imagenes grandes
sino para hacer botones tipo encendido y apagado.
La clase del a quedaria mas o menos
a{
background:url(miimagen.jpg) no-repeat left top;
}
a:hover {
background-position:0% -42px;
}
Tambien podrias pobrar utilizando los filtros que solo funcionan para
el explorer 6, el sistema seria
parecido pero haciendo la llamada al filtro.
Enlace imagen normal
a{
background:url(miimagen.jpg);
;
}
Imagen en byn
a:hover{
filter:gray
}
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] padding-left en los option de un optgroup
Hola lista...
Estoy intentado que las opciones que estén agrupadas en una lista
desplegable no tenga un padding-left, pero no lo consigo.
Si alguien puede echarme una mano...
El código sería:
select id=id name=name
option value=value1option1/option
optgroup label=label
option value=value2option2/option
option value=value3option3/option
option value=value4option4/option
/optgroup
/select
Y el estilo:
style
#id optgroup option{
Padding-left: 0em;
}
/style
Lo que querría es que no se tabulasen por defecto las option2, option3 y
option4
Muchas gracias de antemano...
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] padding-left en los option de un optgroup
On 9/4/07, Javier Sarmiento [EMAIL PROTECTED] wrote: que las opciones que estén agrupadas en una lista desplegable no tenga un padding-left. que yo sepa, no se puede aplicar otras cosa que color de tipografia en IE. algunos links relacionados: http://archivist.incutio.com/viewlist/css-discuss/56356 http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single-optgroup/ -- inti castro [EMAIL PROTECTED] ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] [OT] Presupuesto en Flash de 2 sitios
Hola, les tiro una punta: Necesito saber si alguien puede hacerme un sitio en Flash similar (o mejor) a este enlace: http://www.elmosquitoparrilla.com.ar/ Y obviamente: cuánto cotiza, forma de pago, etc. Yo estoy en la Ciudad Autónoma de Buenos Aires, Argentina. En realidad son 2 trabajos en Flash. El segundo (el enlace que me pasó el cliente por teléfono se me borró del histórico del navegador al pasar el CCleaner) es muy interactivo y es para ropa de niños. Además, llevaría algunas páginas con juegos (hay que inventarlos) y una base de datos para que el cliente pueda poner y sacar fotos a su comodidad sin intervención del diseñador. ¿Quién se anima? Los presupuestos pásenmelos por vía privada así no molestamos a los demás. Gracias. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] sueldos (OT)
Gracias por compartir ese dato con nosotros solo quiero marcar algunas cositas de esa pagina: A. Ratifica mi postura al darle a Real Academia Española, el mismo grado que a otras academias de la lengua. B. Si es necesaria una Asociacion de Academias, es porque existen diferencias regionales en el lenguaje que algunos quieren negociar. C. La permanencia en el tiempo de las diferentes Academias de modo autonomo y no regulado por dicho encuentro muestra la naturaleza de las diferencias regionales. D. Toda lengua es un proceso dinamico. Uno de los objetivos de dicho encuentro es (y cito) velar porque su natural crecimiento sea conforme a la tradición. Los elementos tradicionales estan por definicion establecidos y yo consensuados, por lo que no permiten un crecimiento dinamico. E. La relacion en la representacion es de 20/1, siendo ese 1 el perteneciente a paises europeos y el 20 a pasises americanos. F. Existen Congresos diferentes sobre el habla hispana (el ultimo fue este año en Argentina y participe activamente de el) que plantean un revisionismo sobre la opresion de la lengua española sobre diferentes regiones hispano hablantes. G. Por ultimo, y sobre todo, la lengua es un proceso cultural. Es creada por quienes la usan y por lo tanto todo intento de regulacion estara siempre atrasado en el tiempo. Como ejemplo de esto basta marcar que cuando la Real Academia Española incorpora neologismos a su listado de palabras aceptadas como parte de la lengua, ya perdio la parte de neo, y muchas veces hasta son palabras ya caidas en el desuso (y es el desuso lo que mata a una lengua --- averiguen cuantas lenguas mueren por año y van a ver un dato tragico). Ay, que pena, la representacion del pais que dio origen al off topic es la la Academia MeXicana de la Lengua. jajajajajaj. Creo que con eso queda cerrada esta charla que no se a cuantos les habra sido util. Ahora a seguir laburando (estara esa palabra en el listin de la RAE?) con las paginas y a seguir peleandonos con las diferencias entre IE y las normas consensuadas para las web. Saludos Mati ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] pseudo-clases en atributo style
On 9/4/07, Rodrigo Álvarez Virgós [EMAIL PROTECTED] wrote:
Hola, Ovillo
A ver si se os ocurre cómo darle solución a lo siguiente:
En un sitio dinámico muestro todos los productos de un catálogo. Saco
las imágenes de la base de datos, las remuestreo, las pongo en escala de
grises y las meto en el css como background de un enlace, hasta ahí bien.
Como tengo que darle un background distinto a cada producto, lo hago con
el atributo style (a href=... style=background-image:...). El
problema viene ahora: si quiero que al pasar el ratón por encima la
imagen se muestre con color en lugar de en b/n, ¿hay manera de hacer
algo parecido a a href=... *style[hover]*=background-image:... o
tengo que recurrir a javascript?
Un saludo
Rodrigo
Lo que quieres necesita javascript:
function addStyle(style) {
var styleNode = document.createElement(style);
document.body.appendChild(styleNode);
var styleSheet = document.styleSheets[document.styleSheets.length - 1];
styleSheet.insertRule(style, 0);
}
Luego la metes con
addStyle(#enlace:hover {background-image: url('algo.jpg') });
Saludos
--
Linux Registered User # 386081
A menudo unas pocas horas de Prueba y error podrán ahorrarte minutos
de leer manuales.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] sueldos (OT)
En todos los casos yo preferiría que pusieran los tildes y utilizaran con corrección las reglas ortográficas, comunes a todas las academias. No sea cosa que uno sienta que la clase sobre estilos la da un experto en tablas. - Original Message - From: Matias Saavedra [EMAIL PROTECTED] To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Sent: Tuesday, September 04, 2007 9:36 PM Subject: Re: [Ovillo] sueldos (OT) Gracias por compartir ese dato con nosotros solo quiero marcar algunas cositas de esa pagina: A. Ratifica mi postura al darle a Real Academia Española, el mismo grado que a otras academias de la lengua. B. Si es necesaria una Asociacion de Academias, es porque existen diferencias regionales en el lenguaje que algunos quieren negociar. C. La permanencia en el tiempo de las diferentes Academias de modo autonomo y no regulado por dicho encuentro muestra la naturaleza de las diferencias regionales. D. Toda lengua es un proceso dinamico. Uno de los objetivos de dicho encuentro es (y cito) velar porque su natural crecimiento sea conforme a la tradición. Los elementos tradicionales estan por definicion establecidos y yo consensuados, por lo que no permiten un crecimiento dinamico. E. La relacion en la representacion es de 20/1, siendo ese 1 el perteneciente a paises europeos y el 20 a pasises americanos. F. Existen Congresos diferentes sobre el habla hispana (el ultimo fue este año en Argentina y participe activamente de el) que plantean un revisionismo sobre la opresion de la lengua española sobre diferentes regiones hispano hablantes. G. Por ultimo, y sobre todo, la lengua es un proceso cultural. Es creada por quienes la usan y por lo tanto todo intento de regulacion estara siempre atrasado en el tiempo. Como ejemplo de esto basta marcar que cuando la Real Academia Española incorpora neologismos a su listado de palabras aceptadas como parte de la lengua, ya perdio la parte de neo, y muchas veces hasta son palabras ya caidas en el desuso (y es el desuso lo que mata a una lengua --- averiguen cuantas lenguas mueren por año y van a ver un dato tragico). Ay, que pena, la representacion del pais que dio origen al off topic es la la Academia MeXicana de la Lengua. jajajajajaj. Creo que con eso queda cerrada esta charla que no se a cuantos les habra sido util. Ahora a seguir laburando (estara esa palabra en el listin de la RAE?) con las paginas y a seguir peleandonos con las diferencias entre IE y las normas consensuadas para las web. Saludos Mati ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
