Foros del Web » Creando para Internet » CSS »

Consejo sobre Layout

Estas en el tema de Consejo sobre Layout en el foro de CSS en Foros del Web. 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: ...
  #1 (permalink)  
Antiguo 26/01/2011, 17:57
Avatar de Wakkos
Colaborador
 
Fecha de Ingreso: octubre-2001
Ubicación: (cerca)
Mensajes: 1.795
Antigüedad: 16 años, 2 meses
Puntos: 59
Consejo sobre Layout

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...
__________________
Cool Village
@Wakkos
  #2 (permalink)  
Antiguo 26/01/2011, 20:03
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Consejo sobre Layout

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
  #3 (permalink)  
Antiguo 26/01/2011, 21:49
Avatar de Kurozaki  
Fecha de Ingreso: diciembre-2010
Ubicación: Con mi Zanpakutou (Colima, MEX).
Mensajes: 175
Antigüedad: 7 años
Puntos: 9
Respuesta: Consejo sobre Layout

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 >.<
__________________
Diseñador y Desarrollador web :)
  #4 (permalink)  
Antiguo 27/01/2011, 05:29
Avatar de Wakkos
Colaborador
 
Fecha de Ingreso: octubre-2001
Ubicación: (cerca)
Mensajes: 1.795
Antigüedad: 16 años, 2 meses
Puntos: 59
Respuesta: Consejo sobre Layout

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
__________________
Cool Village
@Wakkos
  #5 (permalink)  
Antiguo 04/02/2011, 15:29
Avatar de Wakkos
Colaborador
 
Fecha de Ingreso: octubre-2001
Ubicación: (cerca)
Mensajes: 1.795
Antigüedad: 16 años, 2 meses
Puntos: 59
Respuesta: Consejo sobre Layout

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 =(
__________________
Cool Village
@Wakkos
  #6 (permalink)  
Antiguo 04/02/2011, 16:43
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Consejo sobre Layout

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.
  #7 (permalink)  
Antiguo 06/02/2011, 04:08
Avatar de Wakkos
Colaborador
 
Fecha de Ingreso: octubre-2001
Ubicación: (cerca)
Mensajes: 1.795
Antigüedad: 16 años, 2 meses
Puntos: 59
Respuesta: Consejo sobre Layout

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
__________________
Cool Village
@Wakkos

Última edición por Wakkos; 06/02/2011 a las 04:23
  #8 (permalink)  
Antiguo 06/02/2011, 07:44
Avatar de Wakkos
Colaborador
 
Fecha de Ingreso: octubre-2001
Ubicación: (cerca)
Mensajes: 1.795
Antigüedad: 16 años, 2 meses
Puntos: 59
Respuesta: Consejo sobre Layout

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?
__________________
Cool Village
@Wakkos

Última edición por Wakkos; 06/02/2011 a las 08:33

Etiquetas: consejo, layout
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 02:50.