Foros del Web » Creando para Internet » CSS »

Diferente imagen de fondo en div de plantilla

Estas en el tema de Diferente imagen de fondo en div de plantilla en el foro de CSS en Foros del Web. Buenas tardes, estoy creando una web mediante CSS. He creado una plantilla con diferentes DIV, la div contenido es la unica que tengo como region ...
  #1 (permalink)  
Antiguo 02/11/2010, 10:39
 
Fecha de Ingreso: marzo-2010
Mensajes: 11
Antigüedad: 7 años, 8 meses
Puntos: 0
Diferente imagen de fondo en div de plantilla

Buenas tardes, estoy creando una web mediante CSS.

He creado una plantilla con diferentes DIV, la div contenido es la unica que tengo como region editable, mi problema viene ahora cuando creo una pagina nueva desde esta plantilla y quiero poner de fondo de cada página una imagen de fondo diferente en el Div Contenido, pero si modifico su estilo CSS se me modifica el de la plantilla y todas las demás páginas.

No se si me he explicado bien, pero mi objetivo es crear como plantilla una pagina donde los demas div sean iguales pero cambiando la imagen de fondo.

(he estado leyendo el post http://www.forosdelweb.com/f53/diferente-imagen-fondo-div-plantilla-830395/) pero claro yo el head no lo puedo modificar en una pagina ya que solo se modifica en la plantilla y estaria en las mismas.

Un saludo y gracias a los que me ayudéis de antemano.
  #2 (permalink)  
Antiguo 02/11/2010, 10:51
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: Diferente imagen de fondo en div de plantilla

Bueno es simple.

en el index.php puedes hacer esto:

Cita:
<body class="home">
y el CSS Sería:

Cita:
body.home{background:url(fondoHome.png;}
servicios.php

Cita:
<body class="servicios">
y el CSS Sería:

Cita:
body.servicios{background:url(fondoServicios.png;}
Es todo! ;)
  #3 (permalink)  
Antiguo 02/11/2010, 11:02
 
Fecha de Ingreso: marzo-2010
Mensajes: 11
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: Diferente imagen de fondo en div de plantilla

hola, mi pagina la estoy creando en html, ¿es exactamente igual? y claro la etiqueta body tampoco la puedo modificar, ya que la index tb es de la plantilla
  #4 (permalink)  
Antiguo 02/11/2010, 11:07
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: Diferente imagen de fondo en div de plantilla

Claro que sí.

index.html

Cita:
<body class="home">
y el CSS Sería:

Cita:
body.home{background:url(fondoHome.png;}
servicios.html

Cita:
<body class="servicios">
y el CSS Sería:

Cita:
body.servicios{background:url(fondoServicios.png;}
y así sigues.

Cualquier duda que tengas comentas, bueno y en realidad no es nada dificil lo importantes es que entiendas el código.

en el archivo por decir: Contacto.html colocas en el body:

<body class="contacto">

CSS:

body.contacto{background:url(fondoContacto.png;)}

Cuando hagas un body class en el html en CSS se agrega el "class" por medio de un punto.

Espero que te sirva y si tienes dudas, postea!
  #5 (permalink)  
Antiguo 02/11/2010, 11:10
 
Fecha de Ingreso: marzo-2010
Mensajes: 11
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: Diferente imagen de fondo en div de plantilla

perdona mi incompetencia pero la etiqueta body de la pagina html no la puedo modificar ya que pertenece a la plantilla y en las demas hojas la tengo deshabilitada. asi que no puedo tocarla.

te pongo mas o menos el codigo: solo puedo modificar el div class empresa, ya que lo demas esta deshabilitado.


<body onload="MM_preloadImages('images/btserviciosnegro.png','images/btmaquinarianegro.png','images/btprincipalesnegro.png')">

<div id="contenedor">
<div id="cabecera"></div>

<div id="menu">

<ul class="menu">

<li><a href="#">INICIO</a></li>
<li><a href="paginas/localizacion.html">LOCALIZACION</a></li>
<li><a href="paginas/contacto.html">CONTACTAR</a></li>
</ul>

</div>

<div id="menulateral">

<table>
<tr>
<td><a href="paginas/empresa.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('empresa','','images/btempresanegro.png',0)"><img src="images/btempresaverde.png" alt="menu empresa" name="empresa" width="163" height="27" border="0" id="empresa" /></a></td>
</tr>
<tr>
<td><a href="paginas/servicios.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('servicios','','images/btserviciosnegro.png',1)"><img src="images/btserviciosverde.png" alt="menu servicios" name="servicios" width="163" height="27" border="0" id="servicios" /></a></td>
</tr>
<tr>
<td><a href="paginas/maquinaria.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('maquinaria','','images/btmaquinarianegro.png',1)"><img src="images/btmaquinariaverde.png" alt="menu maquinaria" name="maquinaria" width="163" height="27" border="0" id="maquinaria" /></a></td>
</tr>
<tr>
<td><a href="paginas/principales.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('principales','','images/btprincipalesnegro.png',1)"><img src="images/btprincipalesverde.png" alt="menu principales obras" name="principales" width="163" height="27" border="0" id="principales" /></a></td>
</tr>
</table>




</div>
<div id="contenido"><!-- InstanceBeginEditable name="EditRegion3" -->
<div class="empresa">
<p>DESMONTES Y EXCAVACIONES BUSTOS, S.L. creada en el año 1990, dedicada a la construcción, desmontes y excavaciones, somos una empresa implicada en la calidad y atención al clientes, siempre certificando nuestras obras con el sello de Calidad ISO 9001 y cumpliendo todas las normas establecidas para poder realizar nuestro trabajo sin ningún contratiempo.</p>

<p>La experiencia de nuestra empresa en el sector industrial, le da una garantía de compromiso serio con usted en el trabajo contratado, la empresa está dotada de maquinaria de última generación de un equipo profesional con años de experiencia para la satisfacción del cliente.
</p>

</div>

<!-- InstanceEndEditable --></div>


<div id="pie">
<span style="float:left"><a href="#">Aviso Legal</a> | <a href="mapaweb.html">Mapa Web</a> | <a href="#" title="Alberto Bustos"> Webmaster</a></span>

<span style="float:right">© Bustos S.L. Todos los derechos reservados. http://www.excavacionesbustossl.com</span> </div>


</div>
</div>
</body>
<!-- InstanceEnd --></html>
  #6 (permalink)  
Antiguo 02/11/2010, 11:13
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: Diferente imagen de fondo en div de plantilla

Esa plantilla es para que CMS?

Wordpress? o para que?
  #7 (permalink)  
Antiguo 02/11/2010, 11:15
 
Fecha de Ingreso: marzo-2010
Mensajes: 11
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: Diferente imagen de fondo en div de plantilla

Cita:
Iniciado por PrendekZ Ver Mensaje
Esa plantilla es para que CMS?

Wordpress? o para que?
no, es una plantilla global html, solo para eso, todas las paginas de la plantilla son de HTML
  #8 (permalink)  
Antiguo 02/11/2010, 11:22
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: Diferente imagen de fondo en div de plantilla

Cita:
Iniciado por aioras Ver Mensaje
no, es una plantilla global html, solo para eso, todas las paginas de la plantilla son de HTML
... Bueno entonces porque tienes problemas?

O.o

seguramente ese es el index.html

Usted tiene:

Cita:
<body onload="MM_preloadImages('images/btserviciosnegro.png','images/btmaquinarianegro.png','images/btprincipalesnegro.png')">
Cambie por:

Cita:
<body class="home" onload="MM_preloadImages('images/btserviciosnegro.png','images/btmaquinarianegro.png','images/btprincipalesnegro.png')">
A lo anterior solo le agrege el class="home" y el CSS Sería:

Cita:
body.home{background:url(fondoHome.png);}
Te lo eh dicho varias veces, y después.. Cuando termines crea el empresa.html, servicios.html, localizacion.html, maquinaria.html, contacto.html o los archivos .html que necesites!

Después al archivo por decir "empresa.html" abres para editar:

y agregas al body class="empresa", y el css sería igual modificando el class y la ruta del fondo.

Saludos!
  #9 (permalink)  
Antiguo 02/11/2010, 11:29
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Diferente imagen de fondo en div de plantilla

Cita:
Iniciado por PrendekZ Ver Mensaje
Esa plantilla es para que CMS?
Wordpress? o para que?
el ya menciono que lo esta haciendo en HTML,sin programación ni nada complicado

Cita:
Iniciado por aioras Ver Mensaje
la div contenido es la unica que tengo como region editable, mi problema viene ahora cuando creo una pagina nueva desde esta plantilla y quiero poner de fondo de cada página una imagen de fondo diferente en el Div Contenido
dado que solo puedes modificar los elementos hijo de ese div y no al padre yo lo que aria es crear un div nuevo y a ese darle un alto y ancho al 100% y una un fondo, quedando este por encima del padre y obteniendo el efecto deseado.

utilizando el mismo código que nos mostraste, en el CSS podrías colocar:

Código CSS:
Ver original
  1. .empresa{width:100%;height:100%;background:#333 url(imagen.jpg);}

y este este te daría el efecto que necesitas
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #10 (permalink)  
Antiguo 02/11/2010, 11:36
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: Diferente imagen de fondo en div de plantilla

Cita:
Iniciado por Ag666 Ver Mensaje
el ya menciono que lo esta haciendo en HTML,sin programación ni nada complicado



dado que solo puedes modificar los elementos hijo de ese div y no al padre yo lo que aria es crear un div nuevo y a ese darle un alto y ancho al 100% y una un fondo, quedando este por encima del padre y obteniendo el efecto deseado.

utilizando el mismo código que nos mostraste, en el CSS podrías colocar:

Código CSS:
Ver original
  1. .empresa{width:100%;height:100%;background:#333 url(imagen.jpg);}

y este este te daría el efecto que necesitas
Si lees bien el código que ah dejado, los vinculos van a un archivo llamado "servicios.html, empresa.html, etc."

Es decir que si puede hacer lo que digo y sin darle problemas es mas fácil darle el class a cada body de la página.

Saludos!
  #11 (permalink)  
Antiguo 02/11/2010, 11:47
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Diferente imagen de fondo en div de plantilla

Cita:
Iniciado por PrendekZ Ver Mensaje
Si lees bien el código que ah dejado, los vinculos van a un archivo llamado "servicios.html, empresa.html, etc."

Es decir que si puede hacer lo que digo y sin darle problemas es mas fácil darle el class a cada body de la página.

Saludos!
has trabajado con plantillas? el no ha mencionado en que aplicación las usa... yo he asumido funciona similar a Dreamweaver... todos los cambios fuera del div editable son eliminados al realizar un cambio en la plantilla...

es decir, el si puede agregar la clase al body de dicha pagina pero si en determinado momento necesita cambiar algo en la plantilla ejem. los enlaces del menú.... perderá todos los cambios que haya realizado en los html y solo mantendrá lo que este dentro del div editable

ESTE TIPO DE PLANTILLAS son usadas con el fin de ahorrarse tiempo al editar contenido que debe aparecer en muchas paginas exactamente igual. (menús, banners, logo, pie de pagina... etc)
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #12 (permalink)  
Antiguo 02/11/2010, 11:56
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: Diferente imagen de fondo en div de plantilla

Cita:
Iniciado por Ag666 Ver Mensaje
has trabajado con plantillas? el no ha mencionado en que aplicación las usa... yo he asumido funciona similar a Dreamweaver... todos los cambios fuera del div editable son eliminados al realizar un cambio en la plantilla...

es decir, el si puede agregar la clase al body de dicha pagina pero si en determinado momento necesita cambiar algo en la plantilla ejem. los enlaces del menú.... perderá todos los cambios que haya realizado en los html y solo mantendrá lo que este dentro del div editable

ESTE TIPO DE PLANTILLAS son usadas con el fin de ahorrarse tiempo al editar contenido que debe aparecer en muchas paginas exactamente igual. (menús, banners, logo, pie de pagina... etc)
Si, tenes razón también eh visto webs así que solo carga la parte del contenido de la web más no todo el sitio.

Esperemos aver si logramos solucionarle algo a él. ;)

Saludos!

Etiquetas: diferente, fondo, plantillas
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 02:28.