Comunidad de diseño web y desarrollo en internet online

AYUDA POR FAVOR: ordenar capas superpuesta

Citar            
MensajeEscrito el 02 Nov 2009 10:14 pm
Tengo un menú hecho en CSS, horizontal que despliega sub menus en la cabecera. El caso es que tengo un flash posteriormente en el cuerpo central, que cuando se despliega le pasa por debajo.

Entonces, lo que quiero es o bien, llevar el flash como capa de fondo o el menu como primera capa.
como hago esto ?? que es lo que debo hacer, ademas le sdigo que tanto el flash como el menu estan
colocados en celdas de una tabla.
muchas gracias

Por gambito

3 de clabLevel



 

firefox
Citar            
MensajeEscrito el 04 Nov 2009 05:39 pm
te recomiendo que cambies las celdas por div's eso para empezar y para lo de las capas usa la propiedad z-index de CSS, dandole un z-index elevado a tu menu y otro negativo a tu flash apra asegurarte que quede por debajo algo como z-index:999; para tu menu y z-index:-999 par tu flash

Por NeoCesar

Claber

1415 de clabLevel

14 tutoriales

Genero:Masculino  

Algun lugar dentro de la Matrix (Lima - Perú)

msie8
Citar            
MensajeEscrito el 04 Nov 2009 07:03 pm
hola neocesar:
graicas por tu respuesta, pero ahora tengo otro problema parecido en otra pagina.
Tengo unas imagenes que cuando le haces un click sobre dicha imagen abre una ventanita por medio de un javascript que contiene esa misma imagen un poco mas grande y tambien algo de texto.
Pues bien esa ventanita que se habre me queda siempre por debajo del flash, puse el flash como vos me indicaste en un div (capa) a esa capa le di un valor negativo pero no pasa nada me sigue saliendo encima de la ventanita.
aca te mando el css que junto al JS controla a la ventana, como veras tiene el z-index que tambien modifique pero no pasa nada. Ojala me puedas ayudar, muchas gracias

#thumbBox{ /*Outermost DIV for thumbnail viewer*/
position: absolute;
left: 0;
top: 0;
width: auto;
padding: 10px;
padding-bottom: 0;
background: #e4e9f8;
visibility: hidden;
z-index: 10;
cursor: hand;
cursor: pointer;
}

#thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "Cerrar" link */
font: bold 14px Tahoma;
letter-spacing: 3px;
line-height: 1.1em;
color: white;
padding: 5px 0;
text-align: right;
}


#thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */
background-color: white;
}

#thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/
position: absolute;
visibility: hidden;
border: 1px solid black;
background-color: #EFEFEF;
padding: 5px;
z-index: 5;
}

Por gambito

3 de clabLevel



 

firefox
Citar            
MensajeEscrito el 04 Nov 2009 07:09 pm
te falto ponerle el z-Index a la clase

gambito escribió:

#thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */
background-color: white;
}
ahi debes poner

Código :

#thumbBox #thumbImage{ /*DIV que contiene la imagen agrandada*/
background-color: white;
z-index:999;
}
Y con eso se debería solucionar tu problema

Por NeoCesar

Claber

1415 de clabLevel

14 tutoriales

Genero:Masculino  

Algun lugar dentro de la Matrix (Lima - Perú)

msie8
Citar            
MensajeEscrito el 04 Nov 2009 11:38 pm
hola neocesar:
gracias por tu respuesta pero no paso nada, modifique el codigo css pero la cosa sigue igual.
aca te mando el codigo del JS para ver si es por ahi que esta el error, yo ya no se mas que hacer.
muchas gracias otra vez y espero que se te ocurra algo


