Diferente imagen de fondo en div de plantilla

aioras · #1 (**permalink**) 02/11/2010, 09:39

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.

PrendekZ · #2 (**permalink**) 02/11/2010, 09:51

Bueno es simple.

en el index.php puedes hacer esto:

Cita:

y el CSS Sería:

Cita:

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

servicios.php

Cita:

y el CSS Sería:

Cita:

body.servicios{background:url(fondoServicios.png;}

Es todo! ;)

aioras · #3 (**permalink**) 02/11/2010, 10:02

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

PrendekZ · #4 (**permalink**) 02/11/2010, 10:07

Claro que sí.

index.html

Cita:

y el CSS Sería:

Cita:

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

servicios.html

Cita:

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!

aioras · #5 (**permalink**) 02/11/2010, 10:10

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">
<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>

</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>
</html>

PrendekZ · #6 (**permalink**) 02/11/2010, 10:13

Esa plantilla es para que CMS?

Wordpress? o para que?

aioras · #7 (**permalink**) 02/11/2010, 10:15

Cita:

Iniciado por PrendekZ

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

PrendekZ · #8 (**permalink**) 02/11/2010, 10:22

Cita:

Iniciado por aioras

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:

Cambie por:

Cita:

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!

ArturoGallegos · #9 (**permalink**) 02/11/2010, 10:29

Cita:

Iniciado por PrendekZ

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

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.empresa{width:100%;height:100%;background:#333 url(imagen.jpg);}

y este este te daría el efecto que necesitas

PrendekZ · #10 (**permalink**) 02/11/2010, 10:36

Cita:

Iniciado por Ag666

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

ArturoGallegos · #11 (**permalink**) 02/11/2010, 10:47

Cita:

Iniciado por PrendekZ

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)

PrendekZ · #12 (**permalink**) 02/11/2010, 10:56

Cita:

Iniciado por Ag666

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!