Foros del Web » Creando para Internet » CSS »

Ocultar un select tras un DIV

Estas en el tema de Ocultar un select tras un DIV en el foro de CSS en Foros del Web. Hola a todos. Tengo un DIV que en cierto momento cubre un SELECT. el DIV tiene posicionamiento absoluto y el SELECT está en flow. Pero ...
  #1 (permalink)  
Antiguo 14/02/2006, 14:15
Avatar de rodri  
Fecha de Ingreso: febrero-2005
Mensajes: 406
Antigüedad: 12 años, 9 meses
Puntos: 2
Ocultar un select tras un DIV

Hola a todos.

Tengo un DIV que en cierto momento cubre un SELECT.

el DIV tiene posicionamiento absoluto y el SELECT está en flow. Pero al querer cubrirse dicho select, no se puede .

Código:
<div>
    <div style=" z-index:10; background-color:Maroon; color:Aqua; width:100px; height:30px; position:absolute;" > este es el DIV que se deberia cubrir el select</div>
    <br />
    <select> 
    <option>primero </option>
    <option>Segundo</option>
    <option>Tercero </option>
    </select>

¿Como hago para que el DIV cubra al select?

gracias
__________________
0.o Rodri
  #2 (permalink)  
Antiguo 14/02/2006, 14:31
Avatar de rodri  
Fecha de Ingreso: febrero-2005
Mensajes: 406
Antigüedad: 12 años, 9 meses
Puntos: 2
Navegando por el foro encontré esta deirección:

http://www.aplus.co.yu/wch/intro/

en la que se explica cómo ocultar un select tras un div, al parecer es creando un iframe alrededor del elemento que se quiere ocultar.

¿Pero... es tan complicado hacer esto?, es decir, no hay un par en CSS que nos resuelva esto?
__________________
0.o Rodri
  #3 (permalink)  
Antiguo 15/02/2006, 01:43
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
Hola rodri

Me temo que es así de complicado De hecho hasta hace poco cuando alguien hacía esta pregunta en el foro (y se ha preguntado muchas veces) la respuesta solía ser "No se puede hacer nada"

Saludos,
  #4 (permalink)  
Antiguo 15/02/2006, 01:54
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Hola:

¿Y no sería más fácil ocultar el select...?

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 15/02/2006, 07:40
Avatar de rodri  
Fecha de Ingreso: febrero-2005
Mensajes: 406
Antigüedad: 12 años, 9 meses
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
  #6 (permalink)  
Antiguo 15/02/2006, 07:41
Avatar de rodri  
Fecha de Ingreso: febrero-2005
Mensajes: 406
Antigüedad: 12 años, 9 meses
Puntos: 2
Esta es la continuación.
Código:
    
function slideLeftPanel(slideSpeed){
        slideInProgress =true;
        var scrollValue = 0;
        if(panelPosition==1)
            var leftPos = 
slideLeftPanelObj.style.top.replace(/[^0-9\-]/g,'')/1;
        else
            var leftPos = 
slideLeftPanelObj.style.left.replace(/[^0-9\-]/g,'')/1;
           
        leftPos+=slideSpeed;
        okToSlide = true;
        if(slideSpeed<0){
            if(leftPos < ((panelWidth*-1) + startScrollPos)){
                leftPos = (panelWidth*-1) + startScrollPos;   
                okToSlide=false;
            }
        }
        if(slideSpeed>0){
            if(leftPos > (0 + startScrollPos)){
                leftPos = 0 + startScrollPos;
                okToSlide = false;
            }           
        }
       
       
        if(panelPosition==0){
            slideLeftPanelObj.style.left = leftPos + startScrollPos + 
'px';
            if(pushMainContentOnSlide)document.body.style.marginLeft = 
leftPos - startScrollPos + panelWidth + 'px';
        }else{
            slideLeftPanelObj.style.top = leftPos + 'px';
            if(pushMainContentOnSlide)document.body.style.marginTop = 
leftPos - startScrollPos + panelWidth + 'px';           
           
        }
        if(okToSlide)setTimeout('slideLeftPanel(' + slideSpeed + 
')',slideTimer); else {
            slideInProgress = false;
            if(slideSpeed>0)panelVisible=true; else panelVisible = 
false;
        }
       
    }


    function repositionHelpDiv()
    {
        if(panelPosition==0){
            var maxValue = 
Math.max(document.body.scrollTop,document.documentElement.scrollTop);
            slideLeftPanelObj.style.top = maxValue;
        }else{
            var maxValue = 
Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
            slideLeftPanelObj.style.left = maxValue;   
            var maxTop = 
Math.max(document.body.scrollTop,document.documentElement.scrollTop);
            if(!slideInProgress)slideLeftPanelObj.style.top = (maxTop - 
(panelVisible?0:panelWidth)) + 'px';        
        }
    }
   
    function cancelEvent()
    {
        return false;
    }
    function keyboardShowLeftPanel()
    {
            initSlideLeftPanel();
            return false;   
   
    }
   
    function leftPanelKeyboardEvent(e)
    {
        if(document.all)return;   
       
        if(e.keyCode==63236){
            initSlideLeftPanel();
            return false;
        }
        if(navigator.userAgent.indexOf('Safari')>=0)return;
        if(e.keyCode==112){
            initSlideLeftPanel();
            return false;
        }       
    }
   
    function setLeftPanelContent(text)
    {
        document.getElementById('leftPanelContent').innerHTML = text;
        initSlideLeftPanel(true);
       
    }
    if(!document.all)document.documentElement.onkeypress = 
