Foros del Web » Creando para Internet » CSS »

problemas colocer background image dentro div

Estas en el tema de problemas colocer background image dentro div en el foro de CSS en Foros del Web. Uff la verdad es que no se que puedo hacer, debo tener un error css pero no se uq e hacer. Dentro del div mainconten ...
  #1 (permalink)  
Antiguo 08/03/2009, 10:25
 
Fecha de Ingreso: marzo-2009
Mensajes: 95
Antigüedad: 8 años, 9 meses
Puntos: 0
problemas colocer background image dentro div

Uff la verdad es que no se que puedo hacer, debo tener un error css pero no se uq e hacer.

Dentro del div mainconten que ya tiene un background image, creo un div llamado caja imagen

#cajaimagen {
background-image: url(imagenes/colepinturabuena.jpg);
background-position: 100% 100%;
position: absolute;
width: 624px;
height: 477px;
left: 302px;
top: 253px;
}

en el dreamweaver cs3 se ve perfecto pero al verlo en un navegador la imagen me sale muy a la izquierda y me tapa el menu izquierdo.
Si le pongo + pixel al left en el dreamweaver me sale muy a la derecha. que hago mal?

miradlo en http dos puntos barra barra lashiguerillas.webcindario.com/pruebaprincipal.php (no tengo permisos aun para pegar el url)

Gracias por todo un saludo!!!
  #2 (permalink)  
Antiguo 08/03/2009, 14:17
 
Fecha de Ingreso: octubre-2008
Ubicación: Bs As
Mensajes: 128
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: problemas colocer background image dentro div

No entedi nada.

Primero: Subi una captura de pantalla indicando el problema.
Segundo: Se tiene que ver bien en los navegadores, no nesesariamente en el DreamWever.

espero tu respuesta.
  #3 (permalink)  
Antiguo 08/03/2009, 17:47
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: problemas colocer background image dentro div

Hola:

He revisado tu código y en el CSS (twoColFixLtHdr.css) he cambiado esto (lo marcado en rojo):

Código:
#cajaimagen {
	background-image: url(imagenes/colepinturabuena.jpg);
	background-position: 100% 100%;
	position: relative;
	width: 624px;
	height: 477px;
	left: 0px;
	top: 0px;
}
Lógicamente, deberás adaptarlo a tus gustos.

Saludos.

  #4 (permalink)  
Antiguo 09/03/2009, 02:55
 
Fecha de Ingreso: marzo-2009
Mensajes: 95
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: problemas colocer background image dentro div

Ok perfecto la verdad es que me cuesta un poco entender lo de relativ, absolute, etc... se nota que es mi primera web; pero bueno lo estoy intentando y gracias a carcks como vosotros esto se hace un poco más facil.


GRACIAS!!!!

Por cierto al código al final le puse un left -20 para centrarlo un poco más en la página

Saludos!!!
  #5 (permalink)  
Antiguo 09/03/2009, 16:29
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: problemas colocer background image dentro div

Cita:
Iniciado por simbad1 Ver Mensaje
Por cierto al código al final le puse un left -20 para centrarlo un poco más en la página
Hola:

Ya te decía que tenías que adaptarlo a lo que tú necesitabas. Me alegra haberte sido útil.

Por si te interesa tienes aquí una guía muy interesante, léete el apartado 3.3.2.

Un saludo.

  #6 (permalink)  
Antiguo 09/03/2009, 18:27
 
Fecha de Ingreso: marzo-2009
Mensajes: 95
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: problemas colocer background image dentro div

ok buena guia!!! Muchas gracias!

Tengo otra duda con mi web pero no tengo permisos para insertarla se puede buscar en el google como "lashiguerillas" todo junto a mi me aparece la 5ª entrada de la primera página CEIP LAS HIGUERILLAS y pulsais el menu de la izquierda organigrama profesorado primaria o organigrama consejo escolar.
y después de q se abrir vulve a intentar ver el menu SORPRESA!!!! ERROR EN FIREFOX que explico a continuación
Resulta que he puesto un iframe para colgar ese pdf, pero me da un error en firefox. Resulta que en el menu de la izquierda no se me ven bien los elementos dentro de organigrama, secretaría (es decir los menus desplegables)... pero lo chocante es que no pasa en el IE

yo creia q era algo del z-index pero no se...

codigo html

<div id="mainContent"><!-- InstanceBeginEditable name="contenidoprincipal" --><iframe src="Documentos/ORGANIGRAMA PRIMARIA.pdf" width="587" height="580" align="center" class="twoColFixLtHdr" ></iframe>

css del spry menubarverticales

@charset "UTF-8";

/* SpryMenuBarVertical.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/************************************************** *****************************

LAYOUT INFORMATION: describes box model, positioning, z-order

************************************************** *****************************/

/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 90%;
cursor: default;
width: auto;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: //therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 200px;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
{
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 200px;
left: -1000em;
top: 0;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
left: 0;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
{
width: 220px;
}

/************************************************** *****************************

DESIGN INFORMATION: describes color scheme, borders, fonts

************************************************** *****************************/

/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
{
border: 1px solid #CCC;
}
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
{

}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
display: block;
cursor: pointer;
background-color: #31BC2D;
padding: 0.5em 0.75em;
color: #000000;
text-decoration: none;
border-bottom: #009900 1px solid;
border-left: #009900 1px solid;
border-right: #009900 1px solid;
border-top: #009900 1px solid;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
background-color: #000000;
color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
background-color: #000000;
color: #FFF;
}

/************************************************** *****************************

SUBMENU INDICATION: styles if there is a submenu under a given menu item

************************************************** *****************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

/************************************************** *****************************

BROWSER HACKS: the hacks below should not be changed unless you are an expert

************************************************** *****************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
{
position: absolute;
z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarVertical li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}
}
#noticiasscroll {
font-family: "Comic Sans MS";
background-color: #FFFFFF;
}

Este lio parecen palabras mayores jejejeje!!! Esto de ser la primera web!!!

Siento se un pesao!!! Gracias por todo!
  #7 (permalink)  
Antiguo 10/03/2009, 16:34
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: problemas colocer background image dentro div

Cita:
Iniciado por simbad1 Ver Mensaje
<div id="mainContent"><!-- InstanceBeginEditable name="contenidoprincipal" --><iframe src="Documentos/ORGANIGRAMA PRIMARIA.pdf" width="587" height="580" align="center" class="twoColFixLtHdr" ></iframe>
Hola:

No estoy seguro pero puede ser lo marcado en rojo, prueba a suprimir el espacio entre organigrama y primaria.

Saludos.

  #8 (permalink)  
Antiguo 11/03/2009, 13:01
 
Fecha de Ingreso: marzo-2009
Mensajes: 95
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: problemas colocer background image dentro div

Al final he cambiado la forma de presentación, en vez de un iframe, he puesto una imagen y así no hay problema!!!

Lo que no entiendo es pq el spry menu de la izquierda no se ve en IE6 y el de arriba si????

Esto es una locura!!! Y para postre me han comentado que joomla es mucho más sencillo y mejor q dreamweaver.

Aunq no se como funciona!!! GRACIAS DE TODAS FORMAS!!!
  #9 (permalink)  
Antiguo 13/03/2009, 10:07
 
Fecha de Ingreso: marzo-2009
Mensajes: 95
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: problemas colocer background image dentro div

Al final intenter hacer el cambio que me dijiste, pero nada!!!

La verdad yo creo que el fallo está en el css que crea el dreamweaver para el menu spry ... pero no logro acertar con lo que es!!! y mira que he probado!!!
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 00:09.