Foros del Web » Creando para Internet » CSS »

como colocar este codigo

Estas en el tema de como colocar este codigo en el foro de CSS en Foros del Web. quiero meter este codigo <a class=Ntooltip href="#"> el texto visible <span> ... el texto oculto (cualquier código HTML) ...... </span> </a> dentro de este Código ...
  #1 (permalink)  
Antiguo 06/08/2009, 08:52
 
Fecha de Ingreso: febrero-2008
Mensajes: 675
Antigüedad: 9 años, 10 meses
Puntos: 5
como colocar este codigo

quiero meter este codigo
<a class=Ntooltip href="#">
el texto visible
<span>
... el texto oculto (cualquier código HTML) ......
</span>
</a>
dentro de este
Código PHP:
<?php do { ?>
      <table width="100" height="120" border="0" align="center" background="../images/100.gif">
<tr>
          <td width="101" align="center" valign="top"><span class="margenimagenes"><a href="detalle.php?detalle=<?php echo $row_lado['id_producto']; ?>"><img src="<?php echo $row_lado['imagen']; ?>"   alt= ""
 name="imagen" width="85" height="70" border="0" align="top" class="imagenes_horizontal" id="imagen3" /></a></span></td>
        </tr>
          </table>
          <?php } while ($row_lado mysql_fetch_assoc($lado)); ?>
Pero por mas que intento colocarlo no me sale.
Alguna idea u otra forma de hacerlo.
Un saludo
  #2 (permalink)  
Antiguo 06/08/2009, 08:57
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: como colocar este codigo

Podrias detallar lo que quieres hacer exactamente y donde lo quieres colocar en ese codigo. Porque estoy tratando de entender lo que quieres hacer pero me pierdo cuando leo el codigo
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #3 (permalink)  
Antiguo 06/08/2009, 09:10
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: como colocar este codigo

El nombre de la clase debe ir entrecomillado:
<a class="Ntooltip" href="#">...
Pero no veo qué relación tiene tu consulta con css
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 06/08/2009, 12:05
 
Fecha de Ingreso: febrero-2008
Mensajes: 675
Antigüedad: 9 años, 10 meses
Puntos: 5
Respuesta: como colocar este codigo

Cita:
Iniciado por abimaelrc Ver Mensaje
Podrias detallar lo que quieres hacer exactamente y donde lo quieres colocar en ese codigo. Porque estoy tratando de entender lo que quieres hacer pero me pierdo cuando leo el codigo
Pues lo que quiero es que me salga un bocadillo cuando se pase el mouse por la imagen que muestra. El codigo este hace que salga ese bocadillo, pero en el ejemplo es un texto.
No se si me he explicado bien.

Un saludo
  #5 (permalink)  
Antiguo 06/08/2009, 12:59
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: como colocar este codigo

Verifica si en este lugar encuentras lo que quieres hacer, ahi tienes recursos de CSS
http://www.araudi.net/
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #6 (permalink)  
Antiguo 06/08/2009, 13:34
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: como colocar este codigo

Tooltip?

<a href="#" title="Esto aparece como tooltip">Texto del enlace</a>

Si no te sirve eso, entonces busca tooltip simulado en la web que te sugiere abimaelrc
__________________
- León, Guanajuato
- GV-Foto
  #7 (permalink)  
Antiguo 06/08/2009, 15:37
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: como colocar este codigo

Hola:

Échale un vistazo a este artículo, quizá te sirva de ayuda.

Saludos.

  #8 (permalink)  
Antiguo 06/08/2009, 15:44
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: como colocar este codigo

Si no entendí mal, creo que lo que quiere es colocar el enlace (con su span oculto) dentro del código php
De ahí mi comentario inicial.
Pero claro, ante la ambigüedad de la consulta...
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 06/08/2009, 16:01
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: como colocar este codigo

Dn kseso?, no es la primera vez (seguramente tampoco sera la ultima) que se haga una consulta tipo "adivina lo que quiero"... aun despues de la explicacion "del bocadillo".

