Foros del Web » Creando para Internet » CSS »

Diseño fijo que parece líquido.

Estas en el tema de Diseño fijo que parece líquido. en el foro de CSS en Foros del Web. Hola he visto en muchas webs que tienen diseños fijos pero que los colores de fondo llegan al borde de la pantalla sea cual sea ...
  #1 (permalink)  
Antiguo 24/02/2011, 18:57
pur
 
Fecha de Ingreso: agosto-2007
Mensajes: 98
Antigüedad: 10 años, 3 meses
Puntos: 4
Diseño fijo que parece líquido.

Hola he visto en muchas webs que tienen diseños fijos pero que los colores de fondo llegan al borde de la pantalla sea cual sea la resolución.
O sea si la cabecera es color naranja, esta llega hasta el borde siempre, lo mismo con el cuerpo y el pie.
Seguramente esta sea una técnica que incluye el fondo, css, etc.

Si me pueden dar una punta de como se hace les agradezco.
Saludos.
  #2 (permalink)  
Antiguo 24/02/2011, 19:22
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Diseño fijo que parece líquido.

Si ya sabes algo de HTML y CSS, creo que la mejor idea es usar tu navegador habitual, sus herramientas de desarrollador, Firebug si usas Firefox, y empezar a investigar cómo están hechas tus páginas favoritas.
Se suelen usar divs que ocupan el ancho del navegador, dentro de los cuales se centra otro div de ancho fijo centrado respecto al anterior.
Se puede usar la propiedad background-repeat para el fondo si es un degradado o algo similar.
  #3 (permalink)  
Antiguo 24/02/2011, 23:03
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Diseño fijo que parece líquido.

Para lograr ese efecto puede que te sea útil trabajar en bloques. uno debajo del otro ;)

Prueba este código:
Código HTML:
Ver original
  1. <div class="liquido"><div class="centrado"> ...cabeza... </div></div>
  2. <div class="centrado"> ...cuerpo... </div>
  3. <div class="liquido"><div class="centrado"> ...pie... </div></div>
  4. </body>

Código CSS:
Ver original
  1. .liquido{
  2. width:100&#37;;
  3. height:50px;
  4. background:#707070;
  5. /*si necesitas repetir una imagen de fondo puedes hacer...
  6. background:#707070 url('directorio/archivo.xxx') 0 0 repeat-x;
  7. */
  8. }
  9. .centrado{
  10. width:960px;
  11. height:50px;
  12. margin:0 auto;
  13. background:gray;
  14. }

Saludos.

Etiquetas: diseño, fijo
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 13:10.