0

Tengo una serie de elemtos mas o menos asi:

<div class="container1">    
        <div class="elemento1 comun"></div>
        <div class="elemento2"></div>
        <div class="elemento3 comun"></div> 
        <div class="container2">
            <img class="elemento4">
        </div>              
</div>  

Con estas propiedades:

body
{
    padding:0;
    margin:0;
}

.container1
{
    width:500px;
    height:300px;
    margin-left:50px; /*importante que el margen sea el mismo para todos*/
    overflow:hidden;    
}

.comun
{
    height: 300px;
    overflow:hidden;
    position: absolute;
    z-index: 1;
}

.elemento2
{   
    height: 300px;
    width: 250px;
    position: absolute;
    z-index: 1;
}

.elemento3
{
    margin-left:250px;
    width: 300px;
    z-index: 1;
}
.container2
{
    display:table;
    position:relative;
}

Algunos de estos elementos (el 1, 2 y 3) los muevo con las coordenadas del ratón (solo de derecha a izquierda o viceversa).

Todo funciona bien siempre que "container1" tenga la propiedad "margin-left" con el valor correcto referente al borde izquierdo del body.

El problema aparece cuando quiero centrarlo todo en la página junto a un formulario que tengo mas abajo con mas elementos dentro de un div principal (contenedor).

<div class="contenedor">

  <div class="container1">  
        <div class="elemento1 comun"></div>
        <div class="elemento2"></div>
        <div class="elemento3 comun"></div> 
        <div class="container2">
           <img class="elemento4">
        </div>              
   </div>   

  <form>
    Mas elementos....
  </form>

</div>  

Por el momento la clase para el div "contenedor" la tego hecha así:

.contenedor
{
    display:table;
    margin:auto;
}

Pero así existe un desfase al mover los elementos (1, 2 y 3) con el ratón que depende del "margin-left" del "container1".

¿Alguna forma de declarar la clase ".contenedor" para que "container1" herede su propiedad "margin-left"?

introducir la descripción de la imagen aquí

2
  • Perdón pero he leído varias veces la pregunta y no alcanzo a comprenderla. Puedes agregar imágenes de lo que tienes y lo que quieres lograr?
    – DjCrazy
    el 28 ene. 2019 a las 17:53
  • Hola, he añadido una imagen... (es un cropper)... lo único que quiero es poder meterlo todo en un mismo contenedor para centrarlo en la página y que sea responsive. Lo que pasa es que al hacerlo la propiedad margin-left se pierde para los elementos que están dentro de él... gracias y saludos!! el 29 ene. 2019 a las 13:15

1 respuesta 1

0

Llevo intentando con CSS un par de horas y no hay manera... :-( Por el momento lo he hecho con JavaScript para salir del paso.aunque he tenido que prescindir del "contenedor" y centrar directamente "container1"... aquí dejo la funcion por si a alguien le ayuda.

function centrar_container()
{
    container = $(".container1");

    var cw = parseInt(container.css("width"));
    var ww = parseInt($(window).width());
    var dw = ww - cw;
    var margin_left = parseInt(dw/2);
    container.css("margin-left", margin_left + "px");
    console.log(cw + " " + ww + " " + margin_left); 
}   

En cualquier caso si alguien sabe como hacerlo en CSS y pone aquí su respuesta la aceptaré encantado, ya que era la pregunta que en un principio hice.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.