Lo bueno es que ya cuenta con algun punto de partida.
__________________
- León, Guanajuato
- GV-Foto
  #10 (permalink)  
Antiguo 06/08/2009, 16:18
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: como colocar este codigo

Habrá que esperar, Maese Triby, las oportunas aclaraciones/desambiguaciones
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #11 (permalink)  
Antiguo 07/08/2009, 15:58
 
Fecha de Ingreso: febrero-2008
Mensajes: 675
Antigüedad: 9 años, 10 meses
Puntos: 5
Respuesta: como colocar este codigo

Cita:
Iniciado por Triby Ver Mensaje
Dn kseso?, no es la primera vez (seguramente tampoco sera la ultima) que se haga una consulta tipo "adivina lo que quiero"... aun despues de la explicacion "del bocadillo".

Lo bueno es que ya cuenta con algun punto de partida.
jajajajaja, eso a estado bien, lo que pasa es que se exactamente lo que quiero pero no se explicarlo. le echo un vistazo a lo que me habeis dicho a ver si me sale algo, si no me sale os comento.
Gracias
  #12 (permalink)  
Antiguo 07/08/2009, 16:44
 
Fecha de Ingreso: febrero-2008
Mensajes: 675
Antigüedad: 9 años, 10 meses
Puntos: 5
Respuesta: como colocar este codigo

Me explico mejor.
Yo hago una consulta en la que saco una imagen y un dato dentro de una tabla, la tabla tiene asignado un CSS y la imagen tiene asignado un enlace, mediante la funcion "ALT" saco la descripcion de esa foto (la descripcion es un campo de la base de datos).
Ahra lo que quiero es sacar esa descripcion mediante un tooltip, pero no se como meter ese codigo para que me funcione. os coloco el codigo original sin el tooltip y el tooltip para ver si me podeis decir como colocar el tooltip para que me funcione.

Este es el codigo sin el tooltip


<?php do { ?><table width="90" height="44" border="0" align="center" class="imagenes_horizontal">
<tr>
<td>
<p align="center"><a href="detalle.php?detalle=<?php echo $row_lado['id_producto']; ?>"><img src="<?php echo $row_lado['imagen']; ?>" alt="" width="85" height="70" /></a></p></td>
</tr>
<tr>
<td class="tex_normal">Precio:<?php echo $row_lado['pvd']; ?></td>
</tr>
</table>

<?php } while ($row_lado = mysql_fetch_assoc($lado)); ?>

y este es el tooltip que quiero poner (el CSS ya esta creado)

<a class=Ntooltip href="#">
el texto visible
<span>
... el texto oculto (cualquier código HTML) ......
</span>
</a>
Un saludo
  #13 (permalink)  
Antiguo 08/08/2009, 01:05
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: como colocar este codigo

abimaelrc ya te sugirio buscar ejemplo de esto en www.araudi.net, en la primera columna, casi hasta abajo estan:

- Title simulado (tooltip)
- Title simulado al pulsar (tooltip)

Ahora, si tu aclaracion/desambiguacion no fuese tan ambigua, pensaria que sabes crear el tooltip con html + CSS pero ignoras como aplicarlo en tu codigo PHP, en todo caso, y a reserva de que exista $row_lado['descripcion'], podria ser mas o menos asi:

<a href="detalle.php?detalle=<?php echo $row_lado['id_producto']; ?>" class="ntooltip"><img src="<?php echo $row_lado['imagen']; ?>" alt="" width="85" height="70" /><span><?php echo $row_lado['descripcion']; ?></span></a>

Nota: De preferencia no uses mayusculas ni caracteres especiales en los nombres de identificadores y clases en tu CSS.
__________________
- León, Guanajuato
- GV-Foto
  #14 (permalink)  
Antiguo 08/08/2009, 16:36
 
Fecha de Ingreso: febrero-2008
Mensajes: 675
Antigüedad: 9 años, 10 meses
Puntos: 5
Respuesta: como colocar este codigo

Cita:
Iniciado por Triby Ver Mensaje
abimaelrc ya te sugirio buscar ejemplo de esto en www.araudi.net, en la primera columna, casi hasta abajo estan:

