Foros del Web » Creando para Internet » CSS »

Problema con background-imagen

Estas en el tema de Problema con background-imagen en el foro de CSS en Foros del Web. Buenas amigos del foro. Tengo un problema con CSS que no logro ni explicar ni solucionar. Tengo esta estructura de Divs para maquetar una página, ...
  #1 (permalink)  
Antiguo 06/11/2008, 02:22
 
Fecha de Ingreso: julio-2008
Ubicación: Alcañiz-Teruel-España
Mensajes: 182
Antigüedad: 9 años, 5 meses
Puntos: 5
Problema con background-imagen

Buenas amigos del foro.

Tengo un problema con CSS que no logro ni explicar ni solucionar.

Tengo esta estructura de Divs para maquetar una página, esta se encuentra en ./configuracion/parametros.php y es incluida (mediante un include de php) desde index.php que se encuentra en el raiz./

Código html:
Ver original
  1. <div id="contenido_param">
  2.  
  3.   <div class="barra_secciones" align="center" style="float:left;width: 100%;height: 20px;background-image: url('media/barrapk.png');background-repeat: repeat-x;">
  4.  
  5.   </div>
  6.   <div id="menu_param">
  7.     <table>
  8.       <tr>
  9.         <td valign="middle">
  10.           <ul id="nav_param">
  11.             <li id="nav_param-horarios"><a href="javascript: mueveparam('configuracion/muevePestanaParam.php?va=jorn&viene=jorn','jorn');" class="active"><?PHP echo "Horarios"; ?></a></li>
  12.             <li id="nav_param-intervalos"><a href="javascript: mueveparam('configuracion/muevePestanaParam.php?va=inter&viene=jorn','jorn');"><?PHP echo "Intervalos"; ?></a></li>
  13.           </ul>
  14.         </td>
  15.       </tr>
  16.     </table>
  17.   </div>
  18.  
  19.   <div class="tabla_param" style="float:left; width:100%;">
  20.  
  21.     <FORM ACTION="parametros/daralta.php" NAME="insertarParam" METHOD="POST" ENCTYPE="multipart/form-data">
  22.       <TABLE width="100%" id="formPestanas">
  23.         <tbody>
  24.  
  25.         </tbody>
  26.       </TABLE>
  27.     </FORM>
  28.  
  29.   </div> <!--cierre tabla_param-->
  30.  
  31.   <div class="espacio_boton_act">
  32.     <img src="media/barracleaner.png">
  33.   </div>
  34.  
  35.   <div class="boton_param"  onclick="javascript:actualizaAgenda('today/volverAct.php?dia=<?PHP echo $fecha_actual[2]; ?>&nuevo_mes=<?PHP echo $fecha_actual[1]; ?>&nuevo_ano=<?PHP echo $fecha_actual[0]; ?>');">
  36.     <div class="contenido_boton_param">
  37.             <table>
  38.             <tr><td>&nbsp;</td><td>
  39.                 <img src="media/exitdoor.gif">
  40.             </td>
  41.             <td valing="middle">
  42.                 &nbsp;exit
  43.             </td></tr>
  44.             </table>
  45.     </div>
  46.   </div>
  47.  
  48.   <div class="espacio_boton_param">
  49.     <img src="media/barracleaner.png">
  50.   </div>
  51.  
  52.   <div class="boton_param"  onClick="javascript: muevepestana('today/muevePestanaParam.php?va=datosCO&viene=datosCO','datosCO'); javascript: document.forms.insertarContacto.submit();">
  53.     <div class="contenido_boton_param">
  54.             <table>
  55.             <tr><td>&nbsp;</td><td>
  56.                 <img src="media/guardar.png">
  57.             </td>
  58.             <td valing="middle">
  59.                 &nbsp;Guardar
  60.             </td></tr>
  61.             </table>
  62.     </div>
  63.   </div>
  64. </div> <!-- cierre contenido_param -->

y este es el CSS que da estilo, que se encuentra en ./configuracion/parametros.css

