Buondì, avrei MOLTO bisogno del Vostro aiuto e della Vostra pazienza. La premessa, assai d'obbligo, è che sono terribilmente ignorante in materia e di questo me ne scuso...
Andando al dunque:
Sto realizzando una pagina html in cui sono presenti delle voci di Offerte speciali. Per ognuna di queste voci vorrei che si aprisse una finestra di overlay per specificare in dettaglio l'offerta.
La prima sono riuscita a realizzarla ma non so che modifiche devo apportare per differenziare le altre (ipotizzo che debba modificare sia lo script che il Css).
Qualcuno mi può aiutare?
Questo è il codice html
e questo il css dell'overlaycodice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Graf: servizi di grafica, stampa e web</title> <meta name="google-site-verification" content="C6NcwyB56bPsXiPNm3Scw2hdOaEO2gp9iaoQXlmRqjA" /> <meta name="description" content=""/> <meta name="keywords" content=""/> <meta name="language" content="IT"/> <meta name="copyright" content="copyright GRAF"/> <meta name="author" content="Graf, studio grafico e tipografia Digitale a Roma - info@graf.roma.it"/> <link rel="shortcut icon" type="image/x-icon" href="http://www.graf.roma.it/favicon.ico" /> <link rel="icon" href="http://www.graf.roma.it/favicon.ico" /> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="overstyle.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAApznR0XXVmF4KJieCjQGgFRQycQ_xRP7Gf5pGxIj5gm1fbmPolBQq77jipVRaf4VS5wLAjOlEqr0XuQ"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script> $(document).ready(function() { $(".apri").click( function(){ $('#overlay').fadeIn('fast'); $('#offerta').fadeIn('slow'); }); $(".chiudi").click( function(){ $('#overlay').fadeOut('fast'); $('#offerta').hide(); }); //chiusura emergenza $("#overlay").click( function(){ $(this).fadeOut('fast'); $('#offerta').hide(); }); }); </script> </head> <body> <div id="testata"> [img]images/logograf.png[/img] <ul class="linkist">[*]chi siamo[*]servizi[*]portfolio[*]contatti[/list]</div> <div id="contenuto"> <div id="contsx"> <div id="sx"> <h1>Le Offerte speciali di Graf</h1> <h2>Graf ha studiato alcune offerte vantaggiose che riguardano sia la grafica che la stampa.</h2> <h4 span class="rosso">OFFERTE SPECIALI DI GRAFICA</h4> <dl class="offerte"> <dt class="offerte">Progettazione e realizzazione grafica di un logo aziendale</dt> <dd class="offerte">Studio e progettazione di un logo + carta intestata + busta + biglietto da visita.</dd> <div style="clear:right"></div> <p class="apri"></p> <div class="overlay" id="overlay" style="display:none;"></div> <div id="offerta"> <h1>Progettazione Logo</h1> [img]images/visualPromo1.jpg[/img] <div style="clear:both"></div> <p class="testo-offerta">testo promozione testo promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozione</p> <hr /> <p class="chiudi">X</p> </div> </dl> <dl class="offerte"> <dt class="offerte">Blablabla</dt> <dd class="offerte">Blablabla blablabla blablablabla blabla</dd> <div style="clear:right"></div> <p class="apri"></p> <div class="overlay" id="overlay" style="display:none;"></div> <div id="offerta"> <h1>Buste, programmi e locandine per eventi </h1> [img]images/convention.jpg[/img] <div style="clear:both"></div> <p class="testo-offerta">testo promozione testo promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozione</p> <hr /> <p class="chiudi">X</p> </div> </dl> <dl class="offerte"> <dt class="offerte">Blablabla</dt> <dd class="offerte">Blablabla blablabla blablablabla blabla</dd> <div style="clear:right"></div> <p class="apri"></p> <div class="overlay" id="overlay" style="display:none;"></div> <div id="offerta"> <h1>Progettazione Logo</h1> <p class="testo-offerta">testo promozione testo promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozionetesto promozione</p> <hr /> <p class="chiudi">X</p> </div> </dl> </div> </div> <div id="contdxoff"> </div> <div id="dx"> <ul class="menu"> <li class="titolo">offerte speciali[*]grafica[*]stampa[*]grafica e stampa[/list] richiedi un preventivo [img]images/news.png[/img] <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FRoma-Italy%2FSoluzioni- per-comunicare%2F320406600081&width=200&colorscheme=light&layout=standard&stream=false&header=true&height=100" scrolling="no" frameborder="0" style=" border-bottom:#9F0139 solid 1px; overflow:hidden; width:175px; margin:40px 25px 0 10px; height:100px; background:#fff;"></iframe> </div><ul id="summary">[*]la mission •[*]i nostri clienti •[*]grafica •[*]fotoritocco •[*]web •[*]stampa •[*]listino prezzi stampa •[*]invio file con FTP •[*]come inviarci i files•[*]dove si trova GRAF •[*]come raggiungerci[/list]<div style="clear:both"></div> </div><div id="footer"> Graf di Fabrizio De Filippi - Via Joyce 12, negozio 23 - 00143 Roma - P. Iva: 1040911058 - Cod. Fiscale: DFLFRZ71D28H501Q</p></div></body> </html>
Graziecodice:@charset "utf-8"; /* CSS Document */ .testo-offerta { margin:15px; font-size:14/21px;} .apri{ width:25px; height:25px; float:right; margin:-8px 0 0 0; background-image:url(images/bottone.jpg); background-repeat:no-repeat; } .apri:hover {cursor:pointer;} .chiudi{ font-size:18px; color:#000; font-weight:bold; position:absolute; right:2%; top:0%; cursor:pointer;} .overlay { background:#000; position:fixed; top:0px; bottom:0px; left:0px; right:0px; z-index:100; cursor:pointer; /*Trasperenza cross browser*/ opacity: .7; filter: alpha(opacity=70); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; } #offerta{ width:740px; background-color:#FFF; display:none; z-index:+300; position:absolute; left: 33%; top:20%; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;} hr { -moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: #CCCCCC; border-right: 0 solid #CCCCCC; border-style: solid; border-width: 1px 0 0; width:60%} #offerta img {width:472px; margin:20px 134px 10px 134px;} #offerta h1 {margin:20px 20px 20px 20px;}
Rispondi quotando