var thumbnailviewer={
enableTitle: true, //Should "title" attribute of link be used as description?
enableAnimation: true, //Enable fading animation?
definefooter: '<div class="footerbar">CERRAR X</div>', //Define HTML for footer interface
defineLoading: '<img src="loading.gif" /> Cargando Imagen...', //Define HTML for "loading" div

/////////////No need to edit beyond here/////////////////////////

scrollbarwidth: 16,
opacitystring: 'filter:progid:DXImageTransform.Microsoft.alpha(opacity=10); -moz-opacity: 0.1; opacity: 0.1',
targetlinks:[], //Array to hold links with rel="thumbnail"

createthumbBox:function(){
//write out HTML for Image Thumbnail Viewer plus loading div
document.write('<div id="thumbBox" onClick="thumbnailviewer.closeit()"><div id="thumbImage"></div>'+this.definefooter+'</div>')
document.write('<div id="thumbLoading">'+this.defineLoading+'</div>')
this.thumbBox=document.getElementById("thumbBox")
this.thumbImage=document.getElementById("thumbImage") //Reference div that holds the shown image
this.thumbLoading=document.getElementById("thumbLoading") //Reference "loading" div that will be shown while image is fetched
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
},


centerDiv:function(divobj){ //Centers a div element on the page
var ie=document.all && !window.opera
var dom=document.getElementById
var scroll_top=(ie)? this.standardbody.scrollTop : window.pageYOffset
var scroll_left=(ie)? this.standardbody.scrollLeft : window.pageXOffset
var docwidth=(ie)? this.standardbody.clientWidth : window.innerWidth-this.scrollbarwidth
var docheight=(ie)? this.standardbody.clientHeight: window.innerHeight
var docheightcomplete=(this.standardbody.offsetHeight>this.standardbody.scrollHeight)? this.standardbody.offsetHeight : this.standardbody.scrollHeight //Full scroll height of document
var objwidth=divobj.offsetWidth //width of div element
var objheight=divobj.offsetHeight //height of div element
var topposition=(docheight>objheight)? scroll_top+docheight/2-objheight/2+"px" : scroll_top+10+"px" //Vertical position of div element: Either centered, or if element height larger than viewpoint height, 10px from top of viewpoint
divobj.style.left=docwidth/2-objwidth/2+"px" //Center div element horizontally
divobj.style.top=Math.floor(parseInt(topposition))+"px"
divobj.style.visibility="visible"
},

showthumbBox:function(){ //Show ThumbBox div
this.centerDiv(this.thumbBox)
if (this.enableAnimation){ //If fading animation enabled
this.currentopacity=0.1 //Starting opacity value
this.opacitytimer=setInterval("thumbnailviewer.opacityanimation()", 20)
}
},


loadimage:function(link){ //Load image function that gets attached to each link on the page with rel="thumbnail"
if (this.thumbBox.style.visibility=="visible") //if thumbox is visible on the page already
this.closeit() //Hide it first (not doing so causes triggers some positioning bug in Firefox
var imageHTML='<img src="'+link.getAttribute("href")+'" style="'+this.opacitystring+'" />' //Construct HTML for shown image
if (this.enableTitle && link.getAttribute("title")) //Use title attr of the link as description?
imageHTML+='<br />'+link.getAttribute("title")
this.centerDiv(this.thumbLoading) //Center and display "loading" div while we set up the image to be shown
this.thumbImage.innerHTML=imageHTML //Populate thumbImage div with shown image's HTML (while still hidden)
this.featureImage=this.thumbImage.getElementsByTagName("img")[0] //Reference shown image itself
this.featureImage.onload=function(){ //When target image has completely loaded
thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div
thumbnailviewer.showthumbBox() //Display "thumbbox" div to the world!
}
if (document.all && !window.createPopup) //Target IE5.0 browsers only. Address IE image cache not firing onload bug: panoramio.com/blog/onload-event/
this.featureImage.src=link.getAttribute("href")
this.featureImage.onerror=function(){ //If an error has occurred while loading the image to show
thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div, game over
}
},

setimgopacity:function(value){ //Sets the opacity of "thumbimage" div per the passed in value setting (0 to 1 and in between)
var targetobject=this.featureImage
if (targetobject.filters && targetobject.filters[0]){ //IE syntax
if (typeof targetobject.filters[0].opacity=="number") //IE6
targetobject.filters[0].opacity=value*100
else //IE 5.5
targetobject.style.filter="alpha(opacity="+value*100+")"
}
else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
targetobject.style.MozOpacity=value
else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
targetobject.style.opacity=value
else //Non of the above, stop opacity animation
this.stopanimation()
},

opacityanimation:function(){ //Gradually increase opacity function
this.setimgopacity(this.currentopacity)
this.currentopacity+=0.1
if (this.currentopacity>1)
this.stopanimation()
},

stopanimation:function(){
if (typeof this.opacitytimer!="undefined")
clearInterval(this.opacitytimer)
},


closeit:function(){ //Close "thumbbox" div function
this.stopanimation()
this.thumbBox.style.visibility="hidden"
this.thumbImage.innerHTML=""
this.thumbBox.style.left="-2000px"
this.thumbBox.style.top="-2000px"
},

cleanup:function(){ //Clean up routine on page unload
this.thumbLoading=null
if (this.featureImage) this.featureImage.onload=null
this.featureImage=null
this.thumbImage=null
for (var i=0; i<this.targetlinks.length; i++)
this.targetlinks[i].onclick=null
this.thumbBox=null
},

dotask:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
},

