![Antiguo](http://static.forosdelweb.com/fdwtheme/images/statusicon/post_old.gif)
15/02/2006, 07:40
|
![Avatar de rodri](http://static.forosdelweb.com/customavatars/avatar90838_1.gif) | | | Fecha de Ingreso: febrero-2005
Mensajes: 406
Antigüedad: 20 años Puntos: 2 | |
obtuve una respuesta de Alf Magne Kalleland - www.dhtmlgoodies.com
me dijo lo siguiente: Cita: Select boxes always appear on top of other elements
such as <div> in Internet Explorer. Iframe is known as a "windowed
element", while <div> and almost all other html tags are "windowless
elements". A windowed element will always appear on top of a windowless
element. y me dió el código de un ejemplo en el que se utiliza un iframe y un select. este ejemplo es el modificado que se puede encontrar en: http://www.dhtmlgoodies.com/scripts/...e-in-pane.html
Este es el ejemplo Modificado:
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Slide in pane</title>
<style type="text/css">
/* START CSS only needed for this demo page */
body{ /* Styling the body element */
font-family: Trebuchet MS, Lucida Sans Unicode, Arial,
sans-serif;
margin:0px;
padding:0px;
height:100%;
font-size:0.9em;
line-height:130%;
background-color:#E2EBED;
}
a{
color:#D60808;
text-decoration:none;
}
a:hover{
text-decoration:underlin;
}
#dhtmlgoodies_leftPanel ul{
padding-left:20px;
margin-left:0px;
}
#dhtmlgoodies_leftPanel div{
padding:3px;
}
#mainContent{
width:460px;
background-color:#FFF;
padding-right:5px;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
padding-left:5px;
}
/* END CSS ONLY NEEDED FOR THIS DEMO PAGE */
#dhtmlgoodies_leftPanel{ /* Styling the help panel */
background-color:#3c94c8; /* Blue background color */
color:#FFF; /* White text color */
font-family: Trebuchet MS, Lucida Sans Unicode, Arial,
sans-serif; /* Which font to use */
/* You shouldn't change these 5 options unless you need to */
height:100%;
left:0px;
z-index:10;
position:absolute;
display:none;
overflow:hidden;
}
#dhtmlgoodies_leftPanel_inner{
position:relative;
width:100%;
height:100%;
top:0px;
left:0px;
background-color:#3c94c8;
z-index:20;
}
#dhtmlgoodies_leftPanel iframe{
position:absolute;
background-color:#3c94c8; /* Blue background color */
z-index:2;
}
#dhtmlgoodies_leftPanel #leftPanelContent{
padding:0px;
}
#dhtmlgoodies_leftPanel .closeLink{ /* Layout of close link */
padding-left:2px;
padding-right:2px;
background-color:#FFF;
position:absolute;
top:2px;
right:2px;
border:1px solid #000;
color:#000;
font-size:0.8em;
}
#dhtmlgoodies_leftPanel .closeLink:hover{ /* Close link text -
mouseover effect*/
color:#FFF;
background-color:#000;
}
</style>
<script type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, October 2005
Version 1.2: Updated, November 12th. 2005
This is a script from www.dhtmlgoodies.com. You will find this and
a
lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is
kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var panelWidth = 150; // Width of help panel
var slideSpeed = 15; // Higher = quicker slide
var slideTimer = 10; // Lower = quicker slide
var slideActive = true; // Slide active ?
var initBodyMargin = 0; // Left or top margin of your <body> tag
(left if panel is at the left, top if panel is on the top)
var pushMainContentOnSlide = false; // Push your main content to
the right when sliding
var panelPosition = 1; // 0 = left , 1 = top
/* Don't change these values */
var slideLeftPanelObj=false;
var slideInProgress = false;
var startScrollPos = false;
var panelVisible = false;
function initSlideLeftPanel(expandOnly)
{
if(slideInProgress)return;
if(!slideLeftPanelObj){
if(document.getElementById('dhtmlgoodies_leftPanel')){
//
Object exists in HTML code?
slideLeftPanelObj =
document.getElementById('dhtmlgoodies_leftPanel');
if(panelPosition == 1)slideLeftPanelObj.style.width =
'100%';
}else{ // Object doesn't exist -> Create <div>
dynamically
slideLeftPanelObj = document.createElement('DIV');
slideLeftPanelObj.id = 'dhtmlgoodies_leftPanel';
slideLeftPanelObj.style.display='none';
document.body.appendChild(slideLeftPanelObj);
}
if(panelPosition == 1){
slideLeftPanelObj.style.top = "-" + panelWidth + 'px';
slideLeftPanelObj.style.left = '0px';
slideLeftPanelObj.style.height = panelWidth + 'px';
}else{
slideLeftPanelObj.style.left = "-" + panelWidth + 'px';
slideLeftPanelObj.style.top = '0px';
slideLeftPanelObj.style.width = panelWidth + 'px';
}
if(!document.all ||
navigator.userAgent.indexOf('Opera')>=0)slideLeftPanelObj.style.position
= 'fixed';;
}
if(panelPosition == 0){
if(document.documentElement.clientHeight){
slideLeftPanelObj.style.height =
document.documentElement.clientHeight + 'px';
}else if(document.body.clientHeight){
slideLeftPanelObj.style.height =
document.body.clientHeight + 'px';
}
var leftPos =
slideLeftPanelObj.style.left.replace(/[^0-9\-]/g,'')/1;
}else{
if(document.documentElement.clientWidth){
slideLeftPanelObj.style.width =
document.documentElement.clientWidth + 'px';
}else if(document.body.clientHeight){
slideLeftPanelObj.style.width =
document.body.clientWidth + 'px';
}
var leftPos =
slideLeftPanelObj.style.top.replace(/[^0-9\-]/g,'')/1;
}
slideLeftPanelObj.style.display='block';
if(panelPosition==1)
startScrollPos =
Math.max(document.body.scrollTop,document.documentElement.scrollTop);
else
startScrollPos =
Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
if(leftPos<(0+startScrollPos)){
if(slideActive){
slideLeftPanel(slideSpeed);
}else{
document.body.style.marginLeft = panelWidth + 'px';
slideLeftPanelObj.style.left = '0px';
}
}else{
if(expandOnly)return;
if(slideActive){
slideLeftPanel(slideSpeed*-1);
}else{
if(panelPosition == 0){
if(pushMainContentOnSlide)document.body.style.marginLeft =
initBodyMargin + 'px';
slideLeftPanelObj.style.left = (panelWidth*-1) +
'px';
}else{
if(pushMainContentOnSlide)document.body.style.marginTop =
initBodyMargin + 'px';
slideLeftPanelObj.style.top = (panelWidth*-1) +
'px';
}
}
}
if(navigator.userAgent.indexOf('MSIE')>=0 &&
navigator.userAgent.indexOf('Opera')<0){
window.onscroll = repositionHelpDiv;
repositionHelpDiv();
}
window.onresize = resizeLeftPanel;
}
function resizeLeftPanel()
{
if(panelPosition == 0){
if(document.documentElement.clientHeight){
slideLeftPanelObj.style.height =
document.documentElement.clientHeight + 'px';
}else if(document.body.clientHeight){
slideLeftPanelObj.style.height =
document.body.clientHeight + 'px';
}
}else{
if(document.documentElement.clientWidth){
slideLeftPanelObj.style.width =
document.documentElement.clientWidth + 'px';
}else if(document.body.clientWidth){
slideLeftPanelObj.style.width =
document.body.clientWidth + 'px';
}
}
}
__________________ 0.o Rodri |