[CSS] z-index in div - Softwareontwikkeling

vrijdag 16 mei 2003 10:00

Acties:

Vrolijkheid alom!

Topicstarter

Na de replies op een post van mij gisteren, is alles heel snel gegaan met de bouw van m'n navigatiemenu. Het ziet er allemaal mooi uit en werkt naar behoren. Toch blijf ik maar met 1 probleempje zitten. Onderaan m'n post staat een gedeelte code om te testen, waaruit mensen misschien kunnen afleiden waar de fout zit.

Het is een navigatiemenu met uitklapmogelijkheid voor 1 niveau. Als ik met de muis over '1' ga, krijg ik in een uitklap '1.1' en '1.2' te zien. Deze uitklap staat ten opzichte van '1' zelf, iets naar binnen geschoven, zoals dat bij veel menu's gebeurd. Het probleem hierbij is, dat de items achter item '2' verdwijnen.

Ik heb daarvoor een z-index ingesteld bij zowel de div als de a href (ja, ik was wanhopig) en hiermee geëxperimenteerd. Het mocht niet baten, de uitklap blijft altijd verdwijnen. Hoog / laag en omgekeerd heeft geen effect. Mis ik ergens een eigenschap?

Sorry voor de lange code, maar dit is het minimum om te zien wat ik bedoel

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
    <title>Menu Test</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    
    <script language="javascript">
        function ShowMenu(Item)
        {
            document.getElementById(Item).style.visibility = 'Visible';
        }
            
        function HideAction(Item)
        {
            document.getElementById(Item).style.visibility = 'Hidden';
        }
        
    </script>
    
</head>
<body>
<!-- Item open -->
<table border='0' cellpadding='0' cellspacing='0' width='150'>
    <tr>
        <td>
            <div style="position: relative; z-index: 5;" onmouseover="ShowMenu('1')" onmouseout="HideAction('1');">
            <a href='navigatie.php?var=1' class='navigatie0'
                style="display: block; width: 100%; z-index: 5";>
            1
            </a>

<!-- Sub  open -->
                <div id='1' style="position: absolute; top: 5px; left: 130px; visibility: hidden; z-index: 10;">
                    <table border='0' cellpadding='0' cellspacing='0' width='150'>
<!-- Sub -->
                        <tr>
                            <td>
                                <a href='navigatie.php?var=1.1' class='navigatie1'
                                    style="display: block; width: 100%; z-index: 10";>
                                1.1
                                </a>
                            </td>
                        </tr>
<!-- Sub -->
                        <tr>
                            <td>
                                <a href='navigatie4.php?var=1.2' class='navigatie1' 
                                    style="display: block; width: 100%; z-index: 10";>
                                1.2
                                </a>
                            </td>
                        </tr>
<!-- Sub  sluit -->
                    </table>
                </div>
<!-- Item sluit -->
            </div>
        </td>
    </tr>
</table>
<!-- Item open -->
<table border='0' cellpadding='0' cellspacing='0' width='150'>
    <tr>
        <td>
            <div style="position: relative; z-index: 5;" onmouseover="ShowMenu('1')" onmouseout="HideAction('1');">
            <a href='navigatie.php?var=1' class='navigatie0' 
                style="display: block; width: 100%; z-index: 5";>
            2
            </a>
<!-- Item sluit -->
            </div>
        </td>
    </tr>
</table>
</body>
</html>

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

vrijdag 16 mei 2003 10:06

Acties:

crisp

Devver

Pixelated

je stylesheet erbij zou ook handig zijn

Intentionally left blank

vrijdag 16 mei 2003 10:07

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

oh hehe sorry

...ik had 'm nog wel klaargezet

Cascading Stylesheet:

.navigatie0{
font-family: arial, verdana, sans-serif;
font-weight: bold;
font-size: 100%;
line-height: 130%;
color: #ffffff;
background-color: #555555;
text-decoration: none;
}
a.navigatie0:hover{
    color: #337788;
    background-color: #cccccc;
}

.navigatie1{
font-family: arial, verdana, sans-serif;
font-weight: bold;
font-size: 100%;
line-height: 130%;
color: #ffffff;
background-color: #666666;
text-decoration: none;
}
a.navigatie1:hover{
    color: #337788;
    background-color: #cccccc;
}

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

vrijdag 16 mei 2003 10:25

Acties:

crisp

Devver

Pixelated

vaag, ik zie zo 1-2-3 geen fouten. Mozilla doet het ook prima...

Intentionally left blank

vrijdag 16 mei 2003 10:28

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Nee he.. niet weer dat hele browser-compatibiliteits-gebeuren... ik test het namelijk in IE, aangezien de rest van de browsers weinig (of iig minder) voorkomen, en NetScape sowieso heel eng omgaat met div's.

Netscape maakt de eerste relatieve div namelijk automatisch groter, zodat de tweede absolute div (de uitklap) er in past. Dat is absoluut tegen alle standaarden in... Netscape zuight.

