Foros del Web » Creando para Internet » Diseño web »

Color diferente en parte inferior del sitio segun la resolución

Estas en el tema de Color diferente en parte inferior del sitio segun la resolución en el foro de Diseño web en Foros del Web. Hola a todos, a ver si me sacan de una duda de nuevo, aquí siempre encuentro respuestas :) Tengo un sitio con muy poco contenido, ...
  #1 (permalink)  
Antiguo 24/02/2011, 15:37
 
Fecha de Ingreso: noviembre-2010
Mensajes: 27
Antigüedad: 7 años
Puntos: 0
Color diferente en parte inferior del sitio segun la resolución

Hola a todos, a ver si me sacan de una duda de nuevo, aquí siempre encuentro respuestas :)

Tengo un sitio con muy poco contenido, todo dentro de un div de tamaño fijo que no puede crecer porque el cliente me pide que no se genere scroll vertical.
El caso es que la he probado en varias resoluciones y se ve bien, pero a partir de 1400px se genera mucho espacio vacío debajo del pie de página (que va justo debajo del div del contenido). Entonces lo que quiero es, en resoluciones mayores a 1400px, agregar un fondo de un color diferente debajo del pie de página y que abarque toda esa parte inferior.

Con javascript detecto la resolución del usuario y llamo una hoja de estilos con lo siguiente:

.footer_bar
{
width:100%;
height: auto;
background-color: #e4e1d7;
}

pero no me funciona, me pone una línea delgada justo debajo del pie de página pero no llega hasta el fondo del monitor. Si a 'height' le doy un valor en px hace la línea más gruesa pero le doy un valor para cubrir toda la parte baja en una resolucion de, digamos, 1600px y si el usuario usa 1400px se genera scroll.

Les agradezco si alguien conoce alguna manera de lograr esto
  #2 (permalink)  
Antiguo 24/02/2011, 16:16
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 10 meses
Puntos: 36
Respuesta: Color diferente en parte inferior del sitio segun la resolución

Puedes probar con algo así. No necesita javascript.
El pie tambíen puede ocupar la posición inferior de la página si es necesario con algunos cambios.
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5. <style type="text/css">
  6. html,body{
  7.     height: 100%;
  8.     margin:0;
  9.     background:#fff;
  10. }
  11. #contenedor{
  12.     width:980px;
  13.     height:100%;
  14.     margin:0 auto;
  15.     background:#f00; /* Aquí el fondo bajo el pie que puede ser una imagen */
  16. }
  17. #contenido{
  18.     min-height:300px; /* puede eliminarse para adaptarse al contenido */
  19.     background:#00f;
  20. }
  21. #pie{
  22.     min-height:90px; /* puede eliminarse para adaptarse al contenido */
  23.     background:#0f0;
  24. }
  25. </head>
  26. <div id="contenedor">
  27.     <div id="contenido"></div>
  28.     <div id="pie"></div>
  29. </div>
  30. </body>
  31. </html>
  #3 (permalink)  
Antiguo 24/02/2011, 16:53
 
Fecha de Ingreso: noviembre-2010
Mensajes: 27
Antigüedad: 7 años
Puntos: 0
Respuesta: Color diferente en parte inferior del sitio segun la resolución

Hola sanxuan, gracias por contestar.

Tu código me ha ayudado, sólo una duda más, ¿cómo puedo hacer que en resoluciones menores no aparezca ese color de fondo? Así como está me aparece justo debajo del pié de página, y quiero dejar un márgen. Margin-top y margin-bottom no hacen el truco...

Gracias!
  #4 (permalink)  
Antiguo 24/02/2011, 17:37
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 10 meses
Puntos: 36
Respuesta: Color diferente en parte inferior del sitio segun la resolución

Hay bastantes formas diferentes. Por ejemplo, si en lugar de un color vas a usar una imagen de fondo, puedes usar las propiedad " background: url("img.gif") no-repeat scroll center 700px transparent;" para que aparezca a partir de 700px de altura.
Si pones tu código HTML y CSS y lo que quieres conseguir exactamente se puede afinar algo más. Mejor si tuvieses tu página en internet y compartieras un enlace.
  #5 (permalink)  
Antiguo 24/02/2011, 20:51
 
Fecha de Ingreso: noviembre-2010
Mensajes: 27
Antigüedad: 7 años
Puntos: 0
Respuesta: Color diferente en parte inferior del sitio segun la resolución

No la tengo aún en servidor pero bueno, aquí va parte del código, creo que lo suficiente, sólo dejé fuera cosas de estilo.

HTML
Código HTML:
<body>

<!--  ********  ENCABEZADO  ********  -->

	<div class="header">
		<ul class="menu">  
			<li><a href="#">Menú 1</a></li>
			<li><a href="#">Menú 2</a></li>
			<li><a href="#">Menú 3</a></li>  
			<li><a href="#">Menú 4</a></li>  
			<li><a href="#">Menú 5</a></li>  
		</ul>
	</div>

<!--  ********  CONTENIDO  ********  -->
	
	<div class="main">Contenido</div>

<!--  ********  PIE DE PÁGINA  ********  -->

	<div class="footer">
	<p>Links, contacto, etc.</p>
	</div>

	<div class="footer_bar"></div>

</body> 
CSS
Código:
*
{
margin: 0;
padding: 0;
}

body
{
background-color: #7d011d; /* este color es el fondo de la página, no el que quiero poner debajo del pié */
}

/* ----------------    ENCABEZADO    ------------------ */

.header
{
min-width: 960px;
height: 107px;
background-image: url("../img/bar.jpg");
background-position: center;
}

.menu
{
position: fixed;
top: 3%;
left: 53%;
}

/* ----------------    CONTENIDO    ------------------ */

.main /* aquí dentro va todo mi contenido */
{
width: 957px;
height: 399px;
margin: 40px auto;
background-image: url("../img/main.jpg");
}

/* ----------------    PIE DE PÁGINA    ------------------ */

.footer
{
width: 550px;
margin: 0 auto;
color: #ffffff;
font-size: 10px;
font-family: Verdana,Geneva,Tahoma,sans-serif;
}

.footer_bar /* esta es la parte que no consigo */
{
width:100%;
height: auto;
background: #e4e1d7; /* color ejemplo */
}
Si hace falta poner algo más sólo diganme y gracias de nuevo por la ayuda.

Etiquetas: color, diferente, resolución
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 18:49.