Autor Tema: Elementos hijos al 100% de la Pantalla Horizontal + Elem. Padre ancho Flexible  (Leído 1126 veces)

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Buenas, les presento aquí una duda.

Tengo un box contenedor y dentro de el alojaré una serie de capas. Mi duda es la siguiente: necesito que cada capa (hijo) tenga el ancho de 100% de la pantalla (No del elemento padre), estén alineados horizontalmente y que el elemento contenedor (padre) tenga un ancho "flexible" con respecto a los elementos hijos que se encuentren alineados. (>=100% si es 1 o más)

No, no puedo usar Javascript (No por que no quiera, si no por que no puedo, tengo mis motivos personales).
¿Alguna propiedad que sea de ayuda en esto?, lógicamente CSS3.
Saludos.
Twitter: @JoakoM010



Comunidad PHPeros


Desconectado Siquillote

  • PHPero Master
  • ******
  • Mensajes: 4.229
  • Karma: 179
  • Sexo: Masculino
    • Ver Perfil
Re:Elementos hijos al 100% de la Pantalla Horizontal + Elem. Padre ancho Flexible
« Respuesta #1 en: 22 de Agosto de 2013, 12:33:28 pm »
Hola,

Creo haber entendido el problema de tu situación ergo te voy a ayudar en base a lo que he comprendido. Para empezar, al div padre podrías ponerle que su posición sea relativa. A continuación, a los divs hijos colocale posición absolute además de un float: left;. Con eso ya conseguimos que los divs hijos estén "flotando" encima del padre alineados horizontalmente con el tamaño que queramos sin importarnos el ancho del div padre.

Respecto a lo de que el contenedor padre sea flexible, es lo unico que he entendido de ese párrafo, puedes usar con CSS la regla @media. No soy un experto en ello, alguna vez que otra lo he usado para diseños responsive. Con ella puedes trabajar condiciones con lo ancho de un div, ancho de pantalla, alto, etc... Espero haberte ayudado compañero ;-)

Si te he ayudado o te he orientado y necesitas mas mi ayuda, ya sabes donde encontrarme... aquí no me conecto ya mucho aunque no quiera decir que me pase de vez en cuando.

Un saludo,
Siquillote.

#Fdo. Physlet

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:Elementos hijos al 100% de la Pantalla Horizontal + Elem. Padre ancho Flexible
« Respuesta #2 en: 22 de Agosto de 2013, 13:47:52 pm »
Hola,

Creo haber entendido el problema de tu situación ergo te voy a ayudar en base a lo que he comprendido. Para empezar, al div padre podrías ponerle que su posición sea relativa. A continuación, a los divs hijos colocale posición absolute además de un float: left;. Con eso ya conseguimos que los divs hijos estén "flotando" encima del padre alineados horizontalmente con el tamaño que queramos sin importarnos el ancho del div padre.

Respecto a lo de que el contenedor padre sea flexible, es lo unico que he entendido de ese párrafo, puedes usar con CSS la regla @media. No soy un experto en ello, alguna vez que otra lo he usado para diseños responsive. Con ella puedes trabajar condiciones con lo ancho de un div, ancho de pantalla, alto, etc... Espero haberte ayudado compañero ;-)

Si te he ayudado o te he orientado y necesitas mas mi ayuda, ya sabes donde encontrarme... aquí no me conecto ya mucho aunque no quiera decir que me pase de vez en cuando.

Un saludo,
Siquillote.

Si, lo del float lo sé, lo he usado siempre solo que no se si para esto del ancho del div esto aun sea valido ya que por lo que he leído, hay otras propiedades de CSS3 para alinear horizontalmente los elementos sin necesidad de que estos sean flotantes.

Saludos y gracias bro!.
Twitter: @JoakoM010



Desconectado Focux

  • PHPero Master
  • ******
  • Mensajes: 1.010
  • Karma: 22
    • Ver Perfil
Re:Elementos hijos al 100% de la Pantalla Horizontal + Elem. Padre ancho Flexible
« Respuesta #3 en: 22 de Agosto de 2013, 16:26:43 pm »
Realmente no entendi bien lo que dijiste pero para un alineado horizontal lo idoneo seria usar un margin: 0 auto; y con respecto a lo de css3, realmente nunca escuchado que haya una funcion para alineado de bloques, almenos que sea un texto.
Mixtiqueros.net

