Sostituisci sempre a quella pag. html il codice che posto e vedrai cosa intendo...è una gallery tipo questa postata, e come vedi con lo scroll, la foto in grande viene visualizzata sempre a sinistra e non dov'è la foto....come faccio a dire alla foto grande di posizionarsi sempre al centro della pagina anche scrollando tutto a destra?
Grazie ancora per l'attenzione e la pazienza
codice:<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS input:checked gallery example - MDN</title> <style type="text/css"> #gallery-container { position: relative; width: 700px; height: auto; padding-top: 350px; margin-left: auto; margin-right: auto; text-align: center; border: 1px #aaaaaa solid; } img.gallery-fullsize { position: absolute; top: 15px; left: 150px; display: none; } div.gallery-item { display: inline-block; } input.gallery-selector { display: none; } label.gallery-label { cursor: pointer; } input.gallery-selector:checked ~ img.gallery-fullsize { display: block; } #gallery-scroll { height: 100px; width: 3000px; overflow: auto; margin: 0; padding: 0; } #ciao { height: 75px; width: 3000px; margin: 0; padding: 0; } </style> </head> <body> <h1>CSS input:checked gallery</h1> <div id="gallery-scroll"> <div id="ciao"> <div class="gallery-item"> <label for="gallery-item1" class="gallery-label">[img]images/1s.jpg[/img]</label> <input type="radio" name="gallery-list" class="gallery-selector" value="1.jpg" id="gallery-item1" /> [img]images/1.jpg[/img] </div> <div class="gallery-item"> <label for="gallery-item2" class="gallery-label">[img]images/2s.jpg[/img]</label> <input type="radio" name="gallery-list" class="gallery-selector" value="2.jpg" id="gallery-item2" /> [img]images/2.jpg[/img] </div> <div class="gallery-item"> <label for="gallery-item3" class="gallery-label">[img]images/3s.jpg[/img]</label> <input type="radio" name="gallery-list" class="gallery-selector" value="3.jpg" id="gallery-item3" /> [img]images/3.jpg[/img] </div> <div class="gallery-item"> <label for="gallery-item4" class="gallery-label">[img]images/4s.jpg[/img]</label> <input type="radio" name="gallery-list" class="gallery-selector" value="4.jpg" id="gallery-item4" /> [img]images/4.jpg[/img] </div> <div class="gallery-item"> <label for="gallery-item5" class="gallery-label">[img]images/1s.jpg[/img]</label> <input type="radio" name="gallery-list" class="gallery-selector" value="1.jpg" id="gallery-item5" /> [img]images/1.jpg[/img] </div> <div class="gallery-item"> <label for="gallery-item6" class="gallery-label">[img]images/2s.jpg[/img]</label> <input type="radio" name="gallery-list" class="gallery-selector" value="2.jpg" id="gallery-item6" /> [img]images/2.jpg[/img] </div> <div class="gallery-item"> <label for="gallery-item7" class="gallery-label">[img]images/3s.jpg[/img]</label> <input type="radio" name="gallery-list" class="gallery-selector" value="3.jpg" id="gallery-item7" /> [img]images/3.jpg[/img] </div> <div class="gallery-item"> <label for="gallery-item8" class="gallery-label">[img]images/4s.jpg[/img]</label> <input type="radio" name="gallery-list" class="gallery-selector" value="4.jpg" id="gallery-item8" /> [img]images/4.jpg[/img] <div class="gallery-item"> <label for="gallery-item1" class="gallery-label">[img]images/1s.jpg[/img]</label> <input type="radio" name="gallery-list" class="gallery-selector" value="1.jpg" id="gallery-item1" /> [img]images/1.jpg[/img] </div> <div class="gallery-item"> <label for="gallery-item1" class="gallery-label">[img]images/1s.jpg[/img]</label> <input type="radio" name="gallery-list" class="gallery-selector" value="1.jpg" id="gallery-item1" /> [img]images/1.jpg[/img] </div> <div class="gallery-item"> <label for="gallery-item1" class="gallery-label">[img]images/1s.jpg[/img]</label> <input type="radio" name="gallery-list" class="gallery-selector" value="1.jpg" id="gallery-item1" /> [img]images/1.jpg[/img] </div> <div class="gallery-item"> <label for="gallery-item1" class="gallery-label">[img]images/1s.jpg[/img]</label> <input type="radio" name="gallery-list" class="gallery-selector" value="1.jpg" id="gallery-item1" /> [img]images/1.jpg[/img] </div> <div class="gallery-item"> <label for="gallery-item1" class="gallery-label">[img]images/1s.jpg[/img]</label> <input type="radio" name="gallery-list" class="gallery-selector" value="1.jpg" id="gallery-item1" /> [img]images/1.jpg[/img] </div> <div class="gallery-item"> <label for="gallery-item1" class="gallery-label">[img]images/1s.jpg[/img]</label> <input type="radio" name="gallery-list" class="gallery-selector" value="1.jpg" id="gallery-item1" /> [img]images/1.jpg[/img] </div> <div class="gallery-item"> <label for="gallery-item2" class="gallery-label">[img]images/2s.jpg[/img]</label> <input type="radio" name="gallery-list" class="gallery-selector" value="2.jpg" id="gallery-item2" /> [img]images/2.jpg[/img] </div> <div class="gallery-item"> <label for="gallery-item2" class="gallery-label">[img]images/2s.jpg[/img]</label> <input type="radio" name="gallery-list" class="gallery-selector" value="2.jpg" id="gallery-item2" /> [img]images/2.jpg[/img] </div> <div class="gallery-item"> <label for="gallery-item2" class="gallery-label">[img]images/2s.jpg[/img]</label> <input type="radio" name="gallery-list" class="gallery-selector" value="2.jpg" id="gallery-item2" /> [img]images/2.jpg[/img] </div> <div class="gallery-item"> <label for="gallery-item2" class="gallery-label">[img]images/2s.jpg[/img]</label> <input type="radio" name="gallery-list" class="gallery-selector" value="2.jpg" id="gallery-item2" /> [img]images/2.jpg[/img] </div> <div class="gallery-item"> <label for="gallery-item2" class="gallery-label">[img]images/2s.jpg[/img]</label> <input type="radio" name="gallery-list" class="gallery-selector" value="2.jpg" id="gallery-item2" /> [img]images/2.jpg[/img] </div> <div class="gallery-item"> <label for="gallery-item2" class="gallery-label">[img]images/2s.jpg[/img]</label> <input type="radio" name="gallery-list" class="gallery-selector" value="2.jpg" id="gallery-item2" /> [img]images/2.jpg[/img] </div> <div class="gallery-item"> <label for="gallery-item2" class="gallery-label">[img]images/2s.jpg[/img]</label> <input type="radio" name="gallery-list" class="gallery-selector" value="2.jpg" id="gallery-item2" /> [img]images/2.jpg[/img] </div> <div class="gallery-item"> <label for="gallery-item2" class="gallery-label">[img]images/2s.jpg[/img]</label> <input type="radio" name="gallery-list" class="gallery-selector" value="2.jpg" id="gallery-item2" /> [img]images/2.jpg[/img] </div> </div> </div> </div> </div> </body> </html>

Rispondi quotando