- Title simulado (tooltip)
- Title simulado al pulsar (tooltip)

Ahora, si tu aclaracion/desambiguacion no fuese tan ambigua, pensaria que sabes crear el tooltip con html + CSS pero ignoras como aplicarlo en tu codigo PHP, en todo caso, y a reserva de que exista $row_lado['descripcion'], podria ser mas o menos asi:

<a href="detalle.php?detalle=<?php echo $row_lado['id_producto']; ?>" class="ntooltip"><img src="<?php echo $row_lado['imagen']; ?>" alt="" width="85" height="70" /><span><?php echo $row_lado['descripcion']; ?></span></a>

Nota: De preferencia no uses mayusculas ni caracteres especiales en los nombres de identificadores y clases en tu CSS.
El codigo lo he sacado de esa pagina pero no sabia como colocarla, ahora con tu ayuda ya me sale el tooltip, pero....
Me sale el Tooltip al pasar el mouse por la derecha, con lo que no se ve el texto, he estado viendo como posicionarlo para que salga a la izquierda, pero cuando lo consigo tambien me lleba la imagen a la derecha.
Alguna idea de como posicionar el tooltip a la izquierda de la imagen sin que me mueva la imagen?.
Un saludo y muchas gracias
  #15 (permalink)  
Antiguo 08/08/2009, 17:04
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: como colocar este codigo

Pon el código css que estás utilizando y el html generado, Visona.

Pero seguramente tendrás algo parecido a:
Cita:
a:hover span {
left:XXpx;
top:XXpx;}
Cambia los valores (también admite valores negativos)

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #16 (permalink)  
Antiguo 08/08/2009, 18:45
 
Fecha de Ingreso: febrero-2008
Mensajes: 675
Antigüedad: 9 años, 10 meses
Puntos: 5
Respuesta: como colocar este codigo

Cita:
Iniciado por kseso? Ver Mensaje
Pon el código css que estás utilizando y el html generado, Visona.

Pero seguramente tendrás algo parecido a:

Cambia los valores (también admite valores negativos)

Un saludo
@charset "utf-8";
@import url("Ntooltip.css");
/* CSS Document */



a.Ntooltip {
position: relative; /* es la posición normal */
text-decoration: none !important; /* forzar sin subrayado */
color:#0080C0 !important; /* forzar color del texto */
font-weight:bold !important;
}

a.Ntooltip:hover {
z-index:999; /* va a estar por encima de todo */
background-color:#000000; /* DEBE haber un color de fondo */
top: 0px;
right: 0px;
}

a.Ntooltip span {
display: none; /* el elemento va a estar oculto */
}

a.Ntooltip:hover span {
display: block; /* se fuerza a mostrar el bloque */
position: absolute; /* se fuerza a que se ubique en un lugar de la pantalla */
top:2em;
left:2em; /* donde va a estar */
width:250px; /* el ancho por defecto que va a tener */
padding:5px; /* la separación entre el contenido y los bordes */
background-color: #0080C0; /* el color de fondo por defecto */
color: #FFFFFF; /* el color de los textos por defecto */
right: 250px;
}

este es el codigo
  #17 (permalink)  
Antiguo 08/08/2009, 18:53
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: como colocar este codigo

Cita:
Iniciado por kseso? Ver Mensaje
Pon el código css que estás utilizando y el html generado, Visona.

Pero seguramente tendrás algo parecido a:
Cita:
a.Ntooltip:hover span {
left:2em;
top:2em;
}
Cambia los valores (también admite valores negativos)

Un saludo
Lo dicho, cambia los valores remarcados en rojo.
Y por cierto, quizás "right:250px" (la última de a.Ntooltip:hover span) esté interfiriendo.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #18 (permalink)  
Antiguo 08/08/2009, 19:34
 
Fecha de Ingreso: febrero-2008
Mensajes: 675
Antigüedad: 9 años, 10 meses
Puntos: 5
Respuesta: como colocar este codigo

ok solucionado. Muchas gracias
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 12:06.