Problema maquetando con unidad relativa (em) al querer aplicar un fondo estático

cristian_cena · #1 (**permalink**) 19/08/2009, 12:19

Hola Comunidad!

Primero agradecer a Milkmoro su ayuda con la propiedad position!!!

Estoy comenzando a trabajar con la unidad de medida em, ya que navegando he visto que es muy recomendada. El resultado es impresionante pero para dejar perfecta mi plantilla solo me falta una cosita: que el background-image no se ajuste al tamaño del resto de los elementos sino que quede fijo en la página, (que no cambie su tamaño por mas que se presione ctrl + scroll del ratón)

Posteo el código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
</head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Plantilla, css, dados"/>
<meta name="description" content="plantilla básica en css y javascript" />
<title>Plantilla css y un poquito de js</title>

<style type="text/css">
*{margin:0 auto; padding:0;}
html{
width:100%;
height:100%;
overflow:hidden;}

body {
width:100%;
height:100%;
overflow: auto;

background-image:url(mosaico.jpg);
background-repeat:repeat; background-position:fixed;

/*en este caso logro el efecto repitiendo el pattern, el cual varía su tamaño. Pero como hacer que dicho tamaño no varíe en relacion a la unidad de medida "em" si por ejemplo quiero utilizar una imagen con la propiedad no repeat:background-image:mi_imagen.jpg; background-repeat:no-repeat; */
/* background-color: #3399CC;*/
font-size:0.75em;
letter-spacing: normal;
text-align: left;
word-spacing: normal;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
}

#header {
width: 48.00em;
height:5em;
background-color: #FFFFFF;
color:#FFFFFF;
padding:1em;
margin-top:1em;

opacity: .7;
filter: alpha(opacity=70);

border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius: 8px;
}

#menu_fijo {

/*background-color: #3399CC;*/
width:48.00em;
margin: 0 auto 0 auto; /* top - right - bottom - left*/
padding:1em;

color:#FFFFFF;

}

#menu_fijo li {width:12em;}
#menu_fijo hr { clear:both; visibility:hidden;}
#content {
background-color: #FFFFFF;
color: #666666;
width: 50.00em;
margin:auto;

border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius: 8px;

opacity: .9;
filter: alpha(opacity=90);
}

#left {
width:10.50em;
float:left;
padding:1em;
}

#right {
width:35.50em;
float:left;
padding:1em;
}
#footer {
width: 48.00em;
background-color:#666666;
color:#FFFFFF;
padding:1em;
clear:both;
margin-bottom:1em;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-khtml-border-radius: 4px;}
#footer a {color:#FFFFFF; text-decoration:none;}
#footer a:hover {color:#336699; background-color:#FFFFFF; opacity: .9; filter: alpha(opacity=90);}

#footer_left {width:10.50em;margin-left:0; float:left;}

#enlaces_footer {width:35.50em;margin-right:0;}
#enlaces_footer h2 {background-color: #FFFFFF;}
#enlaces_footer h2:hover { font-style:italic;}
h1 {
font-size:1.5em;
color: #999999;
letter-spacing: normal;
text-align: left;
word-spacing: normal;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: uppercase;
}

h2 {font-size:0.85em;
color: #336699;
letter-spacing: normal;
text-align: left;
word-spacing: normal;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-variant: normal;
text-transform: uppercase;
}

</style>

</head>

<body>

<div id="header">
<h1>Mantenga presionada la tecla ctrl + scroll (ratón) para aumentar o disminuir tamaño de la página</h1>
</div>

<div id="menu_fijo">

<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">INICIO</a></li>
<li><a href="#">Nosotros</a></li>

<li><a class="MenuBarItemSubmenu" href="#">Servicios</a>
<ul>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
<li><a href="#">Item5</a></li>
</ul>
</li>

<li><a href="#">Contacto</a></li>
</ul>

<hr />
</div>

<div id="content">

<div id="left">
<h2>contenido de la columna izquierda</h2><br />
<p>contenido de la columna izquierda contenido de la columna izquierda</p>
<p>contenido de la columna izquierda</p>
<p>contenido de la columna izquierda</p>
<p>contenido de la columna izquierda</p>

</div>

<div id="right">
<h2>contenido de la columna izquierda</h2><br />
<p>contenido de la columna izquierda derecha contenido de la columna izquierda derecha contenido de la columna derecha</p>
<p>contenido de la columna izquierda derecha contenido de la columna izquierda derecha contenido de la columna derecha</p>
<p>contenido de la columna izquierda derecha contenido de la columna izquierda derecha contenido de la columna derecha</p>
<p>contenido de la columna izquierda derecha contenido de la columna izquierda derecha contenido de la columna derecha</p>
<p>contenido de la columna izquierda derecha contenido de la columna izquierda derecha contenido de la columna derecha</p>
<p>contenido de la columna izquierda derecha contenido de la columna izquierda derecha contenido de la columna derecha</p>
<p>contenido de la columna izquierda derecha contenido de la columna izquierda derecha contenido de la columna derecha</p>
<p>contenido de la columna izquierda derecha contenido de la columna izquierda derecha contenido de la columna derecha</p>
<p>contenido de la columna izquierda derecha contenido de la columna izquierda derecha contenido de la columna derecha</p>
<p>contenido de la columna izquierda derecha contenido de la columna izquierda derecha contenido de la columna derecha</p>
<p>contenido de la columna izquierda derecha contenido de la columna izquierda derecha contenido de la columna derecha</p>
<p>contenido de la columna izquierda derecha contenido de la columna izquierda derecha contenido de la columna derecha</p>
</div>

