Iframe me tiene loco

[eugeniocol]

Me tiene locoo.......

trato que en diferentes container con sus item meter hojas html ya creadas.

Este código en este item3 dentro de .flex-container1 tal cual el enlace de hoja html sale otra hoja  html y se deconfigura los enlaces del container2¿??

Código (div) [Seleccionar] Expandir

<ul class="flex-container1">
<li class="item" id="item3"><img src="Foto eugenio/Eugenio.jpg" " alt="50" width="85vw" height="50vh"><br><iframe width="40%" height="30%" src="Reservar.html" scrolling="no" frameborder="no"></iframe></li>


Código (css) [Seleccionar] Expandir

.flex-container1{
    width:100%; /* width:90%; */
    max-width:auto; /* max-width:960px; */   
    list-style-type:none;
    margin:0px auto; /*  margin:20px auto; */
    padding:0;
    background-color:midnightblue; /*  background-color:midnightblue; */   
    /*Flexbox setup*/
    display:flex;
    flex-flow:row wrap;
    justify-content:flex-start;;/*poner los cuadros a la izquierda del padre justify-content: flex-start; centrado center;*/
align-items:center; /*este codigo y el de abajo es para meter varios textos en el cuadro con <br> */
    align-content:stretch; /*este codigo y el de arriba es para meter varios textos en el cuadro con <br> */
}
.item{
    height:160px; /* altura cuadro height:200px; */
    width:290px; /*ancho width:200px; */
    line-height:40px; /*distancia en alto del contenido del cuadro*/
    font-size:13px; /*tamaño del contenido del cuadro*/
    background-color:steelblue; /*color fondo cuadro background-color:steelblue*/
    color:#fff; /*color:#fff; contenido del cuadro*/
    text-align:left; /*ajustar a derecha izquierda o centro el contenido del cuadro*/
    margin:5px 2px; /*25px distancia del ultimo item del cuadro de arriba 2px distancia de cuadros de al lado*/
}


En esta otra configuracion si consigo lo que quiero,pero cuando lo coloco en el container1 no me va sale otra hoja html que ya esta en container 2 con otro v-item4 :

Código (div) [Seleccionar] Expandir

<ul class="flex-container2">
<li class="v-item" id="item5"><img src="Foto eugenio/Eugenio.jpg" " alt="50" width="85vw" height="50vh"><br><iframe width="40%" height="30%" src="Reservar.html" scrolling="no" frameborder="no"></iframe></li>


Código (css) [Seleccionar] Expandir

.flex-container2{
    width:100%; /* width:90%; */
    max-width:auto; /* max-width:960px; */   
    list-style-type:none;
    margin:0px auto; /*  margin:20px auto; */
    padding:0;
    background-color:midnightblue; /*  background-color:midnightblue; */   
    /*Flexbox setup*/
    display:flex;
    flex-flow:row wrap;
    justify-content:center;/*poner los cuadros a la izquierda del padre justify-content: flex-start;*/
}
.v-item{
    height:260px; /*  height:200px; */
    width:380px; /* width:200px; */
    line-height:200px; /*distancia en alto del contenido del cuadro*/
    font-size:20px;
    background-color:steelblue;/*color fondo cuadro background-color:steelblue*/
    color:#fff; /*color:#fff; contenido del cuadro*/
    text-align:center;/*ajustar a derecha izquierda o centro el contenido del cuadro*/
    margin:5px 2px;  /*25px distancia del ultimo item del cuadro de arriba 2px distancia de cuadros de al lado*/
}

.flex-container3{
    width:100%; /* width:90%; */
    max-width:auto; /* max-width:960px; */   
    list-style-type:none;
    margin:0px auto; /*  margin:20px auto; */
    padding:0;
    background-color:midnightblue; /*  background-color:midnightblue; */   
    /*Flexbox setup*/
    display:flex;
    flex-flow:row wrap;
    justify-content:center;/*poner los cuadros a la izquierda del padre justify-content: flex-start;*/
}


Bueno y aprovecho de paso como puedo cambiar individualmente los  tamaños de los cuadros de los container ¿?????


Salud2.

[WHK]

Realmente no entendí nada, primeramente porque no soy el que está creando tu proyecto por lo cual no tengo ni idea que es el "container".

Intenta explicarte un poco mejor, por ejemplo: no puedo pasar el enlace dela etiqueta <a> hacia el iframe dinamico donde va todo el contenido.

De verdad he leido 5 veces tu post y sigo sin entender que es lo que quieres lograr.

Tienes el código completo o algun ejemplo en algún lugar?

[eugeniocol]

Realmente no entendí nada, primeramente porque no soy el que está creando tu proyecto por lo cual no tengo ni idea que es el "container".

Intenta explicarte un poco mejor, por ejemplo: no puedo pasar el enlace dela etiqueta <a> hacia el iframe dinamico donde va todo el contenido.

De verdad he leido 5 veces tu post y sigo sin entender que es lo que quieres lograr.

Tienes el código completo o algun ejemplo en algún lugar?

bueno el container pue es el <ul class="flex-container1">y dentro de este estan varios item o sea <li class="item" ID="item3"> hay 1,2 y 3 ahora,hasta a qui lo entiendes ???
pues en este item3 tengo insertada una foto <img src="Foto eugenio/Eugenio.jpg" " alt="50" width="85vw" height="50vh"><br><iframe width="40%" height="30%" src="Reservar.html" scrolling="no" frameborder="no"></iframe></li> y quiero insertar otra hoja html <iframe width="40%" height="30%" src="Reservar.html" scrolling="no" frameborder="no"></iframe></li>
pues esta hoja no la muestra muestra otra hoja html hoja fotos, hasta a qui lo entiendes ???

El diseño parte de a qui http://www.falconmasters.com/css/guia-flexbox-layouts

no se mas que explicar.

Saludosss.

[eugeniocol]

Para lo que quiero ademas del post anterior tambien me puede servir lo siguiente.

Como trato de explicar el diseño consta de varios class="item" en contenedores para aplicarle diferentes medidas a cada contenedor ( ya que no se como hacerlo individual dentro del mismo contenedor)
para diferenciarlos en html y css estoy aplicando dentro de cada contenedor item,v-item y w-item

Y creo que  me puede valer usando el codigo ordenar siempre y cuando tambien pueda cambiar los tamaños de los item individualmente dentro de sus contenedores.

Código (css) [Seleccionar] Expandir

#item1{
order:1;
}

#item2{
order:5;
}

#item3{
order:4;
}


#item4{
order:3;
}



pero nada por mas que trasteo no se como poner el codigo para ordenarlos, al tener diferentes item y contenedores

Saludosss.