posizionamento div

**pietro09** · 23-11-2006, 10:17

Non so se sbaglio il codice javascript o il css o tutti e due

e debbo anche aver fatto già la domanda :master: (proprio non la trovo) ma sono costretto a chiedere aiuto per questo problema:
Ho una tabella con due righe e una colonna.
La prima riga contiene un div_contenitore che contiene un TextBox, textbox_ricerca, ed un altro div, div_lista.

Sotto, il codice javascript tenta di posizionare il div_lista sotto il textbox_ricerca.
Ed è qui il problema, perchè proprio non mi riesce :master:

Grazie per qualunque aiuto

codice:

<body>
    <table id="table1" border="1" style="" >
        <tr>
            <td>
                <div id="div_contenitore">
                    <input name="textbox_ricerca" id="textbox_ricerca" autocomplete="off" style="border: 1px solid rgb(0, 102, 153); width: 250px; padding-left: 2px; padding-right: 2px;" type="text" />
                    <div id="div_lista" style="position: absolute;height: 200px; width: 250px; z-index: 999; left: 0px; top: 0px; border: 1px #006699 solid; background-color: White"></div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div style="width:300px; height:300px; border: 1px red solid; background-color:#FFFFD3"></div>
            </td>
        </tr>
    </table>

    <script type="text/javascript">
        var d = $('div_lista'); 
        var t = $('textbox_ricerca');
        d.style.left = ''.concat(t.offsetLeft, 'px');
        d.style.top = ''.concat(t.offsetTop + t.offsetHeight + 1, 'px');
    </script>    

</body>

**birbyna** · 23-11-2006, 18:40

Ciao, è la prima volta che rispondo ad un post sul forum quindi spero di esserti d'aiuto.
Innanzi tutto l'errore sul codice che hai postato è evidenziato alla riga 19 in quanto non è quello il modo di referenziarsi ad un oggetto del document attraverso l'id.
Ora ti posto il programma "corretto" in base all'interpretazione che io ho dato al tuo problema:

-------------------------------------------------------------------------------------

<body>
<table id="table1" border="1" style="" >
<tr>
<td>
<div id="div_contenitore">
<input name="textbox_ricerca" id="textbox_ricerca" autocomplete="off" style="border: 1px solid rgb(0, 102, 153); width: 250px; padding-left: 2px; padding-right: 2px;" type="text" />
<div id="div_lista" style="position: absolute;height: 200px; width: 250px; z-index: 999; left: 0px; top: 0px; border: 1px #006699 solid; background-color: White"></div>
</div>
</td>
</tr>
<tr>
<td>
<div style="width:300px; height:300px; border: 1px red solid; background-color:#FFFFD3"></div>
</td>
</tr>
</table>

<script type="text/javascript">
var d = document.getElementById('div_lista');
alert(d.style.position)
var t = document.getElementById('textbox_ricerca');
d.style.position='relative';
alert(d.style.position);
</script>

</body>
-------------------------------------------------------------------------------------

Come potrai notare ti ho inserito due alert, che evidenziano come sia stata cambiata la proprietà position nello style del div puntato.

Spero di esserti stata di aiuto!!!

Ciao Ciao

**pietro09** · 23-11-2006, 20:15

Purtroppo non funziona esattamente come vorrei, ma il tuo suggerimento mi è stato davvero utile perchè mi ha fatto riflettere.

Allora, come mi hai suggerito tu, funziona, ma l'altezza della cella di allarga per comprendere il div_lista; mentre il div_lista dovrebbe andare sopra la cella ch'è sotto.

Allora ho messo l'attributo position:relative al div_contenitore e, al div_lista ho aggiunto padding-left: 2px; padding-right: 2px; uguale al textbox_ricerca

adesso funziona bene con IE7, Firefox2, Opera9

ps. sotto al div_lista ho messo un bel iframe, così funziona pure con IE6 e con IE7 se sotto c'è un activeX.

Ciao e ancora grazie

Discussione: posizionamento div

Strumenti discussione

Ricerca discussione

Visualizza

posizionamento div

Permessi di invio