<div id="footer">
<div id="footer_left">

<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab"><p>opcion 1</p></div>
<div class="AccordionPanelContent"><h2>Contenido 1</h2></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Etiqueta 2</div>
<div class="AccordionPanelContent">Contenido 2</div>
</div>
</div>

</div>

<div id="enlaces_footer">
<a><h2>  + Enlaces</h2></a><br /><hr /><br />
<a href="http://ceslava.com/blog/8-breves-trucos-css-imprescindibles/">8 breves trucos CSS imprescindibles</a>
<span> | </span>
<a href="http://www.evolt.org/article/Ten_CSS_tricks_you_may_not_know/17/60369/">Ten CSS tricks you may not know</a>
<span> | </span>
<a href="http://blog.themeforest.net/general/15-css-tricks-that-must-be-learned/">15 CSS Tricks That Must be Learned</a> <span> | </span>
<a href="http://www.spanish-translator-services.com/espanol/t/007/">Hojasde estilo parala Web Trucos y sugerencias para CSS</a>
<span> | </span>
<a href="http://www.cssplay.co.uk/">CSS Play</a>
<span> | </span>
<a href="http://www.araudi.net/ejemplos/IE6fixed.html">Posicion fija(fixed)para IE6</a>
<span> | </span>
<a href="http://www.araudi.net/ejemplos/fondo_fijo_IE.html">Fondo fijo(fixed)para IE6</a>
<span> | </span>
<a href="http://www.araudi.net/migracion/ejemplo_posiciones.html">Posiciones raletiva y fija</a>
<span> | </span>
<a href="http://riddle.pl/emcalc/">Em Calculator</a>
<span> | </span>
<a href="http://foros.cristalab.com/transparencia-en-fondo-div-t20007/">filter:alpha CSS</a>
<br /><br /><hr />

</div> 
</div> 

</div>
</body>

Desde ya muchas gracias por su ayuda!!

Mikmoro · #2 (**permalink**) 20/08/2009, 10:09

Lo siento pero no entiendo la consulta. Las imágenes como fondo no deberían cambiar su tamaño en relación a la medida "em" ni al zoom del navegador.
¿Tienes un sitio (url) donde verlo?.

alexk · #3 (**permalink**) 20/08/2009, 14:13

mmmm hay una manera si te eh entendido claro, esto se hace bien en flash pero bueno

lo primero es usar una imagen tal cual en tu html y no "background" con css

Código html:

Ver original<img src="bg.jpg" class="mi_imagen_fondo" />

luego en tu CSS agregar

Código css:

Ver originalbody {
     overflow: hidden;
}
.mi_imagen_fondo {
     width: 100&#37;;
     position: absolute;
     top: 0;
     left: 0;
}

chao y suerte!...

cristian_cena · #4 (**permalink**) 20/08/2009, 16:54

Mikmoro: http://www.inicio2770.com.ar/

alexk: probé con tu codigo pero ni siquiera me aparece la imagen (fondo blanco), porque sera?

La plantilla está probada en Firefox 3.5.2, Opera, Safari y Chrome (en sus ultimas versiones) y en todas presenta el mismo problema (el fondo se vuelve relativo)

P/D: Probé la plantilla en IE8 y el fondo queda fijo como quiero. ¿quien dijo q el explorer no se la aguanta? jaja

saludos y desde ya muchas gracias por su ayuda...

alexk · #5 (**permalink**) 20/08/2009, 17:06

mmm que extraño entonces solo funciona en ie? jaja... que raro... luego lo reviso... pero si funciona en todos los navegadores... chao...

Mikmoro · #6 (**permalink**) 21/08/2009, 00:37

¿Pero en esa dirección te cambia el tamaño de la imagen de fondo al usar CTRL+rueda del ratón?

kseso? · #7 (**permalink**) 21/08/2009, 07:02

Entiendo que es el comportamiento lógico, modificar el tamaño de los contenidos, de todos, al Ctrl + + (o Ctrl+rueda). Incluidos los fondos.
¿Qué pasaría si tienes un menú con texto blanco sobre imagen negra en un sidebar izq. y en el cuerpo central de la página el fondo fuese blanco?
Si necesitas ver el texto con mayor tamaño de nada te serviría entonces hacer zoom. Blanco sobre blanco.

Que tu imagen de fondo pierde calidad, vale, pero ¿crees que eso le va a importar a tu visitante si necesita una fuente mínima de 30px? Lo que agradecerá es poder acceder a la información que le facilitas. Y posiblemente hasta agradecería que los fondos fuesen lisos y con gran contraste con el color de la fuente.

