como introduzco esta linea en mi archivo css

leskolpykos · #1 (**permalink**) 03/04/2009, 00:13

amigos mi problema es muy sencillo...
tengo ésta línea

Código HTML:

<td onmouseover = "this.style.background = '#FFCC66'" onmouseout = "this.style.background = '#FFFFFF'">

me funciona perfecto, paso el mouse y cambia el color de la celda, pero simplemente quisiera saber como meto esa funcion en mi hoja css, osea no quiero que este en el codigo de la pagina sino dentro de mi hoja de estilos..

no se ya como hacerlo..

gracias a quien me pueda asesorar

xurxinho · #2 (**permalink**) 03/04/2009, 06:22

<td onmouseover = "this.style.background = '#FFCC66'" onmouseout = "this.style.background = '#FFFFFF'">

bueno primero al td le das un nombre, e invocas a otra función javaScript.

Tu hoja de estilos

td.celda{background-color:#ffffff;}
td.celdahover{background-color:#ffcc66;}

html

<td class="celda" onmouseover = "this.className = 'celdahover'" onmouseout = "this.className = 'celda'">

Raulmmmm · #3 (**permalink**) 03/04/2009, 06:22

Sería algo así:

Código:

.iluminar { background: #fff; }
.iluminar:hover { background: #fc6; }

Y luego le pones la class al td:

Código HTML:

<td class="iluminar">

EDITO: Es verdad, xurxinho, no funciona en IE6. Pero leskolpykos, si la mayoría de la gente que visita tu web no usa IE6 da igual que no les funcione, ¿no crees

?. Sólo es un efecto.

xurxinho · #4 (**permalink**) 03/04/2009, 06:26

La solución de Raulmmmm es muy buena para mozilla cualquier versión o explorer versión nueva, pero desgraciadamente no funciona en explorer 6. Lo he probado.

Hay soluciones .htc pero a mi personalmente me parece que para esto no hace falta, como veas.

gorkreg · #5 (**permalink**) 03/04/2009, 09:08

La solución te la ha dado Raulmmmmm.

1.- Das un nombre de clase a <td> (<td class="efecto">)
2.- Le aplicas la siguiente regla CSS:

.efecto:hover { background: #FFCC66; }

Solo necesitas esta regla. Siempre y cuando el color del texto de todas las celdas sea #FFFFFF, como supongo.

Internet Explorer solo soporta las pseudoclases (el ":hover") en las anclas y es por ello que no funciona al aplicárselo a una clase. Inserta este código en el <head> de tu documento y funcionará también en Explorer:




Suerte y cuéntanos si has solucionado el problema.

kseso? · #6 (**permalink**) 03/04/2009, 09:15

Pero ie6 sí entiende el a:hover, así que si el contenido de la celda lo conviertes en un enlace "<a href="#"...> con las propiedades (el enlace, no la celda) display: block y de las mismas medidas que la celda, ya le puedes utilizar las pseudoclases sobre el enlace y que ie6 sí entienda.

xurxinho · #7 (**permalink**) 03/04/2009, 09:15

muy bueno voy a probar

gorkreg · #8 (**permalink**) 03/04/2009, 09:38

Sí, claro. Yo lo que haría es eliminar las tablas por completo y empezar a usar divs. Más sencillo, más práctico y más acorde a los estándares.

A no ser que se trate de alguna tabla de datos, claro.

leskolpykos · #9 (**permalink**) 03/04/2009, 10:00

amigos gracias por sus aportes y comentarios, Raulmmmm por desgracia el 98% de los usuarios q visita mi portal usa IE :S asi que si es como comentas que no funciona con IE sería cuchillo para mi garganta.. gorkreg voy a probar esa forma que me parece que es lo que busco. kseso? no entendi muy bien lo de convertirlo en enlace.. :S

en realidad, es que nuuuuuunca había trabajado con css, mi portal es muuuuuy grande, y se veia perfecto en IE pero un dia alguien me dijo que en firefox se distorcionaba. Cuando yo mismo lo vi casi me da algo! Es por eso que estoy reestructurando el portal con una nueva imagen y ahora basado todo en css, y cada linea que pongo la voy probando en IE 7, IE 8 y en Firefox y hasta ahora va bien..

me he leido muchas paginas de css y aqui tambien he aclarado muchas dudas leyendo las faqs pero hay algunas cositas que por mas que las busco no las encuentro como las necesito.. voy a probar y veré..

Mil gracias por sus aportes, voy aprendiendo :D

leskolpykos · #10 (**permalink**) 03/04/2009, 10:05

por cierto, leí en una pagina algo que me confundió, que debia poner siempre unas cosas en mayusculas en mi archivo css y yo todo lo estoy escribiendo en minusculas :S deoxxx eso interfiere negativamente en algo?

gorkreg · #11 (**permalink**) 03/04/2009, 10:31

No se a qué se refieren cuando dicen que hay que poner siempre unas cosas en mayúsculas. Probablemente los METATAGS, que funcionan igual en minúsculas. Ignóralo. Tú sigues con tus minúsculas que es el buen camino.

A lo que kseso? se refería es a introducir un ancla dentro de la celda (<td><a h ref="#">texto</a</td>) y convertir esa ancla en elemento de bloque pra poder darle una altura y una anchura (la misma que la celda). De todas formas, yo te recomendaría aprender unas reglas básicas de CSS para posicionar los elementos en la página y, en vez de trabajar con celdas, hacerlo con elementos de lista (li).

leskolpykos · #12 (**permalink**) 03/04/2009, 10:48

se envio varias veces la respuesta.. sorry

leskolpykos · #13 (**permalink**) 03/04/2009, 10:55

a ver.. me funciona lo que me planteó gorkreg (gracias de antemano) pero ocurre lo siguiente..

yo tenía esto en mi web:

<td class="table_6>

y en la hoja de estilos tenia esto:

.table_b6 {
width: 180px; border-collapse: collapse; border-right: #ff9933 1px solid; border-left: #ff9933 1px solid; border-bottom: #ff9933 1px solid; border-top: #ff9933 1px solid; padding-right: 5px; padding-left: 5px; padding-bottom: 5px; padding-top: 5px; margin: 0px; font-weight: bold; font-size: 0.75em; color: #000000; font-family: arial,verdana,helvetica,sans-serif; text-align: left
}

ahora tengo que agregarle esto:

.efecto:hover { background: #FFCC66; }

y lo que hice fue unirlos asi:

.efecto:hover {
background: #FFCC66; width: 180px; border-collapse: collapse; border-right: #ff9933 1px solid; border-left: #ff9933 1px solid; border-bottom: #ff9933 1px solid; border-top: #ff9933 1px solid; padding-right: 5px; padding-left: 5px; padding-bottom: 5px; padding-top: 5px; margin: 0px; font-weight: bold; font-size: 0.75em; color: #000000; font-family: arial,verdana,helvetica,sans-serif; text-align: left
}

y me hace el cambio de color al pasar el mouse pero con una fuente y la fuente que coloco alli al pasar el mouse.. ¿que estoy haciendo mal?

gorkreg · #14 (**permalink**) 03/04/2009, 11:49

Lo que estás haciendo es dar unas reglas a <td> y otras a <a>. Dále todas al mismo elemento, en este caso el ancla. Supongo que tu html dice algo así:

<td class="table_6"><a h ref="#" class="efecto">texto</a></td>

No necesitas para nada la clase de la celda <td> pues ahora tienes el ancla con las mismas dimensiones y a la que le puedes aplicar las reglas. El nombre de clase "efecto" es el que le he dado yo pero puedes nombrarlo como te parezca, por ejemplo, "patata". El HTML te quedaría así:

<td><a h ref="#" class="efecto">texto</a></td>

Ahora borra tus CSS, da al ancla (.patata) la misma declaración que habías dado a .table_6 y añade el efcto rollover:

.patata:hover { background: #FFCC66; }

Cuando usas una pseudoclase (:hover) no tienes que repetir todas las declaraciones, solo lo que quieres que cambie, en este caso, el fondo.

Suerte y dinos si te ha funcionado

Mikmoro · #15 (**permalink**) 03/04/2009, 16:29

Lo que te dice kseso? es esto, que funciona perfectamente en IE6 y no necesita javascript.

leskolpykos · #16 (**permalink**) 03/04/2009, 19:09

bueno gorkreg gracias por tu ayuda, en realidad tengo q leer mucho sobre css para poder entenderlo como usarlo pss nunca lo había utilizado... creo que me compliqué para lograr al final lo que queria, supongo que no es la forma más idónea ni la correcta, pero al menos no me arroja ningun error, hace lo que yo necesitaba y funciona en IE y firefox. Quiza cuando aprenda más sobre css lo corregiré y lo haré de la manera adecuada..

Lo que tuve que hacer fue darle un class a <tr> un class a <td> y uno a <a href> quiza más bien me compliqué mas pero al menos funciona :D

ahora voy a buscar manuales para aprender a usar css ;D

gracias a todos por su ayuda y sus consejos!