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.
@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:
<body>
<div id="contenitore">
<div id="content">
<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;
Rispondi quotando
