Un "alieno dietro la luna"

santoroag · da **santoroag** » sabato 4 febbraio 2012, 3:03

Salve a tutti, sto creando una pagina web ad un amico, pagina essenzialmente composta da immagine, in pratica devo porre una luna al centro della pagina, con sotto lo sfondo di tante stelle e nascosto in un cratere della luna un piccolo alieno che con la proprietà :hover venga fuori e porti ad un link. Il problema che mi si presenta è che sn riuscito a posizionare la luna al centro, e l alieno dove dovrebbe stare, comprensivo di effetto, il problema è che non riesco a posizionarlo "sotto" la luna. Ho cercato di utilizzare il z-index che però ovviamente nn va se nn uso il position:absolute, cosa che vorrei evitare.
Vi posto il codice, e spero di esser stato chiaro.

Sintassi: css [ Scarica ] [ Nascondi ]

@charset "utf-8";
/* CSS Document */
 
* {
        margin:0;
        padding:0;
}
 
body {
        background-color:#031637;
        background-image:url(immagini/bg.png);
        font:Verdana, Geneva, sans-serif;
        color:#FFFFFF;
        font-size:10px;
}
#contenitore {
        background: url(immagini/moon.png) 50% 50% no-repeat scroll     ;
        min-height:960px;
        min-width:960px;
}
 
a.alieno {
        display:block;
        width:61px;
        height:48px;
        position:relative;
        top:380px;
        left: 350px;
        background-image:url(immagini/alieno.png);
        background-repeat:no-repeat;
        
        transition-property: left, top; /*standard*/
        transition-duration: 2s; 
        -webkit-transition-property: left, top; /*safari*/
        -webkit-transition-duration: 2s;         
        -o-transition-property: left, top;      /*opera*/
        -o-transition-duration: 2s;         
        -moz-transition-property: left, top;    /*firefox*/
        -moz-transition-duration: 2s;
}
a.alieno:hover {
        left:320px;
        top:373px;
        height:68px;
        width:81px;
}
        
#contatore span#cntdwn {
        font-family:Verdana, Geneva, sans-serif !important;
        color:#999 !important;
        position:relative;
        top:100px;
        left:100px;
}
 

ed ecco la pagina html:

Sintassi: html [ Scarica ] [ Nascondi ]

<body>
        <div id="contenitore">
        <div id="content">
                <a class="alieno" href="#"></a>
                <div id="contatore">
                                <script language="JavaScript" src="js/count-up.js"></script>
            </div>
        </div>
    </div>
    
        <script language="JavaScript">
                TargetDate = "12/31/2011 00:00 AM";
                BackColor = "transparent"; /*colore di sfondo */
                ColoreTesto = "black"; /*colore testo*/
                ContatoreAttivo = true; /*contatore, true=attivo, false=statico*/
                Incremento = +1; /*Valore negativo per count-down*/
                LeadingZero = true;
                DisplayFormat = "%%D%% g, %%H%% h, %%M%% m, %%S%% s"; /*formato contatore*/
                FinishMessage = "Time Out";
        </script>
    
</body>
 

Spero qualcuno riesca ad aiutarmi, grazie a tutti comunque.
Ecco cosa succede: http://i39.tinypic.com/15pjptz.png ecco cosa vorrei http://i41.tinypic.com/25ja70g.png;

markdesign · da **markdesign** » martedì 7 febbraio 2012, 21:54

In realtà la proprietà z-index funziona anche con i position:relative quindi non dovresti aver problemi...

Il problema penso sia dovuto al fatto che l'alieno è contenuto dentro al contenitore-luna, prova a fare una cosa di questo tipo:

<div id="contenitore">
<div id="luna"></div>
<div id="alieno"></div>
</div>

e poi sposti luna/alieno/contenitore secondo le tue necessità...

santoroag · da **santoroag** » mercoledì 8 febbraio 2012, 14:52

Mark come mi hai suggerito tu purtroppo non funziona.
Comunque ho grossomodo risolto in questo modo, se non fosse che si è presentato un altro problema:

Sintassi: html [ Scarica ] [ Nascondi ]

<div id="centro">
        <a class="alieno" href="#"></a>
        <img class="moon" src="immagini/moon.png" />
        <!--<div id="moon">
                
        </div>-->
    
    </div>

e il css:

Sintassi: css [ Scarica ] [ Nascondi ]

img.moon {
        position:relative;
        left:50%;
        margin-left:-325px;
        z-index:2;
}
a.alieno {
        display:block;
        width:61px;
        height:48px;
        position:relative;
        
        top:265px;
        left: 155px;
        
        background-image:url(immagini/alieno.png);
        background-repeat:no-repeat;
        z-index:3;      
        transition-property: left, top; /*standard*/
        transition-duration: 2s; 
        -webkit-transition-property: left, top; /*safari*/
        -webkit-transition-duration: 2s;         
        -o-transition-property: left, top;      /*opera*/
        -o-transition-duration: 2s;         
        -moz-transition-property: left, top;    /*firefox*/
        -moz-transition-duration: 2s;
}
a.alieno:hover {
        left:130px;
        top:263px;
        height:68px;
        width:81px;
}

Il problema che però mi si pone adesso è che quando passo il mouse sull'alieno che sbuca dal cratere la luna mi si abbassa di una decina di px, qualcuno sa come mai ?

markdesign · da **markdesign** » mercoledì 8 febbraio 2012, 15:32

Strano che non funzioni... Comunque penso succeda perché hai cambiato le dimensioni dell'alieno (height e width) nell'hover e questo va ad incidere sulla posizione della luna...

Un "alieno dietro la luna"

Un "alieno dietro la luna"

Re: Un "alieno dietro la luna"

Re: Un "alieno dietro la luna"

Re: Un "alieno dietro la luna"

Chi c’è in linea