Código css:
Ver original
  1. #contenido_param {
  2.     width: 100%;
  3.     background-image: url("../media/barradegradada.png");
  4.     background-repeat: repeat-x;
  5. }
  6. .tabla_param {
  7.   height: 490px;
  8.     overflow-x: auto;
  9.     overflow-y: visible;
  10. }
  11.  
  12. .boton_param {
  13.   float: right;
  14.     display: inline;
  15.   width: 10%;
  16.   cursor:pointer;
  17. }
  18.  
  19. .contenido_boton_param {
  20.   height: 30px;
  21.     border: 1px solid #4682B4;
  22.     /*font:bold 10px Verdana;*/
  23.     background-image: url("../media/barra.png");
  24.     background-repeat: repeat-x;
  25.     /*vertical-align: middle;*/
  26. }
  27.  
  28. .contenido_boton_param:hover {
  29.     background-image: url("../media/barraon.png");
  30.     background-repeat: repeat-x;
  31.     border: 1px solid #064274;
  32. }
  33.  
  34. .espacio_boton_param {
  35.   float: right;
  36.     display: inline;
  37.   width: 2%;
  38.   height:30px;
  39. }
  40. /*-------------------PESTAÑAS PARAMETROS------------------------*/
  41.  
  42. #menu_param {
  43. text-align: left;
  44.    width: 100%;
  45.    height: 27px;
  46.    float:left;
  47.   vertical-align:middle;
  48.    
  49. }
  50.  
  51.  
  52. ul#nav_param {
  53.     position: relative;
  54.     height: 27px; width: 490px;
  55.     background: url("../media/menu2.png") no-repeat;
  56.  margin: 0 0 0 0; padding: 0 0 0 0;
  57.       padding-top: 5px;
  58.   vertical-align:middle;
  59.     }
  60.  
  61.     ul#nav_param li {
  62.         float: left;
  63.          margin: 0 0 0 0; padding: 0 0 0 0;
  64.         list-style: none;
  65.         }
  66.    
  67.     ul#nav_param li a {
  68.         position: absolute;
  69.         /*text-indent: -9999px;*/
  70.         text-align:center;
  71.         vertical-align:middle;
  72.         text-decoration: none;
  73.         border: none ;
  74.         top: 0; height: 20px;
  75.     font-family:Verdana;
  76.     font-weight: bold;
  77.     font-size: 8pt;
  78.     color: #064274;
  79.     cursor:pointer;
  80.         }
  81.  
  82.         ul#nav_param li#nav_param-horarios a {
  83.             left: 6px; width: 62px;
  84.             background: url("../media/menu2.png") -6px 0 no-repeat;
  85.       vertical-align:middle;
  86.  
  87.             }
  88.         ul#nav_param li#nav_param-intervalos a {
  89.             left: 70px; width: 80px;
  90.             background: url("../media/menu2.png") -70px 0 no-repeat;
  91.             vertical-align:middle;
  92.             }
  93.            
  94.            
  95. ul#nav_param li#nav_param-horarios a:hover              { background-position: -6px   -33px; }
  96. ul#nav_param li#nav_param-intervalos a:hover            { background-position: -70px  -33px; }
  97.  
  98. ul#nav_param li#nav_param-horarios a.active             { background-position: -6px   -66px; }
  99. ul#nav_param li#nav_param-intervalos a.active           { background-position: -70px  -66px; }

Las imagenes se encuentran en ./media.
Todo el estilo me funciona correctamente salvo el backgroun-image de #contenido_param ni me lo pinta ni me hace el background-repeat. No me lo puedo explicar cuando el resto de imagenes de fondo de los otros divs si me los pinta y repite correctamente.

Si alguien me pudiera decir algo???Muchas Gracias de antemano

Saludos
__________________
Si quieres puedes y si puedes debes. Imposible is nothing!!!
  #2 (permalink)  
Antiguo 06/11/2008, 02:43
 
Fecha de Ingreso: octubre-2006
Ubicación: Murcia - España
Mensajes: 336
Antigüedad: 11 años, 1 mes
Puntos: 6
Respuesta: Problema con background-imagen

No me he leído el código, pero si no te lo dibuja lo más seguro es que sea por la ruta.

¿Porque no usas rutas absolutas en vez de relativas?.
  #3 (permalink)  
Antiguo 06/11/2008, 04:11
 
Fecha de Ingreso: julio-2008
Ubicación: Alcañiz-Teruel-España
Mensajes: 182
Antigüedad: 9 años, 5 meses
Puntos: 5
Respuesta: Problema con background-imagen

puede que tengas razon, pero entonces como explicas que pinte las demás imagenes y la del div #contenido_param no siendo que están en la misma ubicación y las rutas relativas que pongo son las mismas

Gracias de todas formas por tu contestación aunque si podeis mirar elcódigo os daréis cuenta que algo raro pasa.

P.d. ¿¿¿La ruta absoluta sería p.e. src="http://localhost/miProyecto/imagenes/miimagen.png" ???
__________________
Si quieres puedes y si puedes debes. Imposible is nothing!!!
  #4 (permalink)  
Antiguo 06/11/2008, 04:24
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con background-imagen

prueba
Cita:
#contenido_param {
width: 100%;
background: #trasparent url(../media/barradegradada.png) repeat-x left top;
Si te has asegurado que realmente está la imagen en ese directorio:
¿Has verificado que la imagen barradegradada.png sea un png de 24 bits y no de 32 bits?
O cualquier otra extensión no compatible con los navegadores renombrada a png.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 06/11/2008 a las 04:32
  #5 (permalink)  
Antiguo 06/11/2008, 04:32
 
Fecha de Ingreso: julio-2008
Ubicación: Alcañiz-Teruel-España
Mensajes: 182
Antigüedad: 9 años, 5 meses
Puntos: 5
Respuesta: Problema con background-imagen

Por eso no hay problema...

Empleo esa misma imagen en otras clases para otras páginas de la misma aplicación y me funciona perfectamente. Además con el firebug del firefox buceo por el codigo html y voy hasta el div #contenido_param,...me posiciono encima de él y en la parte del css me aparece correctamente el codigo css asociado a ese identificador, cuando paso el ratón por encima del url del background-image me sale un tooltip con la imagen informandome de la resolución, es decir, la imagen la encuentra, no se porque no la pinta,...

Tiene que ser algo de conflicto entre los divs o algo asi,...

No se que más puedo mirar

Gracias por vuestro interés
__________________
Si quieres puedes y si puedes debes. Imposible is nothing!!!

Última edición por matak; 06/11/2008 a las 04:43
  #6 (permalink)  
Antiguo 06/11/2008, 04:49
 
Fecha de Ingreso: julio-2008
Ubicación: Alcañiz-Teruel-España
Mensajes: 182
Antigüedad: 9 años, 5 meses
Puntos: 5
Respuesta: Problema con background-imagen

Solucionado,...asi quedo el CSS

#contenido_param {
width:100%;
background-image:url(../media/barradegradada.png);
background-repeat:repeat-x;
display:inline;
float:left;
}

Gracias
__________________
Si quieres puedes y si puedes debes. Imposible is nothing!!!
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 20:52.