Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2002
    Location
    Alcoy (Spain)
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer draw layers depending on resolution??

    Well i've drawn some layers in a webpage, the layers are hidden and appear depending on the value of a Select object, i've got the target of getting them appear or disappear depending on this value. The problem is that i'm working over a table with a determinate background color the fills a percentage of the page, so its size it is not the same for different resolutions.

    When i adjust the layer for a specific resolution (Ex: 800x600) it is not centered for 1024x768, and the same happens with 800 when i adjust the layers for 1024.

    I would like to know if there is a way to change the top, left property of the <div> tag in order to make them appear in one position if i use 800x600 or in another if i use 1024x768.

    I don't know if it is using the position:[absolute/relative] property or doing any other thing. Thank You

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    TEXAS . . . 'nuf said
    Posts
    468
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I know some others here can just whip this off the top of their head, but I need some sample code with which to work. I'd give it a crack, but I need to see your source code. Have a link handy?
    Gordo
    "In the End, we will remember not the words of our enemies, but the silence of our friends."
    - Martin Luther King Jr. (1929-1968)

  • #3
    New Coder
    Join Date
    Jul 2002
    Location
    Alcoy (Spain)
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts

    This is the code

    Sorry if it is a bit long



    <html>
    <head>
    <script language="JavaScript" type="text/JavaScript">
    <!--

    function muestra()
    {
    switch (form1.elige.value)
    {
    case "todos":
    ltodos.style.visibility = "visible";
    ladmin.style.visibility = "hidden";
    lprofes.style.visibility = "hidden";
    lalumnos.style.visibility = "hidden";
    break;
    case "admin":
    ltodos.style.visibility = "hidden";
    ladmin.style.visibility = "visible";
    lprofes.style.visibility = "hidden";
    lalumnos.style.visibility = "hidden";
    break;
    case "profes":
    ltodos.style.visibility = "hidden";
    ladmin.style.visibility = "hidden";
    lprofes.style.visibility = "visible";
    lalumnos.style.visibility = "hidden";
    break;
    case "alumnos":
    ltodos.style.visibility = "hidden";
    ladmin.style.visibility = "hidden";
    lprofes.style.visibility = "hidden";
    lalumnos.style.visibility = "visible";
    break;
    }
    }
    //-->
    </script>
    </head>

    <body>

    <form name="form1" method="post" action="">
    <table width="85%" border="0" align="center">
    <tr>
    <td class="claro"> <div align="center">Dirigido a
    <select name="elige" onChange="muestra()">
    <option value="todos">Todos...</option>
    <option value="admin">Administradores</option>
    <option value="profes">Profesores</option>
    <option value="alumnos">Alumnos</option>
    <option value="pcurso">Profesores de un curso</option>
    <option value="acurso">Alumnos de un curso</option>
    </select>
    </div></td>
    </tr>
    <tr>
    <td class="claro"> <div id="ltodos" style="position:absolute; width:240px; height:200px; z-index:1; left: 321px; top: 256px; visibility: visible; background-color: #EBEBEB; layer-background-color: #EBEBEB; border: 1px none #000000;">
    <div align="center">
    <p>&nbsp;</p>
    <p>
    <select name="select" size="10">
    <option value="todos"> Todos los usarios del sistema</option>
    <option value="admin"> Todos los administradores </option>
    <option value="profes"> Todos los profesores </option>
    <option value="alumnos"> Todos los alumnos </option>
    </select>
    </p>
    </div>
    </div>
    <div id="ladmin" style="position:absolute; width:240px; height:200px; z-index:1; left: 321px; top: 256px; visibility: hidden; background-color: #EBEBEB; layer-background-color: #EBEBEB; border: 1px none #000000;">
    <div align="center">
    <p>&nbsp;</p>
    <p>
    <select name="select" size="10" multiple>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>
    </p>
    </div>
    </div>

    <div id="lprofes" style="position:absolute; width:240px; height:200px; z-index:1; left: 321px; top: 256px; visibility: hidden; background-color: #EBEBEB; layer-background-color: #EBEBEB; border: 1px none #000000;">
    <div align="center">
    <p>&nbsp;</p>
    <p>
    <select name="select" size="10" multiple>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>
    </p>
    </div>
    </div>
    <div id="lalumnos" style="position:absolute; width:240px; height:200px; z-index:1; left: 321px; top: 256px; visibility: hidden; background-color: #EBEBEB; layer-background-color: #EBEBEB; border: 1px none #000000;">
    <div align="center">
    <p>&nbsp;</p>
    <p>
    <select name="select[]" size="10" multiple>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>
    </p>
    </div>
    </div>
    <p>&nbsp;</p>
    <p>&nbsp;</p>

    <p>&nbsp;</p>
    <p>&nbsp;</p>

    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p></td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td><div align="center">
    <table width="75%" height="40" border="0" align="center" cellpadding="3" cellspacing="1">
    <tr>
    <td height="40" class="oscuro">
    <div align="left"><font color="#FFFFFF" size="+1"><u>T&iacute;tulo
    del mensaje </u></font></div></td>
    </tr>
    </table>
    </div></td>
    </tr>
    <tr>
    <td><div align="center">
    <table width="75%" border="0" align="center" cellpadding="3" cellspacing="1">
    <tr>
    <td class="claro">
    <div align="center">
    <input name="titulo" type="text" id="titulo" size="50" maxlength="255">
    </div></td>
    </tr>
    </table>
    </div></td>
    </tr>
    <tr>
    <td><div align="center">
    <table width="75%" border="0" align="center" cellpadding="3" cellspacing="1">
    <tr>
    <td height="40" class="oscuro">
    <div align="left"><font color="#FFFFFF" size="+1"><u>Cuerpo del mensaje</u></font></div></td>
    </tr>
    </table>
    </div></td>
    </tr>
    <tr>
    <td><div align="center">
    <table width="75%" border="0" align="center" cellpadding="3" cellspacing="1">
    <tr>
    <td class="claro">
    <div align="center"><br>
    <textarea name="mensaje" cols="50" rows="15" id="mensaje"></textarea>
    <br>
    <br>
    </div></td>
    </tr>
    </table>
    </div></td>
    </tr>
    </table>
    <div align="center">
    <p><input type="submit" name="Submit" value=" Escribir Mensaje ">
    </p></div>
    </form>
    </body>
    </html>


  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    TEXAS . . . 'nuf said
    Posts
    468
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, this may be a crude way of doing it -- or not -- but I think it'll work.

    See newmate's reply on THIS thread.

    I've attached a TXT file where I added the script code and changed some of the positioning values, etc. Play around with it and I think you'll get your desired result.
    Attached Files Attached Files
    Gordo
    "In the End, we will remember not the words of our enemies, but the silence of our friends."
    - Martin Luther King Jr. (1929-1968)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •