Tabel binnen een DIV overlapt een link binnen een andere DIV

[Verwijderd]

Ik heb een aantal verschillende <DIV> attributen gevuld met content die ik afzonderlijk van elkaar actief maak door middel van tab-bladen.

Het probleem is dat de tabel in de ene div over een link in de andere div valt zodat deze niet meer aanklikbaar is.

Is dit een bekend probleem bij iemand? Oplossingen?

Hieronder staan 2 div'jes uit de code als voorbeeld.

code:

<div ID="Sub configuration" style="visibility:hidden;position:absolute;left:15"><div style='height:25'></div>
    <div class='border'>
    <table><th>name</th><th>type</th><th>value</th><th>ttl</th>
    <tr>
        <td>stats.asphost01</td>
        <td>A</td><td>213.19.146.37</td>
        <td><a href='index.php?fuseaction=services.edit_service_configuration_sub&service_id=38&service_sub_id=278&table_name=dns_domain_sub'>[img]'images/edit.gif'[/img]</a></td>
        <td><a href='index.php?fuseaction=services.delete_service_sub&service_id=38&service_sub_id=278&table_name=dns_domain_sub' onclick='return confirm("Are you sure you want to delete this entry?")'>[img]'images/delete.gif'[/img]</a></td>
    </tr>
    <tr>
        <td>asphost02</td>
        <td>A</td>
        <td>213.19.146.38</td>
        <td><a href='index.php?fuseaction=services.edit_service_configuration_sub&service_id=38&service_sub_id=277&table_name=dns_domain_sub'>[img]'images/edit.gif'[/img]</a></td>
        <td><a href='index.php?fuseaction=services.delete_service_sub&service_id=38&service_sub_id=277&table_name=dns_domain_sub' onclick='return confirm("Are you sure you want to delete this entry?")'>[img]'images/delete.gif'[/img]</a></td>
    </tr>
    </table>
    <button onclick='location.href="index.php?fuseaction=services.add_service_sub&table_name=dns_domain_sub&service_id=38"'>Add subitem</button>
    <BR>
    </div>
</div>

<SCRIPT language=JavaScript src='./js/general.js' type=text/javascript></SCRIPT>

<form action='index.php' name='edit_service_configuration' onsubmit='return check_service_form(this);'>
<input type='hidden' name='fuseaction' value='services.save_service_configuration'>
<input type='hidden' name='table_name' value=dns_domain>

<div ID="General configuration" style="visibility:hidden;position:absolute;left:15">
    <div style='height:25'></div>
    <div class='border'>
        <table>
        <tr><td>service_id: </td><td><input type='text' name=service_id value=38 readonly></td></tr>
        <tr><td>name: </td><td><input type='text' name='service_name' value='test domein'></td></tr>
        <tr><td>Organisation: </td><td><select name='organisation_id'><option value=2 SELECTED>Postcode Loterij<option value=61>Mulitkabel<option value=1>ZX factory</td></tr></select>
        <tr><td>Category: </td><td><select name='service_category_id'><option value=1 SELECTED>DNS domains<option value=20>Apache configuration<option value=12>test</td></tr></select>
        <tr><td>Server: </td><td><select name='server_id'><option value=4 SELECTED>192.168.1.5<option value=3>192.168.1.1<option value=81>192.168.1.6</td></tr></select><input type='hidden' name=service_id value=38>
        <tr><td>name: </td><td><input type='text' name=name value='zx.nl'></td></tr>
        <tr><td>soa_minimum: </td><td><input type='text' name=soa_minimum value='5H'></td></tr>
        <tr><td>soa_refresh: </td><td><input type='text' name=soa_refresh value='4H'></td></tr>
        <tr><td>soa_retry: </td><td><input type='text' name=soa_retry value='30M'></td></tr>
        <tr><td>soa_expire: </td><td><input type='text' name=soa_expire value='8W'></td></tr>
        <tr><td>nameserver: </td><td><input type='text' name=nameserver value='ns1.bos.nl'></td></tr>
        <tr><td>soa_mailaddr: </td><td><input type='text' name=soa_mailaddr value='postmaster.bos.nl'></td></tr>
        <tr><td>soa_serial: </td><td><input type='text' name=soa_serial value='2006042001'></td></tr>
        </table>
    </div><br><input type='submit' class='button' name='submit' value='save'>
    </form><br>
</div>

[JHS]

Zorg ervoor dat de div elementen (niet attributen) niet over elkaar heen vallen met behulp van positioning, of margin . Of zorg ervoor dat de een division boven de andere zit met behulp van z-index? Iniedergeval ga ik niet al jouw code doorspitten om mij een voorstelling te vormen van het probleem, en vervolgens een oplossing te bedenken . Ik denk dat je meer antwoorden krijgt als je je code reduceert tot alleen de code relevant voor jouw probleem .

[Verwijderd]

Ik heb de code al enorm gereduceerd, ik heb nog maar 2 div'jes overgelaten met weinig inhoud, 1 div met een tabel en 1 div met links (die dus niet aanklikbaar zijn als de tabel er over heen valt in de andere div)

Z-index op de div'jes werkt ook niet, Het probleem is denk ik niet dat de ene div niet over de andere valt, maar de inhoud van de div..

Trouwens de divjes moeten wel over elkaar heen vallen, want het zijn tabbladen, en het kunnen er best veel worden.

[ Voor 21% gewijzigd door Verwijderd op 04-05-2006 10:30 ]

[JHS]

Dat valt redelijk makkelijk uit te testen door overflow: hidden; mee te geven, volgens mij . Dan zal je toch echt iets met z-index moeten doen, vermoed ik.

[ Voor 29% gewijzigd door JHS op 04-05-2006 10:32 ]

[Verwijderd]

Het was toch de z-index idd, bedankt.

Ik was er van uitgegaan dat dat er niks mee te maken had omdat het om de inhoud van de div, namelijk de table ging.

maar goed, het werkt nu

[Verwijderd]

Hmm, dit helpt nog niet, want de ene link uit het ene tabblad (div) heeft dan een hogere z-index dan de andere waardoor de andere niet meer aanklikbaar is... Iemand een oplossing?

[JHS]

Je zegt tegelijkertijd te willen dat het ene tabblad boven de andere valt, en dat beide aanklikbaar moeten zijn . Dat werkt natuurlijk niet . Ik zou met behulp van wat javascript de z-index veranderen als je op de header van het tabblad klikt .

[Verwijderd]

niet beide moeten aanklikbaar zijn, maar alleen de inhoud (links) van het tabblad dat actief is..

maar ik zal eens proberen wat je zegt over de z-index veranderen

[ Voor 8% gewijzigd door Verwijderd op 04-05-2006 11:52 ]

[crisp]

niet-actieve 'tabbladen' ipv visibility:hidden op display:none zetten