Ciao a tutti...
Smanettando qua e la sono riuscito a portare avanti l'idea del mio sito.
Ho utilizzato uno slider in javascript per far scorrere le pagine e lo sto cominciando a personalizzare.
Adesso ho un problema con i link.
Nella barra del menù, vorrei mi si evidenziasse il testo della pagina attiva in bianco, e non funziona.
Inoltre, nella sezione Link, i testi dei rispettivi link non rispettano il codice css che gli ho assegnato.
Non essendo pratico non riesco a risolvere il problema.
Potete aiutarmi please?
Allego il codice.
Grazie mille
carmelo
codice:<html> <body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> var Slider = function() { this.initialize.apply(this, arguments) } Slider.prototype = { initialize: function(slider) { this.ul = slider.children[0] this.li = this.ul.children // make <ul> as large as all[*]’s this.ul.style.width = (this.li[0].clientWidth * this.li.length) + 'px' this.currentIndex = 0 }, goTo: function(index) { // filter invalid indices if (index < 0 || index > this.li.length - 1) return // move <ul> left this.ul.style.left = '-' + (100 * index) + '%' this.currentIndex = index }, goToPrev: function() { this.goTo(this.currentIndex - 1) }, goToNext: function() { this.goTo(this.currentIndex + 1) } } </script> <style> body { background: no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; font-family:Arial,Helvetica,sans-serif;font-size:12px; background-image:url('resources/sfondoneutro.png'); //background-color:#0e0e0e; } a:link {text-decoration:none; color:gray;} /* unvisited link */ a:visited {text-decoration:none;} /* visited link */ a:hover {text-decoration:none; color:white;} /* mouse over link */ a:active {color:white;} /* selected link */ .link { font-family:Arial; letter-spacing:1px; font-size:14px; text-align:left; margin-left:20px; } .menu { position:absolute; top:550px; width:100%; background-image:url('resources/menubar.png'); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); opacity:0.6; } .tablemenu { position:relative; left:10%; font-family:Arial; font-size:13px; width:600px; height:60px; } .slider { position:relative; top:42px; color:white; background-color:black; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); opacity:0.6; width: 800px; height: 500px; overflow: hidden; } .slider > ul { /* styled by JS to match the added width and height of all[*]’s */ position: relative; -webkit-transition: 0.5s left; -moz-transition: 0.5s left; -ms-transition: 0.5s left; -o-transition: 0.5s left; list-style: none; margin-top: 20; padding: 0; } .slider > ul > li { float: left; width: 800px; height: 500px; } </style> <CENTER> <div class="slider"> <ul> [*] Chi sono [*] Attivita' [*] Gallery [*] Download [*] <div class="link"> - Consiglio Nazionale dei Periti Industriali e dei Periti Industriali Laureati</p> - Ente Previdenza Periti Industriali e dei Periti Industriali Laureati</p> - Agenzia del territorio</p> </div> [*] <p colspan="2" style="padding: 0px; font-size:12px; font-family: Arial; color: white"> Per qualsiasi informazione, compilate i campi sottostanti e verrete contattati nel piu' breve tempo possibile.</p> <table border="0" cellspacing="0" cellpadding="10" width="75%"> <tr> <td style="color:white;" > <p style="letter-spacing:1px; color:white;font-size:14px">Carmelo Privitera perito edile</p> <p style="letter-spacing:1px; color:white;font-size:12px">Contatti:</p> <p style="letter-spacing:1px; color:white;font-size:12px">P. IVA: </p> <p style="letter-spacing:1px; color:white;font-size:12px">Comune</p> <p style="letter-spacing:1px; color:white;font-size:12px">cell.: +39</p> <p style="letter-spacing:1px; color:white;font-size:12px">email: </p> <p style="letter-spacing:1px; color:white;font-size:12px">email certificata:</p> </td> <td> <form name="afm_form_d1770dc8" id="afm_form_d1770dc8" action="http://free.allforms.mailjol.net/u/d1770dc8.php" method="POST" style="margin: 0px"> <table border="0" cellpadding="6" cellspacing="0" style="border-left: 2px solid gray; margin-top:15px; text-align: left; border-collapse: collapse" width="1%"> <tr> <td style="letter-spacing:1px; color:white;font-size:11px; font-family: Arial; font-weight: bold;"> Nome * <input type="Text" name="Nome" size="33" style="font-size: 11px; font-family: Arial"></td> </tr> <tr> <td style="letter-spacing:1px; color:white;font-size:11px; font-family: Arial; font-weight: bold;"> Email * <input type="Text" name="Email" size="33" style="font-size: 11px; font-family: Arial"></td> </tr> <tr> <td style="letter-spacing:1px; color:white;font-size:11px; font-family: Arial; font-weight: bold;"> Messaggio * <textarea rows="4" cols="33" style="font-size: 11px; font-family: Arial" name="Messaggio"></textarea></td> </tr> <tr> <td colspan="2" align="center" style="padding: 8px"> <input type="submit" name="submit" value="Invio" style="font-size: 10px; font-family: Arial"> <input type="reset" name="reset" value="Reset" style="font-size: 10px; font-family: Arial"></td> </tr> <tr> <td colspan="2" style="padding: 8px; font-size:10px; font-family: Arial; color: white"> * Campo obbligatorio</td> </tr> </table> </form> </td> </tr> </table> [/list] </div> </CENTER> <script> var sliders = [] $('.slider').each(function() { sliders.push(new Slider(this)) }) </script> <div class="menu"> <table class="tablemenu" > <th>Chi sono</th> <th>Attivita'</th> <th>Gallery</th> <th>Download</th> <th>Link</th> <th>Contatti</th> </table> </div> </body> </html>
Rispondi quotando
