Foros del Web » Creando para Internet » CSS »

Div flotante al lado de otro div

Estas en el tema de Div flotante al lado de otro div en el foro de CSS en Foros del Web. Hola a todos, Tengo una serie de divs que se muestran uno debajo de otro, como si fuera una tabla. El caso es que quiero ...
  #1 (permalink)  
Antiguo 14/03/2011, 12:17
 
Fecha de Ingreso: marzo-2009
Mensajes: 76
Antigüedad: 8 años, 9 meses
Puntos: 0
Div flotante al lado de otro div

Hola a todos,

Tengo una serie de divs que se muestran uno debajo de otro, como si fuera una tabla.

El caso es que quiero que al pasar por encima de cada uno de ellos, muestre a su izquierda otro div que contiene los links editar y borrar.

Pero sin moverse el contenido del primer div, que es el que tiene el evento mouseover, porque sino baila toda la línea.

Como puedo hacer esto?

Muchas gracias.
  #2 (permalink)  
Antiguo 14/03/2011, 12:28
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Div flotante al lado de otro div

ponle a ese div que aparece position: absolute; , asi no afecta el flujo de los demas div
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #3 (permalink)  
Antiguo 14/03/2011, 12:44
Avatar de mtreik  
Fecha de Ingreso: marzo-2011
Ubicación: Yecla (Murcia)
Mensajes: 41
Antigüedad: 6 años, 9 meses
Puntos: 7
Respuesta: Div flotante al lado de otro div

Has probado usando float??? debería servirte.
De todas formas, si incluyes parte del código sería más sencillo ayudarte
__________________
Marcelo López Santa
------------------------
Diseñador y programador web
www.sixtudio.com
  #4 (permalink)  
Antiguo 14/03/2011, 14:49
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Div flotante al lado de otro div

La mejor opciión es usar la propiedad visibilty:hidden para ocultar un elemento y visibilty:visible cuando pasas por encima (:hover).
Puedes usar cualquier tipo de posicionamiento para que el elemento oculto aparezca donde quieras. Usa posición absoluta, relativa o un margen negativo si es necesario.
  #5 (permalink)  
Antiguo 14/03/2011, 16:46
 
Fecha de Ingreso: marzo-2009
Mensajes: 76
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Div flotante al lado de otro div

Bien, parece que lo he solucionado siguiendo vuestros consejos.

Os paso el código, como pedíais, por si veis que se puede realizar alguna mejora. Lo que más me intriga es que he puesto el div actions, que es donde se encuentran los botones editar y borrar dentro del div etapa (singleStep), porque así, cuando cambio a encima de los botones, estos siguien siendo visibles.

Se podría hacer esto simplemente con CSS?

Muchas gracias por vuestra ayuda!

Código:
<div class="singleStep" onmouseover="$(this).find('.actions').show();" 
onmouseout="$(this).find('.actions').hide();" id="etapaX">
    
  <div class="actions" style="display:none;position:absolute;margin-left:-34px">
  <img src="images/icons/delete.png" alt="Delete" title="Delete" 
  onclick="deleteStep(X);" />
  <a onclick="EditStep();">Edit</a>
  </div>

  <span ID="stepDescriptionX" CssClass="stepDescription" 
  Text='NOMBREDELAETAPA'></span>

</div>
  #6 (permalink)  
Antiguo 14/03/2011, 16:55
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Div flotante al lado de otro div

El comportamiento onmouseover es completamente equivalente a la pseudo-clase :hover.
No ocurre lo mismo con la pseudo-clase :active que no equivale a onclick.
Hablo sólo de cambiar propiedades css. No es posible ejecutar fragmentos de código usando css.

Etiquetas: flotante, lado
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 08:40.