Problema CSS

[mexican]

Ciao a tutti, ho uno script per un carosello orizzontale che ho modificato per le mi esigenze.
Ora mi resta solo un piccolo problema.
Se vedete l'img in allegato io vorrei posizionare le due freccette ai lati della gallery, ovvero una a sinistra e una a destra. Non in alto come stanno.
Ecco il codice CSS:

#container { width:1000px; margin: 0px auto; padding:0px; font-family: Arial, Helvetica, sans-serif; background-color:#2F2922; }

.prettyContainer {margin: 0px auto;}

#miniCarousel_nav {height:24px;display:block;position: relative;margin-bottom: 10px; }
#miniCarousel_nav a {line-height: 110px;overflow: hidden;}
#miniCarousel_nav a.next,
#miniCarousel_nav a.prev {position: absolute;top:0px;display:block;height:24px;width:24px;background-image: url(nav.png);outline: none;}
#miniCarousel_nav a.next {right:0px;background-position: 0 -24px;}
#miniCarousel_nav a.prev {left:0px;background-position: 0 0;}
#miniCarousel_nav a.next.disable {background-position: -72px -24px;}
#miniCarousel_nav a.prev.disable {background-position: -72px 0px;}
#miniCarousel_nav a.next.mouseover {background-position: -24px -24px;}
#miniCarousel_nav a.prev.mouseover {background-position: -24px 0px;}
#miniCarousel_nav a.next.mousedown {background-position: -48px -24px;}
#miniCarousel_nav a.prev.mousedown {background-position: -48px 0px;}
#miniCarousel_nav a.next.stop,
#miniCarousel_nav a.prev.stop {display:none;}

.carousel1 {width: 700px;height:140px;overflow: hidden;position: relative;margin: 0px auto; }
.carousel1 ul {position: absolute;top:31px;left:0px;margin:0px;padding:0px;list-style-type: none; }
.carousel1 ul li {position: relative;padding:0px;margin-left:20px;float:left;width:140px;height:110px;background-color: #2F2922;margin-right: 20px;margin-bottom: 20px;text-align: center; background-image:url(../../Montaggio/sonfo_gallery.png);}
.carousel1 ul li img { margin-top:10px;}

Ecco il codice HTML

<div id="container">

<div class="prettyContainer" style="width:960px">
		<div class="carousel1">

	<ul>

		[*][img]../Montaggio/foto.png[/img]

		[*][img]../Montaggio/foto.png[/img]

		[*][img]../Montaggio/foto.png[/img]

		[*][img]../Montaggio/foto.png[/img]
                [*][img]../Montaggio/foto.png[/img]
                [*][img]../Montaggio/foto.png[/img]
                [*][img]../Montaggio/foto.png[/img]
                [*][img]../Montaggio/foto.png[/img]
                [*][img]../Montaggio/foto.png[/img]
                [*][img]../Montaggio/foto.png[/img]
                [*][img]../Montaggio/foto.png[/img]
	[/list]

	</div>

	</div>
</div>

[webdemo]

abbiamo un forum CSS...

sposto

[mexican]

Originariamente inviato da webdemo
abbiamo un forum CSS...

sposto

Ok Grazie!

[Daniel91]

Se fossi in te eviterei il più possibile le "position:absolute"...però è una preferenza mia usare le "relative"...comunque stando al tuo codice penso che l'errore stia nella riga che ti ho quotato dove metti "top:0px" cosi facendo resta incollato alla top l'immagine.... spero di aver capito e aver risolto il tuo problema

#miniCarousel_nav a.next,
#miniCarousel_nav a.prev {position: absolute;top:0px;display:block;height:24px;width:24px;background-image: url(nav.png);outline: none;}