init:function(){ //Initialize thumbnail viewer script by scanning page and attaching appropriate function to links with rel="thumbnail"
if (!this.enableAnimation)
this.opacitystring=""
var pagelinks=document.getElementsByTagName("a")
for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP
if (pagelinks[i].getAttribute("rel") && pagelinks[i].getAttribute("rel")=="thumbnail"){ //Begin if statement
pagelinks[i].onclick=function(){
thumbnailviewer.stopanimation() //Stop any currently running fade animation on "thumbbox" div before proceeding
thumbnailviewer.loadimage(this) //Load image
return false
}
this.targetlinks[this.targetlinks.length]=pagelinks[i] //store reference to target link
} //end if statement
} //END FOR LOOP
//Reposition "thumbbox" div when page is resized
this.dotask(window, function(){if (thumbnailviewer.thumbBox.style.visibility=="visible") thumbnailviewer.centerDiv(thumbnailviewer.thumbBox)}, "resize")


} //END init() function

}

thumbnailviewer.createthumbBox() //Output HTML for the image thumbnail viewer
thumbnailviewer.dotask(window, function(){thumbnailviewer.init()}, "load") //Initialize script on page load
thumbnailviewer.dotask(window, function(){thumbnailviewer.cleanup()}, "unload")

Por gambito

3 de clabLevel



 

firefox
Citar            
MensajeEscrito el 05 Nov 2009 03:45 pm
lo tienes colgado en algun lado para poder ver el error en accion???

Por NeoCesar

Claber

1415 de clabLevel

14 tutoriales

Genero:Masculino  

Algun lugar dentro de la Matrix (Lima - Perú)

msie8
Citar            
MensajeEscrito el 05 Nov 2009 11:29 pm
no lo he subido aun por este problema, es algo que quiero implementar pero no lo puedo colgar porque queda realmente mal cuando aparece la ventanita. He estado investigando por internet pero todas las soluciones que encuentro no me sirven.
Realmente no se porque pasa esto pero bueno lo unico que se me ocurre es cambiar o mejor dicho correr la ventana hacia la derecha para que aparezca en un lugar donde no este ningun flash pero esto no es la mejor solucion porque no se si aparecera en el mismo lugar en todos los navegadores que existen.

Hagamos una cosa, yo subo una pagina en la que estoy probando esto por hoy vos entra y fijate. Yo la cambio despues de un rato, te doy hasta mañana para que la veas y te fijes.

Esta es la direccion http://www.manzanadelasluces.org.ar/exposiciones.html

muchas gracias por la ayuda

Por gambito

3 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.