[HTML/CSS] probleem met transparant menu (stacking) - Softwareontwikkeling

vrijdag 1 juni 2007 23:30

Acties:

Verwijderd

Topicstarter

Hi,

Allereerst volgende afbeelding om mn probleem duidelijk te maken:

Afbeeldingslocatie: http://www.screwhog.com/bo-oz/test.jpg

Zoals je ziet valt het linker gedeelte van het menu onder de content houder, terwijl het pop-up menu (beide CSS) er wel netjes overheen valt (terwijl dat nou juist niet in de verwachting ligt)

HTML:

<style>
#menu ul {
    display:block;
    margin:0 10px;
    margin-right:0;
    width:130px;
    text-align:right;
    padding:10px;
    padding-right:0;
    list-style:none;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:18px;
    font-weight:900;
    color:#6e7a74;
    z-index:99;
}
#menu ul ul {
    display:none;
    border-left:1px solid #fff;
}
#menu ul li:hover ul {
    display:block; 
    text-align:left;
    position:absolute; 
    top:-20px; 
    left:150px; 
    width:180px;
    background-image:url(background_header.png);
    font-size:11px;
    color:#000;
    margin:0;
    padding:0;

}
#image_holder {
    height:400px;
    width:600px;
    top:150px;
    left:50px;
    position:absolute;
    background-color:#EEE;
    z-index:1;
    overflow:hidden;
}
</style>
<body>
    <div id="menu">
        <ul>
            <li>SPEAK
                  <ul style="top:98px;">
                    <li>Sub 5</li>
                    <li>Sub 6</li>
                    <li>Sub 7</li>
                    <li>Sub 8</li>
                 </ul>
            </li>
</ul>
</div>

<div id="image_holder">
    <img src="background.jpg" />
</div>
</body>

Hierboven staat de relevante code... ik weet het even niet meer... heb al op allerlei sites gezocht, gegoogled, maar aangezien de juiste keywords me niet te binnen schieten, hier maar even post gedropt.

Voor de zekerheid, het is uiteraard de bedoeling dat het menu altijd het voorste element is.

vrijdag 1 juni 2007 23:33

Acties:

? ?

[ Voor 133% gewijzigd door ? ? op 25-01-2013 09:53 ]

vrijdag 1 juni 2007 23:38

Acties:

Verwijderd

Topicstarter

@era.zer een hele goeie ja

Zoals je kan zien staat er bij #menu ul een hogere z-index dan bij de #image_holder, logischerwijs zou je dan verwachten dat het menu (maar niet het submenu) nu bovenop zou liggen... echter, nu doet hij juist het submenu boven, dat hij beide niet zou doen, zou logisch zijn, maar juist het boven liggende element wel, en het daaronder liggende element niet... daar zit hem dus de kneep

vrijdag 1 juni 2007 23:47

Acties:

Verwijderd

Topicstarter

Okee, heb het opgelost door bij #menu ul en bij #menu (staat niet in de code boven) position:relative toe te voegen waar eerst geen position stond opgegeven.... kan iemand dit toelichten??

thx

zaterdag 2 juni 2007 01:03

Acties:

Boelie-Boelie

quote: http://www.w3.org/TR/REC-CSS2/visuren.html#z-index
'z-index'
Value: auto | <integer> | inherit
Initial: auto
Applies to: positioned elements

Cogito ergo dubito

zaterdag 2 juni 2007 10:09

Acties:

Verwijderd

Topicstarter

thx Boelie... dat maakt een hoop duidelijk, ook over een heleboel andere dingen!

Pagina: 1

Reageer