<?PHP
define
(_miNombre, &#39;Focux&#39;);
if(_miNombre == &#39;Focux&#39;): printf(&#39;%s es un programador avanzado&#39;, _miNombre); else: printf(&#39;Tu no eres %s&#39;, _miNombre); endif;
?>

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:Elementos hijos al 100% de la Pantalla Horizontal + Elem. Padre ancho Flexible
« Respuesta #4 en: 23 de Agosto de 2013, 13:53:33 pm »
Realmente no entendi bien lo que dijiste pero para un alineado horizontal lo idoneo seria usar un margin: 0 auto; y con respecto a lo de css3, realmente nunca escuchado que haya una funcion para alineado de bloques, almenos que sea un texto.

No, veras...
Imagina que tenemos una cantidad X de bloques uno al lado del otro...
___________________
|_1_|_2_|_3_|_4_|_5_|

Ahora mi duda:
-Como hacer para que el elemento padre (div) sea flexible (en su ancho) según la cantidad de elementos hijos agrupados horizontalmente

-Como hacer para que los elementos hijos tengan un ancho del 100% del tamaño de la pantalla (No del elemento padre), en el ejemplo anterior, si son 5 elementos hijos el padre tendría que ser de 500% de ancho para que cada hijo sea del 100% de la pantalla.

Podría usar calc() de css pero no quiero esa solución.
¿Alguna otra?.
Saludos.
Twitter: @JoakoM010



Desconectado Focux

  • PHPero Master
  • ******
  • Mensajes: 1.010
  • Karma: 22
    • Ver Perfil
Re:Elementos hijos al 100% de la Pantalla Horizontal + Elem. Padre ancho Flexible
« Respuesta #5 en: 23 de Agosto de 2013, 16:20:01 pm »
Realmente ahora mismo no me llega ninguna idea pero y si intentas dandole al padre width auto y al hijo le das un width 100% y le das un display inline.
Mixtiqueros.net

<?PHP
define
(_miNombre, &#39;Focux&#39;);
if(_miNombre == &#39;Focux&#39;): printf(&#39;%s es un programador avanzado&#39;, _miNombre); else: printf(&#39;Tu no eres %s&#39;, _miNombre); endif;
?>

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:Elementos hijos al 100% de la Pantalla Horizontal + Elem. Padre ancho Flexible
« Respuesta #6 en: 24 de Agosto de 2013, 05:08:28 am »
No sé si esto es muy ortodoxo, pero es una posibilidad.
a) position: relative; al elemento padre
b) position: absolute; a cada elemento hijo
c) width:100%; a cada elemento hijo

De este modo haces que los hijos se comporten como elementos absolutos dentro del padre.

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:Elementos hijos al 100% de la Pantalla Horizontal + Elem. Padre ancho Flexible
« Respuesta #7 en: 24 de Agosto de 2013, 15:39:08 pm »
Realmente ahora mismo no me llega ninguna idea pero y si intentas dandole al padre width auto y al hijo le das un width 100% y le das un display inline.

No sé si esto es muy ortodoxo, pero es una posibilidad.
a) position: relative; al elemento padre
b) position: absolute; a cada elemento hijo
c) width:100%; a cada elemento hijo

De este modo haces que los hijos se comporten como elementos absolutos dentro del padre.

Al rato pruebo ambas y les cuento.
No quería usar calc ya que digamos que su soporte en navegadores no es del "100%" que digamos...
Gracias por responder y saludos.
Twitter: @JoakoM010



Desconectado iStocker

  • PHPer@ Fijo
  • ***
  • Mensajes: 104
  • Karma: 6
  • ~ єssєитιαʟ ~
    • Ver Perfil
Re:Elementos hijos al 100% de la Pantalla Horizontal + Elem. Padre ancho Flexible
« Respuesta #8 en: 24 de Septiembre de 2013, 10:43:08 am »
http://digitalicon.es/blog/funcion-calc-css3/

Busqué una descripción de la función que mencionaste puesto que no la conocía, y al final del artículo me encontré con una alternativa para uno usar calc(), espero y te sirvac:
¡FUUU!


Cita de: Mary Shaw
Menos del 10% del código tienen que ver directamente con el propósito del sistema; el resto tiene que ver con la entrada y salida, validación de datos, mantenimiento de estructuras de datos y otras labores domésticas



[/cent