Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Problema maquetando con unidad relativa (em) al querer aplicar un fondo estático en el foro de CSS en Foros del Web. Hola Comunidad! Primero agradecer a Milkmoro su ayuda con la propiedad position!!! Estoy comenzando a trabajar con la unidad de medida em , ya que ...
  #1 (permalink)  
Antiguo 19/08/2009, 13:19
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Problema maquetando con unidad relativa (em) al querer aplicar un fondo estático

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">
<!--menu-->
<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>
<!-- fin menu-->
<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><!--left-->

<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><!--right-->

<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><!--accordion-->

</div><!--footer_left-->

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

</div> <!--enlaces footer-->
</div> <!-- footer-->

</div><!--content-->
</body>


Desde ya muchas gracias por su ayuda!!
  #2 (permalink)  
Antiguo 20/08/2009, 11:09
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema maquetando con unidad relativa (em) al querer aplicar un fondo es

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?.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 20/08/2009, 15:13
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: Problema maquetando con unidad relativa (em) al querer aplicar un fondo es

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
  1. <img src="bg.jpg" class="mi_imagen_fondo" />

luego en tu CSS agregar
Código css:
Ver original
  1. body {
  2.      overflow: hidden;
  3. }
  4. .mi_imagen_fondo {
  5.      width: 100&#37;;
  6.      position: absolute;
  7.      top: 0;
  8.      left: 0;
  9. }

chao y suerte!...
  #4 (permalink)  
Antiguo 20/08/2009, 17:54
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problema maquetando con unidad relativa (em) al querer aplicar un fondo es

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...
  #5 (permalink)  
Antiguo 20/08/2009, 18:06
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: Problema maquetando con unidad relativa (em) al querer aplicar un fondo es

mmm que extraño entonces solo funciona en ie? jaja... que raro... luego lo reviso... pero si funciona en todos los navegadores... chao...
  #6 (permalink)  
Antiguo 21/08/2009, 01:37
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema maquetando con unidad relativa (em) al querer aplicar un fondo es

¿Pero en esa dirección te cambia el tamaño de la imagen de fondo al usar CTRL+rueda del ratón?
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 21/08/2009, 08:02
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema maquetando con unidad relativa (em) al querer aplicar un fondo es

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 21/08/2009, 08:46
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problema maquetando con unidad relativa (em) al querer aplicar un fondo es

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.
  #9 (permalink)  
Antiguo 21/08/2009, 09:37
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: Problema maquetando con unidad relativa (em) al querer aplicar un fondo es

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?...

Última edición por alexk; 21/08/2009 a las 10:21 Razón: se me paso
  #10 (permalink)  
Antiguo 21/08/2009, 09:47
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema maquetando con unidad relativa (em) al querer aplicar un fondo es

Lo siento: me he perdido por completo.
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 21/08/2009, 10:27
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: Problema maquetando con unidad relativa (em) al querer aplicar un fondo es

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
  #12 (permalink)  
Antiguo 21/08/2009, 11:14
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema maquetando con unidad relativa (em) al querer aplicar un fondo es

Alexk, ¿has visto lo que ocurre en tu ejemplo al hacer uso de Ctrl + zoom?
A ver si sacas que propiedad lo provoca
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #13 (permalink)  
Antiguo 21/08/2009, 11:21
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: Problema maquetando con unidad relativa (em) al querer aplicar un fondo es

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!...
  #14 (permalink)  
Antiguo 21/08/2009, 11:28
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema maquetando con unidad relativa (em) al querer aplicar un fondo es

No es con el fondo, Alexk, sino con el texto cuando sobrepasa el tamaño de la ventana.
¿Tienes acceso a él?
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #15 (permalink)  
Antiguo 21/08/2009, 11:35
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: Problema maquetando con unidad relativa (em) al querer aplicar un fondo es

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

Última edición por alexk; 21/08/2009 a las 12:11 Razón: edito otra vez jeje
  #16 (permalink)  
Antiguo 22/08/2009, 11:37
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problema maquetando con unidad relativa (em) al querer aplicar un fondo es

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
  #17 (permalink)  
Antiguo 22/08/2009, 12:25
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: Problema maquetando con unidad relativa (em) al querer aplicar un fondo es

podrias entrar en http://www.araudi.net/ para ver menus desplegables con css para que no uses JS y entonces estara com quieres no?...
  #18 (permalink)  
Antiguo 23/08/2009, 12:01
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problema maquetando con unidad relativa (em) al querer aplicar un fondo es

gracais alex
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 22:07.