Wanneer komt er nou gewoon eens 1 browser standaard. Scheelt een heeeeleboel gezeik.

[ Voor 41% gewijzigd door Kaastosti op 16-05-2003 10:31 ]

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

vrijdag 16 mei 2003 10:52

Acties:

crisp

Devver

Pixelated

Kaastosti schreef op 16 May 2003 @ 10:28:
Nee he.. niet weer dat hele browser-compatibiliteits-gebeuren... ik test het namelijk in IE, aangezien de rest van de browsers weinig (of iig minder) voorkomen, en NetScape sowieso heel eng omgaat met div's.

Netscape maakt de eerste relatieve div namelijk automatisch groter, zodat de tweede absolute div (de uitklap) er in past. Dat is absoluut tegen alle standaarden in... Netscape zuight.

Wanneer komt er nou gewoon eens 1 browser standaard. Scheelt een heeeeleboel gezeik.

welke netscape? NS4 kan ik me heel goed voorstellen, die kent namelijk geen <div>, maar die browser moet je ook in een diep gat gooien en netjes afdekken met aarde en een mooie steen.
wb IE: het lijkt erop dat de link door de width: 100% opeens bovenop komt te liggen. Duidelijk een bug imho.
Ik kijk nog even verder...

Intentionally left blank

vrijdag 16 mei 2003 10:53

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

De Netscape die ik hier test is 6. Niet de allerlaatste, maar ook 7 schijnt dit zelfde probleem te hebben met divs, wat weer een bug in Netscape is helaas. Op deze manier dekken de bugs elkaar mooi af cross-browser gezien

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

vrijdag 16 mei 2003 12:25

Acties:

crisp

Devver

Pixelated

hebbes!

de links buiten(onder) de relative gepositioneerde divs gezet, en de mouseover/mouseout in de <td> gezet. z-indexen zijn niet nodig:

HTML:

<table border='0' cellpadding='0' cellspacing='0' width='150'>
    <tr>
        <td onmouseover="ShowMenu('m1')" onmouseout="HideAction('m1');">
            <div style="position: relative;">
                <div id='m1' style="position: absolute; top: 5px; left: 130px; visibility: hidden;">
                    <table border='0' cellpadding='0' cellspacing='0' width='150'>
                        <tr>
                            <td>
                                <a href='navigatie.php?var=1.1' class='navigatie1'
                                    style="display: block; width: 100%;">
                                1.1
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href='navigatie.php?var=1.2' class='navigatie1' 
                                    style="display: block; width: 100%;">
                                1.2
                                </a>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <a href='navigatie.php?var=1' class='navigatie0'
                style="display: block; width: 100%;">
            1
            </a>
        </td>
    </tr>
</table>
<table border='0' cellpadding='0' cellspacing='0' width='150'>
    <tr>
        <td onmouseover="ShowMenu('m2')" onmouseout="HideAction('m2')">
            <div style="position: relative;">
                <div id='m2' style="position: absolute; top: 5px; left: 130px; visibility: hidden;">
                    <table border='0' cellpadding='0' cellspacing='0' width='150'>
                        <tr>
                            <td>
                                <a href='navigatie.php?var=2.1' class='navigatie1'
                                    style="display: block; width: 100%;">
                                2.1
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href='navigatie.php?var=2.2' class='navigatie1' 
                                    style="display: block; width: 100%;">
                                2.2
                                </a>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <a href='navigatie.php?var=2' class='navigatie0' 
                style="display: block; width: 100%;">
            2
            </a>
        </td>
    </tr>
</table>

btw, ik heb de id's veranderd omdat id's niet met een cijfer mogen beginnen

Kaastosti schreef op 16 May 2003 @ 10:53:
De Netscape die ik hier test is 6. Niet de allerlaatste, maar ook 7 schijnt dit zelfde probleem te hebben met divs, wat weer een bug in Netscape is helaas. Op deze manier dekken de bugs elkaar mooi af cross-browser gezien

NS6 is gebaseerd op Mozilla 0.94 en NS7 op Mozilla 1.0x. Als je dan bedenkt dat Mozilla zelf al op versie 1.4 zit, dan kan je wel nagaan hoever Netscape nog achterloopt

[ Voor 44% gewijzigd door crisp op 16-05-2003 12:28 ]

Intentionally left blank

vrijdag 16 mei 2003 14:38

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Okee dan

dit werkt inderdaad!
Tjah Netscape 6 is oud, maar wordt helaas nog wel door sommige mensen gebruikt. IE blijft toch nog 97% van het totaal, dus wat dat betreft maak ik me er ook niet echt zorgen over

--
Alleen als ik 't overtik wil het natuurlijk niet meer

Copy/paste werkt, maar op het moment dat ik dit implementeer in m'n code schuift hij de uitklap er weer netjes achter... zal wel weer een tikfoutje zijn van mij

Ik weet nu in ieder geval dat het _kan_, dus weer inspiratie om verder te proberen!

[ Voor 43% gewijzigd door Kaastosti op 16-05-2003 14:43 ]

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.