Distancia entre divs

mikolbe · #1 (**permalink**) 13/03/2015, 06:46

Buenas, cómo va?

Inicio mi primer tema en CSS con esté thread.
No es bueno conocernos y empezar con un problema pero bueno.

Estoy haciendo un pequeño chat, y me he encontrado con problemita entre navegadores.

la url es http://www.mikolbe.com/chat

En donde están los emoticons, al pasar el mouse por arriba se despliega otro div conteniendo las imagenes previas para insertarlas en el chat.

PERO:
en firefox el div que se muestra y se esconde queda bien y en chrome queda separado por unos pequeños pixeles.

Les comento que estoy aprendiendo CSS y por el momento en este chat, he tratado de hacerlo lo mejor posible.

Se les ocurre algo para solucionarlo.

Mi principal problema son esos divs de emoticons, si alguien ve alguna sugerencia sobre el diseño de la web son bienvenidas.

Muchas gracias de antemano.
------- el chat no está terminado --------
<<[[mikol be]]>>

AngelKrak · #2 (**permalink**) 13/03/2015, 07:08

pues yo los veo bien ammigo, podrias tomar una cap a tu error desde tu pc?

mikolbe · #3 (**permalink**) 13/03/2015, 07:20

Va imagen.

Queda separado, esto pasa solo en CHROME.

Gracias.

AngelKrak · #4 (**permalink**) 13/03/2015, 17:28

intenta cambiando el margin-top: -262px; que tienes por top: 37%;

dime si te funciono ;)

fede5426 · #5 (**permalink**) 13/03/2015, 20:31

Cita:

Iniciado por AngelKrak

intenta cambiando el margin-top: -262px; que tienes por top: 37%;

dime si te funciono ;)

Eso no va a servir.. te lo aseguro. Quizás en tu pantalla se ve bien Angel, pero no en todas se va a ver igual.

mikolbe.. tengo una sugerencia que podría funcionarte,

Este div (que es el que esta oculto con los emoticones):

Código HTML:

Ver original<div id="div-preview-emoticons">
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div> 
<!-- etc -->
</div>

Colocalo dentro de este otro (que es la imagen en la que haciendo hover aparece la lista de emoticonos):

Código HTML:

Ver original<div id="div-emoticons"></div>

Ahora en el css, a "div-emoticons" colocale position:relative. Y a "div-prev-emoticons" que ya tiene position:absolute, quitale el margin-top y deja solo "top" con el valor negativo de su height mas el valor que queres de margen (que si no me equivoco es el valor que ya tiene tu margin-top, así que solo deberías borrar "margin-" :P).

Cuál es mi justificación de hacer esto? La siguiente:
Los elementos con posición absoluta, toman como referencia de "top" y "left" los bordes superior e izquierdo del primer elemento con posición absoluta o relativa que lo contenga.
Por ejemplo, tenemos 3 cajas dentro del body.. la primera con posición relativa, la segunda (dentro de la primera) con posición por defecto (static), y la tercera dentro de la anterior, con posición absoluta.. esta ultima va a tomar como referencia de top y left, los bordes superior e izquierdo de la primer caja. Si ésta primer caja no tuviera posición relativa, la tercera tomaría como referencia los bordes del body, y si fuera la segunda la que tuviera posición absoluta o relativa, tomaría como referencia los bordes de esta.. me explico?

Espero que se haya entendido, probalo así.. debería funcionar en todos los navegadores.

Como agregado, te comento que creo que el que se ve raro es mozilla.. Lo probé en chrome y explorer y en ambos se ve pegado.

Podrías usar Normalize para evitar esos margenes raros..

Avisame como te fue!

Saludos

fede5426 · #6 (**permalink**) 13/03/2015, 20:50

Mira, mejor no te lo puedo explicar jaja

http://codepen.io/anon/pen/myzZNP

Dejo el codepen, y el codigo aca por las dudas:

Código HTML:

Ver original<body>
  <div id="primera">
    Primera con position static por defecto
    <div id="segunda">
      Segunda con position static por defecto
      <div id="tercera">Tercera con position absolute se ubica en los bordes del body</div>
    </div>
  </div>
<br><br>
  <div id="cuarta">
    Cuarta con position static por defecto
    <div id="quinta">
      Quinta con position relative
      <div id="sexta">Sexta con position absolute, se ubica en los bordes de la quinta</div>
    </div>
  </div>
  <br><br>
  <div id="septima">
    Septima con position relative
    <div id="octava">
      Octava con position static por defecto
      <div id="novena">Novena con position absolute, se ubica en los bordes de la septima</div>
    </div>
  </div>
</body>

Código CSS:

Ver originalbody{
  color:#fff;
}
 
#primera{
  width:600px;
  margin:1em auto;
  background-color:#f00;
  padding:2em;
}
 