leftPanelKeyboardEvent;
    document.documentElement.onhelp  = keyboardShowLeftPanel;

    </script>
</head>


<body>
<!-- Code for the left panel -->
<div id="dhtmlgoodies_leftPanel">
    <iframe 
style="width:100%;height:150px;top:0px;left:0px;z-index:1;position:absolute;background-color:#FFFFFF" 
frameborder="0"></iframe>
    <div id="dhtmlgoodies_leftPanel_inner">
    <a class="closeLink" href="#" onclick="initSlideLeftPanel();return 
false">Close</a>
    <div id="leftPanelContent">
    <!-- This is the content -->
    <div>
        <p>This is how you do this:</p>
        <ul>
            <li>Click on key A</li>
            <li>Open the bla bla window</li>
            <li>Enter your name in the first text box</li>
            <li>Save your changes</li>
        </ul>
    </div>
    <!-- End content -->
    </div>
    </div>
   
</div>
<!-- End code for the left panel -->
<div id="mainContent">
    <select><option>test</option></select>
   
    <img src="/images/heading3_cropped.gif">
    <h2><a href="#" onclick="initSlideLeftPanel();return false">Show 
help panel(F1)</a></h2>
    <p>    Splendida porro oculi fugitant vitantque tueri. sol etiam 
caecat, contra si tendere pergas,propterea quia vis magnast ipsius et 
alteaëra per purum simulacra ferunturet feriunt oculos turbantia 
composituras. Praeterea splendor qui cumque est acer adurit saepe 
oculos 
ideo quod semina possidet ignismulta, dolorem oculis quae gignunt 
insinuando.lurida praeterea fiunt quae cumque tuenturarquati, quia 
luroris de corpore eorumsemina multa fluunt simulacris obvia rerum, 
multaque sunt oculis in eorum denique mixta,quae contage sua palloribus 
omnia pingunt. </p>
        <p><div 
style="float:right;padding:5px;padding-right:0px;width:200px;border:1px 
dotted #317082;background-color:#E2EBED">
        Click on the "Show help panel" link or press the F1 key</div>
        E tenebris autem quae sunt in luce tuemurpropterea quia, cum 
propior caliginis aërater init oculos prior et possedit apertos, 
insequitur candens confestim lucidus aër,qui quasi purgat eos ac nigras 
discutit umbrasaëris illius; nam multis partibus hic estmobilior 
multisque minutior et mage pollens.qui simul atque vias oculorum luce 
replevit atque pate fecit, quas ante obsederat aër<ater>, continuo 
rerum 
simulacra secuntur, quae sita sunt in luce, lacessuntque ut videamus. 
quod contra facere in tenebris e luce nequimuspropterea quia posterior 
caliginis aër crassior insequitur, qui cuncta foramina 
completobsiditque 
vias oculorum, ne simulacrapossint ullarum rerum coniecta moveri. 
Quadratasque procul turris cum cernimus urbis,propterea fit uti 
videantur saepe rutundae, angulus optusus quia longe cernitur omnissive 
etiam potius non cernitur ac perit eiusplaga nec ad nostras acies 
perlabitur ictus,aëra per multum quia dum simulacra feruntur,cogit 
hebescere eum crebris offensibus aër. hoc ubi suffugit sensum simul 
angulus omnis.fit quasi ut ad turnum saxorum structa tuantur;non tamen 
ut coram quae sunt vereque rutunda,sed quasi adumbratim paulum simulata 
videntur. </p>
        <p>Umbra videtur item nobis in sole moveri et vestigia nostra 
sequi gestumque. </P>    <p><div 
style="float:right;padding:5px;padding-right:0px;width:200px;border:1px 
dotted #317082;background-color:#E2EBED">
        Click on the Show help panel or the F1 key to try this</div>
        E tenebris autem quae sunt in luce tuemurpropterea quia, cum 
propior caliginis aërater init oculos prior et possedit apertos, 
insequitur candens confestim lucidus aër,qui quasi purgat eos ac nigras 
discutit umbrasaëris illius; nam multis partibus hic estmobilior 
multisque minutior et mage pollens.qui simul atque vias oculorum luce 
replevit atque pate fecit, quas ante obsederat aër<ater>, continuo 
rerum 
simulacra secuntur, quae sita sunt in luce, lacessuntque ut videamus. 
quod contra facere in tenebris e luce nequimuspropterea quia posterior 
caliginis aër crassior insequitur, qui cuncta foramina 
completobsiditque 
vias oculorum, ne simulacrapossint ullarum rerum coniecta moveri. 
Quadratasque procul turris cum cernimus urbis,propterea fit uti 
videantur saepe rutundae, angulus optusus quia longe cernitur omnissive 
etiam potius non cernitur ac perit eiusplaga nec ad nostras acies 
perlabitur ictus,aëra per multum quia dum simulacra feruntur,cogit 
hebescere eum crebris offensibus aër. hoc ubi suffugit sensum simul 
angulus omnis.fit quasi ut ad turnum saxorum structa tuantur;non tamen 
ut coram quae sunt vereque rutunda,sed quasi adumbratim paulum simulata 
videntur. </p>
        <p>Umbra videtur item nobis in sole moveri et vestigia nostra 
sequi gestumque. </P>
        <p><a href="#" onclick="setLeftPanelContent('THis is the <b>new 
content</b>');return false">Dynamic change content</a>
   
</div>

</body>
</html>
Muchas gracias por los aportes

saludos
__________________
0.o Rodri
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 16:53.