Avatar billede frustrator Nybegynder
12. april 2010 - 14:28 Der er 3 kommentarer og
1 løsning

DIV oven på Java?

Hey there

Jeg har søgt højt og lavt, vidt og bredt, men endnu ikke fundet nogen løsning på dette hæslige design-problem: Hvordan i alverden placerer man en DIV oven på en java-applet? For det må vel kunne gøres... right?

På min side har jeg en content slider, java-baseret. Over den har jeg en dropdown-menu. Såvel slider som menu er placeret i seperate DIV's. Men alle drop-downs fra menuen bliver "gemt" bag slideren, og det er jo lidt ufedt og knap så praktisk.

Jeg har forsøgt med diverse variationer af z-index, men det batter ikke noget. Jeg ved også, at sådan noget applet-crap altid placeres øverst, men der må vel være end udvej, oder wie?

----CSS for dropdown-menuen:----
#navibar {
    width: 987px; background-image: url('/site/gfx/sitegfx/gradient_navioff.jpg'); margin: 0px auto; height: 33px; z-index: 100
}
.navimodule {
    width: 590px; float: left; margin: 0px 0px 0px 375px; height: 33px
}

Note: Selve menuen er placeret i .navimodule, mens .navimodule er placeret i #navibar (af design-hensyn).

----CSS for content slider:----
#slider1 {
    width: 800px;
    height: 300px;
    position: relative;
    overflow: hidden;
}

#slider1Content {
    width: 800px;
    position: absolute;
    top: 0;
    margin-left: 0;
    text-decoration: none;
}
.slider1Image {
    float: left;
    position: relative;
    display: none;
}
.slider1Image span {
    position: absolute;
    padding: 10px 13px;
    width: 800px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
    text-decoration: none;
}
.clear {
    clear: both;
}
.slider1Image span strong {
    font-size: 14px;
}
.left {
    top: 0;
    left: 450px;
    width: 320px !important;
    height: 300px;
    text-decoration: none;
}
.right {
    right: 0;
    bottom: 0;
    width: 390px !important;
    height: 300px;
}
ul { list-style-type: none;}

Content slideren er placeret i denne DIV:
#slider-container {
    width: 987px; margin: 0px auto; height: 300px; padding-bottom: 10px; z-index: 15
}
Avatar billede tfswebguy Nybegynder
12. april 2010 - 19:16 #1
z-index i CSS defineres med zIndex:<value> så vidt jeg lige kan mindes og huske?
Avatar billede frustrator Nybegynder
12. april 2010 - 20:02 #2
Z-index fungerer fint nok med alle andre DIV's, men har imidlertid selv fundet løsningen på problemet. Det kunne klares med en simpel position: relative, og det giver ingen problemer i hverken IE eller Firefox
Avatar billede tfswebguy Nybegynder
12. april 2010 - 21:15 #3
Fint så, så var det min husker der var rusten :D
Avatar billede olebole Juniormester
14. april 2010 - 12:22 #4
<ole>

z-index giver ikke så megen mening på ikke-positionerede elementer. Læs evt. mere om stacking her:
    http://www.w3.org/TR/CSS2/visuren.html#layers

- og mere i dybden her:
    http://www.w3.org/TR/CSS2/zindex.html

/mvh
</bole>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester