Foros del Web » Creando para Internet » CSS »

innerHTML pero en CSS

Estas en el tema de innerHTML pero en CSS en el foro de CSS en Foros del Web. Hola, que tal He visto cosas impresionantes como menus, y hasta efectos que parece hechos con flash, pero estan hechos con CSS, y la ventaja ...
  #1 (permalink)  
Antiguo 03/06/2006, 08:53
 
Fecha de Ingreso: enero-2006
Mensajes: 84
Antigüedad: 11 años, 10 meses
Puntos: 0
innerHTML pero en CSS

Hola, que tal

He visto cosas impresionantes como menus, y hasta efectos que parece hechos con flash, pero estan hechos con CSS, y la ventaja que he visto de los ejemplos hechos con CSS, es que procuran funcionen para todo navegador a diferencia de que JavaScript es mas dificil lograr esa "Compatibilidad"

Ya ven que el innerHTML, en javascript es hacer que al pasar por ciertos elementos, se muestre cierto contenido en un DIV, ahora me gustaria hacer esto, pero con CSS, creo que seria algo interezante, ver un ejemplo acerca de esto

Saludos
  #2 (permalink)  
Antiguo 03/06/2006, 09:10
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
estoy de acuerdo contigo en lo que decís, pero el problema es que CSS no tiene forma de generar contenido complejo (solo puede agregar texto cuando se usan :after y :before), y siempre en el mismo objeto para el que está definida la propiedad (es decir, no se puede hacer que cuando el ratón pase sobre "a", "b" tenga tal o cual texto)

Que se pueda hacer o no dependerá de que sea lo que querés hacer.

Saludos.
  #3 (permalink)  
Antiguo 03/06/2006, 15:54
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
Hola

Conveniente agregar que Explorer se hace un lío con after y before...

Sobre hacer las cosas con javascript, bueno, ciertamente puede parecer difícil, pero en líneas generales, si se hace uso del DOM en vez de detsctar los navegadores dependiendo de su nombre, la cosa es mucho más fluida y hay menos excepciones, aunque siempre hay cosas que parchear y habitualmente siempre son para que funcionen en explorer.

Felicidad
__________________
¡ hey, hou, hou, hey !
  #4 (permalink)  
Antiguo 03/06/2006, 18:11
 
Fecha de Ingreso: octubre-2004
Mensajes: 751
Antigüedad: 13 años, 2 meses
Puntos: 4
Lo que se me ocurre es que pongas una capa con display:none; y que al pasar con el raton (hover) el display este en block.

De esta manera tendrias este efecto.

Saludos,
__________________
sergiold
  #5 (permalink)  
Antiguo 03/06/2006, 18:12
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 2 meses
Puntos: 3
lo mas seguro es que las cosas que, veas en css y parecidas a flash sean css + javascript lo cual si es posible y que sea compatible minimo con los navegadores mas usados, sienceramente yo cuando utiliso javascritp y css, intento usar lo menos posible funciones de javascript y que sea compatible con IE, y fire fox .. y llamando mucho directamente al ID y alguan propiedad CSS
saludos
FT
  #6 (permalink)  
Antiguo 03/06/2006, 18:17
 
Fecha de Ingreso: enero-2006
Mensajes: 84
Antigüedad: 11 años, 10 meses
Puntos: 0
Cita:
Iniciado por alvlin
estoy de acuerdo contigo en lo que decís, pero el problema es que CSS no tiene forma de generar contenido complejo (solo puede agregar texto cuando se usan :after y :before), y siempre en el mismo objeto para el que está definida la propiedad (es decir, no se puede hacer que cuando el ratón pase sobre "a", "b" tenga tal o cual texto)

Que se pueda hacer o no dependerá de que sea lo que querés hacer.

Saludos.

Tienes razon, en cierta manera, pero...

El innerHTML, pueden tener sus equivalentes con atributos en CSS como los son display o visibility, sin embargo en el siguiente ejemplo se usa JS, lo cual no es lo que yo busco

Código:
<div id="miid" style="display:none">aa</div>
<a onclick="document.getElementById('miid').style.display='block'">aa</a>
Entonces que podemos usar, se pueden utilizar

etiqueta:hoover de manera que en el hoover si sea visible dicho elemento

Aqui un ejemplo:

http://www.cssplay.co.uk/menus/dd_valid_2.html

Me gustaria alguien, nos pudiera explicar mejor como funciona este ejemplo
  #7 (permalink)  
Antiguo 03/06/2006, 18:18
 
Fecha de Ingreso: enero-2006
Mensajes: 84
Antigüedad: 11 años, 10 meses
Puntos: 0
Hola Patomas, por supuesto, que DOM es una excelente opcion pero pensando en el 10% de usuarios que no tienen habilitado JS, uno busca opciones mas "universales"
  #8 (permalink)  
Antiguo 03/06/2006, 18:21
 
Fecha de Ingreso: enero-2006
Mensajes: 84
Antigüedad: 11 años, 10 meses
Puntos: 0
Cita:
Iniciado por sergiold
Lo que se me ocurre es que pongas una capa con display:none; y que al pasar con el raton (hover) el display este en block.

De esta manera tendrias este efecto.

Saludos,
Hola sergiold, esa es la idea, me podrias dar un pequeño ejemplo

Gracias de antemano
  #9 (permalink)  
Antiguo 03/06/2006, 18:24
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 2 meses
Puntos: 3
ese menu se hace con puro css
utlisando el peusecodigo :HOVER en los links no es dificil de hacer..
mentes a dentro del un link los demas links
  #10 (permalink)  
Antiguo 03/06/2006, 18:48
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Cita:
Iniciado por sergiold
Lo que se me ocurre es que pongas una capa con display:none; y que al pasar con el raton (hover) el display este en block.
¿y cómo le vas a pasar el ratón por encima si el display es none, con lo que no genera ningún elemento en la página? otra cosa es si usaras visibility....

Es mentira lo que dice en la página que enlazaron antes, el código que usa podrá ser CSS válido pero de ninguna manera es HTML válido.
En html NO SE PUEDE poner una tabla dentro de un enlace.
Sin embargo, me gustaría investigar cómo funciona, aunque ya tengo una idea....

Por lo demás, una forma de hacer un menú al pasar el ratón por encima es hacer cajas de enlaces, y mostrar solamente el primero.
Luego, cuando se le pasa el ratón por encima, se le cambia la altura para que quepan todos los enlaces.

Saludos.
  #11 (permalink)  
Antiguo 03/06/2006, 19:12
 
Fecha de Ingreso: octubre-2004
Mensajes: 751
Antigüedad: 13 años, 2 meses
Puntos: 4
Jajajaj cierto. Mmm... Creo que seguiré así un buen rato...

Se tendría que hacer a partir de un elemento externo a la capa oculta.

Saludos,
__________________
sergiold

Última edición por sergiold; 03/06/2006 a las 19:52
  #12 (permalink)  
Antiguo 03/06/2006, 19:17
 
Fecha de Ingreso: enero-2006
Mensajes: 84
Antigüedad: 11 años, 10 meses
Puntos: 0
por ejemplo si un DIV tiene display: none; se oculta todo el div y visibility, solo ayuda con ocultar el contenido de ese DIV

Lo que me llama la atencion es que si un elemento tiene un class asignado, como puede ser que haga que el hover de otro elemento tambien se active, si no estas pasando por ese elemento
  #13 (permalink)  
Antiguo 03/06/2006, 19:30
 
Fecha de Ingreso: enero-2006
Mensajes: 84
Antigüedad: 11 años, 10 meses
Puntos: 0
y parece ser valida http://validator.w3.org/check?uri=ht...d_valid_2.html
  #14 (permalink)  
Antiguo 03/06/2006, 19:51
 
Fecha de Ingreso: octubre-2004
Mensajes: 751
Antigüedad: 13 años, 2 meses
Puntos: 4
Bueno este es el código que se utiliza en el ejemplo:

Código HTML:
<style>
/* common styling */
.menu {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:50px 0; background:#fff; position:relative;}
.menu ul {padding:0; margin:0; list-style-type: none;}
.menu ul li {float:left; border-left:1px solid #eee; width:106px;}
.menu ul li a, .menu ul li a:visited {display:block; float:left; width:101px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#000; background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#b3ab79;}
.menu ul li:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}
.menu ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul li a.hide {background:#bd8d5e url(../../graphics/drop2.gif) bottom right no-repeat; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#b3ab79; color:#fff;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:##b3ab79; color:#fff;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}
.menu ul li:hover ul.right li {float:right;}
.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}
</style> 
Supongo que a partir de aquí podrás amoldarlo a lo que necesitas.

Saludos,
__________________
sergiold
  #15 (permalink)  
Antiguo 03/06/2006, 20:01
 
Fecha de Ingreso: enero-2006
Mensajes: 84
Antigüedad: 11 años, 10 meses
Puntos: 0
Gracias sergiold ya tenia la hoja de estilos, de cualquier modo te agradesco la amabilidad

Aunque mi duda era como le hacen para que al pasar por un elemento se pudiera activar el hover de otro elemento diferente, en el cual no se esta pasando el raton

Saludos
  #16 (permalink)  
Antiguo 03/06/2006, 20:24
 
Fecha de Ingreso: octubre-2004
Mensajes: 751
Antigüedad: 13 años, 2 meses
Puntos: 4
Fijate en lo siguiente:

.menu ul li ul {display: none;}

Y ahora en esto:

.menu ul li:hover ul {display:block; (..)}

El segundo ul se refiere a la lista que se muestra cuando el mouse pasa por la primera lista:

.menu ul{}

Saludos,
__________________
sergiold
  #17 (permalink)  
Antiguo 03/06/2006, 20:42
 
Fecha de Ingreso: enero-2006
Mensajes: 84
Antigüedad: 11 años, 10 meses
Puntos: 0
Cita:
Iniciado por sergiold
Fijate en lo siguiente:

.menu ul li ul {display: none;}

Y ahora en esto:

.menu ul li:hover ul {display:block; (..)}

El segundo ul se refiere a la lista que se muestra cuando el mouse pasa por la primera lista:

.menu ul{}

Saludos,

Muchas gracias Sergiold
  #18 (permalink)  
Antiguo 03/06/2006, 21:13
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Bueno, error mío al no ver el doctype.
Es válida porque es XHTML 1.1, que acepta cosas válidas en XML que no lo serían en HTML 4.
Si no, probá hacer una página HTML con una tabla dentro de un enlace e intentá validarla.....


Saludos.
  #19 (permalink)  
Antiguo 04/06/2006, 14:39
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 2 meses
Puntos: 1
Hola a todos.

Puede que os sea de interes:
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 09:18.