salve a tutti, grazie innanzitutto per l'attenzione. Ho bisogno di un aiutino, avendo scaricato un esempio dalla rete, che mi permette personalizzandolo,di avere un effetto a scorrimento delle immagini,dopo aver cliccato sull'apposito link, ho delle serie difficolta ad inserirlo nella pagina come vorrei. Vi espongo brevemente come lo vorrei inserito nel layout :
1)Dovrebbe essere centrato (solo orizzontalmente),quindi da qualsiasi schermo,con qualsiasi risoluzione ,lo vorrei vedere sempre al centro.
2) Come gia' specificato sopra,essendo sempre al centro orizzontalmente,avrei bisogno anche che fosse ad una altezza precisa (top),per metterlo sotto il logo e links ecc...
Non vi sto' a spiegare,ma ho fatto molteplici modifiche per farlo risultare al centro orizzontalmente ed a una certa altezza,ma senza risultati,ecco perche' chiedo umilmente aiuto a voi. Addirittura,avevo inserito i div in una tabella per poterlo far stare in centro.... ho detto tutto...
Vado ad incollarvi il codice html e css originali,sono sicuro che basterebbe aggiungere una piccola istruzione per farlo risultare come voglio,ma non so' quale.....
codice:
<title>Untitled Document</title> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.tools.min.js"></script> <link href="css/vertical.css" rel="stylesheet" type="text/css" /> <script> // execute your scripts when the DOM is ready. this is a good habit $(function() { // main vertical scroll $("#main").scrollable({ // basic settings vertical: true, size: 1, clickable: false, // main navigator (thumbnail images) }).navigator("#navigazione"); }); </script> </head> <body> <div id="contenitore"> <ul id="navigazione">[*][img]ima/img004-tumb.jpg[/img][link #1][*][img]ima/img004-tumb.jpg[/img][link #2][*][img]ima/img004-tumb.jpg[/img][link #3][*][img]ima/img004-tumb.jpg[/img][link #4][/list]<div id="main"> <div id="pages"> <div class="page">[img]ima/img004.jpg[/img]</div> <div class="page">[img]ima/img004.jpg[/img]</div> <div class="page">[img]ima/img004.jpg[/img]</div> <div class="page">[img]ima/img004.jpg[/img]</div> </div> </div> </div>
ed ecco il codice css :
codice:
@charset "utf-8"; /* CSS Document */ #contenitore { width: 750px; height: 450px; background-color: #333; } /* main vertical scroll */ #main { position: relative; overflow: hidden; height: 450px; width: 540px; } /* root element for pages */ #pages { position: absolute; height: 20000em; } #pages .page { padding: 10px; height: 430px; background-color: #222; width: 520px; } /* main navigator */ #navigazione { float: left; padding: 0px !important; margin: 0px !important; } #navigazione li { background-color: #333; border-bottom: 1px solid #666; clear: both; color: #FFF; font-size: 12px; height: 75px; line-height: 75px; /**/ list-style-type: none; padding: 10px; width: 190px; cursor: pointer; } #navigazione li img { border: 1px solid #666; margin-right: 1em; vertical-align: top; } #navigazione li:hover { background-color: #444; } #navigazione li.active { background: #555 url(../ima/freccia.gif) no-repeat center right; }
Grazie a tutti per l'attenzione