Foros del Web » Creando para Internet » CSS »

Maquetación cabecera

Estas en el tema de Maquetación cabecera en el foro de CSS en Foros del Web. Hola a todos!! Hacía tiempo que no entraba por aquí.. Me alegra saber que todavía existe esta web, que tanto ayuda a los que intentamos ...
  #1 (permalink)  
Antiguo 28/08/2016, 18:05
 
Fecha de Ingreso: febrero-2011
Mensajes: 156
Antigüedad: 13 años, 9 meses
Puntos: 4
Maquetación cabecera

Hola a todos!!

Hacía tiempo que no entraba por aquí.. Me alegra saber que todavía existe esta web, que tanto ayuda a los que intentamos montar y diseñar webs :)))

Os cuento, trato de montar la cabecera de una nueva web. No quiero indicar tamaños abolutos. Quiero hacerlo todo mediante % Así se ajuste a las distintas resoluciones.

Bien. La cabecera estaría dividida en 3 columnas:

1) Izquierda: 25% del total del ancho de la web
2) Central 50% del total del ancho de la web
3) Derecha: 25% del total del ancho de la web


En la parte izquiera y derecha iría una imagen
Y la parte central ( la que representa el 50% del ancho de la web ) se divide en dos filas:

la primera fila contiene texto, y la segunda contine una imagen ( que enlaza con las imágenes de la columna de la izquierda y la derecha ).

Os paso una URL donde podéis ver la idea: http://s44.photobucket.com/user/lemm...rtcv8.png.html

( disculpad la calidad, es muy cutre. Pero sólo se trata de la idea )

He diferenciado la partes:

parte izquierda: imagen con fondo color rojo
parte derecha: imagen con fondo color azul
parte central, se divide en:
- Fondo blanco: ahí iría texto
- Fondo verde: imagen que enlaza con las imágenes de la columna de la izquierda y la derecha


No hay manera de conseguirlo!! Llevo dos días y no hay manera!! Entiendo que la idea es forzar que las tres imágenes estén enganchadas en la parte inferior a su contenedor. Así se ajustarían y saldría el resultado correcto. Pero eso no puedo hacerlo porque debo hacer que las tres partes sean flotantes ( para conseguir tres columnas )! Pero en tal caso no se pueden ajustar al contenedor, porque al flotar, las capas son independientes y no puedo ajustarlas al bottom del posible contenedor. Pero si hago position: absolute, las tres imagenes se superponen, evidentemente. Por favor, si alguien me pudiese ayudar!!

Muchísimas gracias a todos!! :)
  #2 (permalink)  
Antiguo 28/08/2016, 22:13
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 8 meses
Puntos: 1826
Respuesta: Maquetación cabecera

Olvídate del float.

Revisa usar flex box con el alineado inferior: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Código CSS:
Ver original
  1. .container {
  2.   align-items: flex-end;
  3. }
  #3 (permalink)  
Antiguo 29/08/2016, 01:31
 
Fecha de Ingreso: febrero-2011
Mensajes: 156
Antigüedad: 13 años, 9 meses
Puntos: 4
Respuesta: Maquetación cabecera

Oooolé!!! Muchísimas gracias!!! :))) El problema, supongo, será el de siempre, no??? entiendo que esto es relativamente nuevo y no lo soportarán todas las versiones de navegadores, no?? Eso me puede crear problemas porque esta debería ser una aplicación para el gran público! :-\
  #4 (permalink)  
Antiguo 29/08/2016, 11:18
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 8 meses
Puntos: 1826
Respuesta: Maquetación cabecera

No, ya no te preocupes tanto de la compatibilidad. No es tan nuevo.
  #5 (permalink)  
Antiguo 30/08/2016, 09:11
 
Fecha de Ingreso: febrero-2011
Mensajes: 156
Antigüedad: 13 años, 9 meses
Puntos: 4
Respuesta: Maquetación cabecera

Perfecto!! Muchísimas gracias!! :)
  #6 (permalink)  
Antiguo 02/09/2016, 20:16
Avatar de rodrypaladin
Moderador
 
Fecha de Ingreso: abril-2010
Ubicación: Madrid
Mensajes: 2.127
Antigüedad: 14 años, 7 meses
Puntos: 468
Respuesta: Maquetación cabecera

El poder de flexbox es enorme XD
__________________
No te olvides de dar +1 a quien te echa un cable ;)

Etiquetas: cabecera, color, html, tamaño, todo
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 10:59.