Foros del Web » Creando para Internet » CSS »

div encima de img internet explorer

Estas en el tema de div encima de img internet explorer en el foro de CSS en Foros del Web. ya bueno ojala me ayuden tengo esto Código PHP: < div id = "container" > < img id = "imagenPosicionCanal"  class= "imagenPosicionCanal"  src = "images/B3.png"   /> </ ...
  #1 (permalink)  
Antiguo 18/08/2009, 01:25
 
Fecha de Ingreso: julio-2008
Mensajes: 7
Antigüedad: 9 años, 5 meses
Puntos: 0
div encima de img internet explorer

ya bueno ojala me ayuden tengo esto

Código PHP:
<div id="container">
<
img id="imagenPosicionCanal" class="imagenPosicionCanal" src="images/B3.png"  />
</
div>
<
div id="resizeMe">
    <
div id="resizeSE"></div>
    <
div id="resizeE"></div>
    <
div id="resizeNE"></div>
    <
div id="resizeN"></div>
    <
div id="resizeNW"></div>
    <
div id="resizeW"></div>
    <
div id="resizeSW"></div>
    <
div id="resizeS"></div>
</
div

con css
Código PHP:
#resizeMe
{
    
float:none;
    
cursormove;
    
background-color:#000000;
    
border-width2px;
    
border-styleoutset;
    
border-color#CCCCCC;
    
}
#container img
{
    
float:left;
    
top50px;
    
left50px;
    
width650px;
    
height450px;


el problema que en firefox y chrome funciona y me coloca el div encima de la imagen pero en internet explorer me lo coloca abajo la imagen , ya he cambiado varias veces las propiedaddes de posicion y float y no me a funcionado , alguna idea para dejarlo funcionando bien en firefox y IE ( colocar el cuadro negro encima de lo azul).

Imagen como se me ve h t t p : //img37.imageshack.us/img37/8769/sinttulo1dhv.jpg
  #2 (permalink)  
Antiguo 18/08/2009, 07:18
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 12 años, 3 meses
Puntos: 54
Respuesta: div encima de img internet explorer

pq no usas posicionamiento absluto en vez de flotar?

Código html:
Ver original
  1. <div id="container">
  2. <img id="imagenPosicionCanal" class="imagenPosicionCanal" src="images/B3.png"  />
  3.  
  4. <div id="resizeMe">
  5.     <div id="resizeSE"></div>
  6.     <div id="resizeE"></div>
  7.     <div id="resizeNE"></div>
  8.     <div id="resizeN"></div>
  9.     <div id="resizeNW"></div>
  10.     <div id="resizeW"></div>
  11.     <div id="resizeSW"></div>
  12.     <div id="resizeS"></div>
  13. </div>  
  14.  
  15. </div>

Código css:
Ver original
  1. #conteiner{position:relative}
  2. #resizeSE{position:absolute;bottom:0;right:0}
  3. #resizeE{position:absolute;bottom:50&#37;;right:0}
  4. #resizeNE{position:absolute;top:0;right:0}
  5. #resizeN{position:absolute;top:0;right:50%}
  6. ....

espero te sirva de ayuda
__________________
Degiovanni Emilio
developtus.com
  #3 (permalink)  
Antiguo 18/08/2009, 14:49
Avatar de goyo_  
Fecha de Ingreso: agosto-2009
Mensajes: 91
Antigüedad: 8 años, 4 meses
Puntos: 1
Respuesta: div encima de img internet explorer

Marranisimo tu codigo, lo limpie un poco:

Código:
#resizeMe
{
    cursor: move;
    background: #000;
    border: 2px outset #CCC;
}
#container
{
	width: 650px;
	height: 450px;
	background: url(images/B3.png) no-repeat;
}  
</style>

<div id="container">
        <div id="resizeMe">
                <div id="resizeSE"></div>
                <div id="resizeE"></div>
                <div id="resizeNE"></div>
                <div id="resizeN"></div>
                <div id="resizeNW"></div>
                <div id="resizeW"></div>
                <div id="resizeSW"></div>
                <div id="resizeS"></div>
        </div>   
</div>
Me imagino que el divites tambien puede ser reducido.
  #4 (permalink)  
Antiguo 18/08/2009, 14:50
 
Fecha de Ingreso: julio-2008
Mensajes: 7
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: div encima de img internet explorer

up se me olvido que los div interior estan bien posicionados los resizes, resizeW( esoso no los pegue en el codigo pq es mucho css siendo que en ellos no tengo el problema) el problema es con el div de img y el resizeMe , los demas van bien posicionados con respecto al div padre ( problema en IE).
  #5 (permalink)  
Antiguo 18/08/2009, 15:05
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: div encima de img internet explorer

Otra forma de hacerlo:
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>kseso? jugando con css</title>
  4. <style type="text/css">
  5. * {margin: 0; padding: 0; border: 0; position: relative;}
  6. html, body {
  7. background-color: #cdcdcd;
  8. }
  9. #container {
  10. /* si necesitas...*/
  11. }
  12. #container img {position: absolute; left: 0; top: 0;}
  13.  
  14. .resizeMe {
  15. background-color: rgba(0,0,0,0.5); /* utilizar opacity y su equivalencia para ie si fuese necesario*/
  16. height:100px;
  17. left:190px;
  18. top:114px;
  19. width:100px;
  20. }
  21. </head>
  22.  
  23. <div id="container">
  24. <img src="http://share.skype.com/sites/es/skype/skype32ready.jpg" />
  25. <div class="resizeMe">
  26. </div>
  27. </div>
  28. </body>
  29. </html>
Omito los #resizeXXX.
Sólo es cuestión de adaptar el código anterior a tus particularidades.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 18/08/2009, 17:33
 
Fecha de Ingreso: julio-2008
Mensajes: 7
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: div encima de img internet explorer

gracias ya lo solucione dejando el primer div en absolut y el segundo relativo , ademas de no borrar los temprales (error mio).
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:31.