Consejo sobre Layout

Wakkos · #1 (**permalink**) 26/01/2011, 17:57

Buenas,
Estoy rediseñando nuestra web y quiero hacer algo como

De momento tengo un esquema basado en:

Código HTML:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

#wrapper {
    height: auto !important;
    min-height: 100%;
    height: 100%;
    position: relative; /* posicionamiento absoluto del footer */
}

#footer {
    height: 50px; /* Alto del footer */
    position: absolute;
    bottom: 0; /* pegarlo abajo */
    left: 0;
    width: 100%; /* todo lo largo que se pueda */
}

#content {
    padding-bottom: 50px; /* Igual que el alto del footer footer */
}

El cuerpo, así:

Código HTML:

<body>
    <div id="wrapper">
        <div id="header">Encabezado</div>
        <div id="content">Contenido</div>
        <div id="footer">Footer</div>
    </div>
</body>

Quiero que el pié sean los edificios pero que la capa de contenido se meta detrás.... como en la imagen.

Estaba pensando en cortar el trozo de edificios y ponerlo como fondo de la capa principal alineado abajo (background url (...) bottom center;) pero no estoy seguro que siempre se vea correlativo al resto del footer, el cual tampoco se me ocurre nada para que el fondo del footer quede arriba y se ajuste a ese fondo alineado abajo del contenedor y los edificios no parezcan discontinuos...

Alguna idea? imagino que no he sido muy claro xD pero es la mejor manera que se me ocurre de explicarlo...

alexk · #2 (**permalink**) 26/01/2011, 20:03

pues no logro comprender lo que dices... aun que viendo la imagen supongo que el footer estaria sobreexpuesto al resto del sitio

{position:absolute;}
supongo que te vale...
o fixed si quieres que este siempre debajo de la ventana aun que como esta un poco alto igual y en momentos llega a estorbar, no lo recomiendo ya que tiene muchos espacios en blanco... y se tiene la sensacion de (que si hay un enlace por ejemplo) se puede hacer click sobre el elemento cuando no es asi al tener los edificios encima por CSS, pero bueno si es que logre entender

Kurozaki · #3 (**permalink**) 26/01/2011, 21:49

Cita:

se tiene la sensacion de (que si hay un enlace por ejemplo) se puede hacer click sobre el elemento cuando no es asi al tener los edificios encima por CSS

Que tal y haces lo que dice alexk para que algunas letras se verian a travez de los huecos entre los edificion y asi simularia que en verdad los edificion estan encima del contenido.

Pero que tal si queda un enlace abajo y al dar clic... etc etc... (Esto es lo que dice alexk)

Y puedes ser un inconveniente, pero creo que al terminar el contenido (deslizandolo con el scroolbar) puedes colocar hasta abajo del contenido un div vacio o un margin-bottom, para que al finalizar el contenido, no quede texto atrapado entre los edificion :)

*no se si me explique bien >.<

Wakkos · #4 (**permalink**) 27/01/2011, 05:29

Luego lo probaré. Un padding debería solucionar apra que los links no bajen más allá de donnde empieza el footer.

Es buen plan. xD

Wakkos · #5 (**permalink**) 04/02/2011, 15:29

Bueno, ya lo tengo un poco diagramado:

Http://www.coolvillage.es/test/header.php

El principal problema es contenedor (la mancha azul xD)
No puedo estirarlo hasta el fondo. Cuando logro estirarlo poniendole position:absolute se baja mas de la cuenta (el ancho de la franja superior, para ser exactos) he intentado ponerle un margin pero no me lo acorta...

no encuentro otra manera de ponerlo al 100% de alto y tampoco encuentro una manera de reducir su altura a 100% - alto franja azul del tope.

Por otro lado, se coloca sobre el footer, he intentado ponerlo detrás con un z-index negativo, pero se esconde detrás de todo y no se ve =(

sanxuan · #6 (**permalink**) 04/02/2011, 16:43

Mi recomendación es la siguiente:
Añade al pie la propiedad clear:both. Eso hace que el pie quede por debajo de las columnas flotantes.
Ajustando el margen negativo que usas y el margin-bottom de div#conteiner no tendrás problema para posicionar.
No hace falta usar la propiedad position:absolute en div#container. Permite que flote a la izquierda de la otra columna y usa los márgenes izquierdo y superior para posicionar. Un ancho mínimo para div#wrapper evitará que las columnas se sitúen una sobre otra al reducir el ancho de la ventana del navegador.
Usa el método de las columnas falsas. En lugar de usar el fondo en div#container, úsalo en div#wrapper añadiendo la posición adecuada con la propiedad background-position.
De esta manera el z-index no es necesario.
Seguro que se me olvida algún detalle, pero en líneas generales funcionará.
Prueba esta solución. Si tienes algún problema con los altos de las columnas u otra cosa, añade el código y veremos lo que se puede hacer.
Un saludo.

Wakkos · #7 (**permalink**) 06/02/2011, 04:08

Sanxuan, gracias xD he logrado diagramar según tus indicacione:

He puesto un fondo gigantesco, intentado que ocupe lo menos posible en KB. (top right, #fff)
No veo mucho problema con el height 100% del wraper, solo que al bajarlo 43px para que quede el fondo del body (la franja superior) pasa lo que más horror me da: el desgraciado del footer. Hay que hacer scroll, y claro, son esos 43px lo que se estira y por medio de márgenes no lo puedo subir más.

Por otro lado, y no sé porque, el fondo del body se repite dos veces, ni una más. xD (la franja superior)

En lo que resuelva eso, está todo listo. xD

Oh, por cierto, se puede ver en http://coolvillage.es/test/header.php

Wakkos · #8 (**permalink**) 06/02/2011, 07:44

Creo que lo he arreglado: he puesto un margin negativo al wrapper igual al tamaño del header, he sacado al menú del wrapper y que mida 45px así tapa al wrapper por la parte de arriba.

Aún así, no me mola tener que simular un DIV con un fondo: si quiero poner, digamos, un slideshow y quiero que el contenido empiece luego, hay que cambiar la imagen, o cargar otra! imaginaos que quiero el slide solo en la homepage. =(

No se si el fondo es la mejor opción... De verdad no hay manera de estirar un div 100% hacia abajo independientemente de donde empiece?