Foros del Web » Creando para Internet » CSS »

como introduzco esta linea en mi archivo css

Estas en el tema de como introduzco esta linea en mi archivo css en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 03/04/2009, 01:13
Avatar de leskolpykos  
Fecha de Ingreso: junio-2007
Ubicación: Caracas
Mensajes: 96
Antigüedad: 10 años, 6 meses
Puntos: 0
Pregunta como introduzco esta linea en mi archivo css

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
__________________
www.luisespectaculo.net el portal de artistas y farándula más grande de Venezuela!
  #2 (permalink)  
Antiguo 03/04/2009, 07:22
 
Fecha de Ingreso: marzo-2009
Mensajes: 171
Antigüedad: 8 años, 8 meses
Puntos: 4
Respuesta: como introduzco esta linea en mi archivo css

<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'">
  #3 (permalink)  
Antiguo 03/04/2009, 07:22
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Respuesta: como introduzco esta linea en mi archivo css

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.

Última edición por Raulmmmm; 03/04/2009 a las 07:41
  #4 (permalink)  
Antiguo 03/04/2009, 07:26
 
Fecha de Ingreso: marzo-2009
Mensajes: 171
Antigüedad: 8 años, 8 meses
Puntos: 4
Respuesta: como introduzco esta linea en mi archivo css

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.
  #5 (permalink)  
Antiguo 03/04/2009, 10:08
Avatar de gorkreg  
Fecha de Ingreso: julio-2008
Mensajes: 305
Antigüedad: 9 años, 4 meses
Puntos: 8
Respuesta: como introduzco esta linea en mi archivo css

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:

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

Suerte y cuéntanos si has solucionado el problema.
__________________
}8[/

Última edición por gorkreg; 03/04/2009 a las 10:13
  #6 (permalink)  
Antiguo 03/04/2009, 10:15
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: como introduzco esta linea en mi archivo css

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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 03/04/2009, 10:15
 
Fecha de Ingreso: marzo-2009
Mensajes: 171
Antigüedad: 8 años, 8 meses
Puntos: 4
Respuesta: como introduzco esta linea en mi archivo css

muy bueno voy a probar
  #8 (permalink)  
Antiguo 03/04/2009, 10:38
Avatar de gorkreg  
Fecha de Ingreso: julio-2008
Mensajes: 305
Antigüedad: 9 años, 4 meses
Puntos: 8
Respuesta: como introduzco esta linea en mi archivo css

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.
__________________
}8[/
  #9 (permalink)  
Antiguo 03/04/2009, 11:00
Avatar de leskolpykos  
Fecha de Ingreso: junio-2007
Ubicación: Caracas
Mensajes: 96
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: como introduzco esta linea en mi archivo css

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
__________________
www.luisespectaculo.net el portal de artistas y farándula más grande de Venezuela!
  #10 (permalink)  
Antiguo 03/04/2009, 11:05
Avatar de leskolpykos  
Fecha de Ingreso: junio-2007
Ubicación: Caracas
Mensajes: 96
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: como introduzco esta linea en mi archivo css

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?
__________________
www.luisespectaculo.net el portal de artistas y farándula más grande de Venezuela!
  #11 (permalink)  
Antiguo 03/04/2009, 11:31
Avatar de gorkreg  
Fecha de Ingreso: julio-2008
Mensajes: 305
Antigüedad: 9 años, 4 meses
Puntos: 8
Respuesta: como introduzco esta linea en mi archivo css

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).
__________________
}8[/
  #12 (permalink)  
Antiguo 03/04/2009, 11:48
Avatar de leskolpykos  
Fecha de Ingreso: junio-2007
Ubicación: Caracas
Mensajes: 96
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: como introduzco esta linea en mi archivo css

se envio varias veces la respuesta.. sorry
__________________
www.luisespectaculo.net el portal de artistas y farándula más grande de Venezuela!

Última edición por leskolpykos; 03/04/2009 a las 12:05
  #13 (permalink)  
Antiguo 03/04/2009, 11:55
Avatar de leskolpykos  
Fecha de Ingreso: junio-2007
Ubicación: Caracas
Mensajes: 96
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: como introduzco esta linea en mi archivo css

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?
__________________
www.luisespectaculo.net el portal de artistas y farándula más grande de Venezuela!
  #14 (permalink)  
Antiguo 03/04/2009, 12:49
Avatar de gorkreg  
Fecha de Ingreso: julio-2008
Mensajes: 305
Antigüedad: 9 años, 4 meses
Puntos: 8
Respuesta: como introduzco esta linea en mi archivo css

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
__________________
}8[/
  #15 (permalink)  
Antiguo 03/04/2009, 17:29
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: como introduzco esta linea en mi archivo css

Lo que te dice kseso? es esto, que funciona perfectamente en IE6 y no necesita javascript.
  #16 (permalink)  
Antiguo 03/04/2009, 20:09
Avatar de leskolpykos  
Fecha de Ingreso: junio-2007
Ubicación: Caracas
Mensajes: 96
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: como introduzco esta linea en mi archivo css

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!
__________________
www.luisespectaculo.net el portal de artistas y farándula más grande de Venezuela!
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 11:15.