Y el evitar que eso suceda (que el tamaño de los fondos acompañe al zoom), sería ir en contra de las necesidades del usuario que necesite mayor font-size.

Un saludo

cristian_cena · #8 (**permalink**) 21/08/2009, 07:46

alexk: el efecto funciona solo para IE 8 (aclaro que ie sigue siendo un enemigo)

Mikmoro: a que te refieres con en esa direccion? no entiendo disculpa mi ignorancia, si te refieres a la dirección URL: tanto en localhost como en remoto se visualiza igual.

Kseso: primero: sin importarme la calidad de la imagen intento dejar fijo un fondo en una maqueta líquida.

segundo: tienes razón en que es el comportamiento lógico pero puedo hacer que todo mi contenido se comporte según la lógica menos el fondo?

tercero: al quedar el fondo fijo estaria permitiendo que el ojo del usuario se centre en el contenido de la página y no en un fondo que cambia sus proporciones.
__________________________________________________ ______________

Espero me haya podido explicar. Agradezco su constante ayuda, en especial a los colaboradores que siempre estan dando una mano y que mucho me han enseñado en este foro.

alexk · #9 (**permalink**) 21/08/2009, 08:37

cristian_cena funciona te lo aseguro... revisa tu overlfow... si le diste tamaño a la imagen... cuando me libre un poco lo miro...

y coincido con Kseso es un capricho mas que una necesidad... esto se hiso popular en flash... pero recordemos que el flash se estira y estira.... encambio una imagen tendria que tener dimensiones grandesitas

EDITO: Mira en esa url que diste no esta como te dije asi no puedo ver que pasa con ff... podrias ponerlo alli?...

Mikmoro · #10 (**permalink**) 21/08/2009, 08:47

Lo siento: me he perdido por completo.

alexk · #11 (**permalink**) 21/08/2009, 09:27

bueno... hice un ejemplo rapido y si funciona mira
http://zoneartcss.com/ejemplos/css/r...ensionada.html
chao y suerte!...

PD: Si era eso no? por que ya me perdi tambien creo jeje

kseso? · #12 (**permalink**) 21/08/2009, 10:14

Alexk, ¿has visto lo que ocurre en tu ejemplo al hacer uso de Ctrl + zoom?
A ver si sacas que propiedad lo provoca

alexk · #13 (**permalink**) 21/08/2009, 10:21

no entiendo?...
cuando haces Ctrl + zoom... el fondo nose mueve... a eso te refieres?....
tan solo es poner una imagen (<img>) con el 100% de ancho que simula ser un fondo pero no lo es... segun entendi eso quiere cristian_cena se hacia antiguamente en sitios en flash y aun se sigue haciendo pero yo lo veo inecesario nose ojala le sirva a alguien chao y suerte!...

kseso? · #14 (**permalink**) 21/08/2009, 10:28

No es con el fondo, Alexk, sino con el texto cuando sobrepasa el tamaño de la ventana.
¿Tienes acceso a él?

alexk · #15 (**permalink**) 21/08/2009, 10:35

mmm no entiedo... perdona

EDITO: terefieres al h1?... lo demas es irrelevante... lo importante alli es el fondo estatico a cualquier resolucion... pero no le veo nada... con FF y crhome chao

EDITO: ahhh ya veo... si se muere el scroll... habria que crear otro div... con scroll no me fije jeje... aver lo arreglo luego... gracias

EDITO: ya pss eso le meti otro div con scroll... gracias por avisar kseso?... se te ocurre otra manera? de como lo tengo?... la verdad yo me siento incomodo de la manera que lo hice pero no conosco otra... chao y gracias

cristian_cena · #16 (**permalink**) 22/08/2009, 10:37

alexk como ya te imaginaras soy nuevo en css por lo que a raiz de esta consulta estoy usando por primera vez propiedades como overflow y z-index, ojalá cuando aprenda a maquetar se me ocurra otra cosa pero al momento se me vino hacerlo asi, con un fondo fijo, pues la idea es agregar un javascript para que redimensione la pagina (A+/A-). Tu ejemplo me sirvio de maravillas y lo trasladé al codigo de la plantilla agregando un div class="all" tal como hiciste tu. Aqui va:

Test:
FFox anda perfecto
Chrome anda perfecto
Safari anda perfecto
IE 6 no toma las hojas de javascript por lo que no muestra el menu, ni el acordeon
¿Alguien usará todavia IE 6?
IE 7 no toma Javascript
Opera Aumenta/disminuye el tamaño de las barras de scroll
IE 8 anda

kseso, el tema es sobre el fondo fijo, pero no por eso deja de ser interesante lo que tu planteas.

Pueden ver la pagina aqui http://www.inicio2770.com.ar

alexk · #17 (**permalink**) 22/08/2009, 11:25

podrias entrar en http://www.araudi.net/ para ver menus desplegables con css para que no uses JS y entonces estara com quieres no?...

cristian_cena · #18 (**permalink**) 23/08/2009, 11:01

gracais alex