#segunda{
  background-color:#00f;
  height:200px;
  padding:1em;
}
#tercera{
  background-color:#000;
  padding:1em;
  width:150px;
  height:150px;
  position:absolute;
  top:0;
  right:0;
}
 
#cuarta{
  width:600px;
  margin:1em auto;
  background-color:#f00;
  padding:2em;
}
 
#quinta{
  background-color:#00f;
  height:200px;
  padding:1em;
  position:relative;
  
}
#sexta{
  background-color:#000;
  padding:1em;
  width:150px;
  height:150px;
  position:absolute;
  top:0;
  right:0;
}
 
#septima{
  width:600px;
  margin:1em auto;
  background-color:#f00;
  padding:2em;
  position:relative;
}
 
#octava{
  background-color:#00f;
  height:200px;
  padding:1em;
}
 
#novena{
  background-color:#000;
  padding:1em;
  width:150px;
  height:150px;
  position:absolute;
  top:0;
  right:0;
}

De nuevo, espero te sirva.. saludos!

AngelKrak · #7 (**permalink**) 13/03/2015, 21:37

Cita:

Iniciado por fede5426

Mira, mejor no te lo puedo explicar jaja

http://codepen.io/anon/pen/myzZNP

Dejo el codepen, y el codigo aca por las dudas:

Código HTML:

Ver original<body>
  <div id="primera">
    Primera con position static por defecto
    <div id="segunda">
      Segunda con position static por defecto
      <div id="tercera">Tercera con position absolute se ubica en los bordes del body</div>
    </div>
  </div>
<br><br>
  <div id="cuarta">
    Cuarta con position static por defecto
    <div id="quinta">
      Quinta con position relative
      <div id="sexta">Sexta con position absolute, se ubica en los bordes de la quinta</div>
    </div>
  </div>
  <br><br>
  <div id="septima">
    Septima con position relative
    <div id="octava">
      Octava con position static por defecto
      <div id="novena">Novena con position absolute, se ubica en los bordes de la septima</div>
    </div>
  </div>
</body>

Código CSS:

Ver originalbody{
  color:#fff;
}
 
#primera{
  width:600px;
  margin:1em auto;
  background-color:#f00;
  padding:2em;
}
 
#segunda{
  background-color:#00f;
  height:200px;
  padding:1em;
}
#tercera{
  background-color:#000;
  padding:1em;
  width:150px;
  height:150px;
  position:absolute;
  top:0;
  right:0;
}
 
#cuarta{
  width:600px;
  margin:1em auto;
  background-color:#f00;
  padding:2em;
}
 
#quinta{
  background-color:#00f;
  height:200px;
  padding:1em;
  position:relative;
  
}
#sexta{
  background-color:#000;
  padding:1em;
  width:150px;
  height:150px;
  position:absolute;
  top:0;
  right:0;
}
 
#septima{
  width:600px;
  margin:1em auto;
  background-color:#f00;
  padding:2em;
  position:relative;
}
 
#octava{
  background-color:#00f;
  height:200px;
  padding:1em;
}
 
#novena{
  background-color:#000;
  padding:1em;
  width:150px;
  height:150px;
  position:absolute;
  top:0;
  right:0;
}

De nuevo, espero te sirva.. saludos!

yo siempre dooy soluciones correctas, ya lo pobre en mozilla, chrome, internet explorer, comodo dragon y funciona todo perfecto jajaja tambn diferentes tipos de pantalla y algo mas ese chat no es responsive y solo se modifica el alto asi que es imposible que salga mal el codigo ;)

fede5426 · #8 (**permalink**) 13/03/2015, 22:03

Top 37% en monitor 23" 1920 x 1080.

Ventana al maximo con la consola abierta:

Link de la imagen: http://oi61.tinypic.com/v483mp.jpg

Ventana al maximo con la consola cerrada:

Link de la imagen: http://i58.tinypic.com/1058fw9.jpg

Ventana reducida:

Link de la imagen: http://i61.tinypic.com/149ulvc.jpg

Equivocarse es aprender Angel, es una critica constructiva no estoy diciendo que seas mal diseñador.. simplemente digo que colocar un top en porcentajes no va a funcionar, y en las imágenes esta la prueba.

AngelKrak · #9 (**permalink**) 13/03/2015, 23:29

jajaja bueno yo no tengo una super computadora con ese tamaño por eso se ve bien jajajaa, lo que se me ocurrio fue esto nose si sirva >_<

Cita:

Div en HTML #div-chat-controls-boton moverlo abajo del html div #div-emoticons
esto en la Hoja de Estilos #div-emoticons con float: left;
esto en la Hoja de Estilos #div-preview-emoticons con position: relative;
esto en la Hoja de Estilos #div-chat-controls con float: left; y quitar clear: both; y overflow: hidden;