rieccomi, il plugin in questione è il seguente:
http://fancybox.net/example
spero che nessuno vomiti vedendo il codice che ho prodotto..
ho fatto delle prove, seguendo le regole del sito di origine, poi aprendo la pagina in chrome e curiosando nei vari codici e apportando modifiche sempre con esito negativo, per evitare confusione posto la mia pagina pulita e gli stili (sopratutto per gli ultimi abbiate pietà è il mio primo sito
)
codice:
<body>
<div id="pagina">
<div id="header">
[img]componenti/OM_logo-05.png[/img]</p>
</div>
<div id="navbar">
<div id="home">home</div>
<div id="pro">prodotti e servizi</div>
<div id="port">portfolio</div>
<div id="chi">chi sono</div>
<div id="cont">contatti</div>
</div>
<div id="contenitore">
<div id="contenitore2">
<div id="spaziatore"></div>
<div id="contenitore3">
<div id="nuto">qui trova posto il contenuto</div>
<div id="clear"></div>
</div>
<div id="filetto"></div>
</div>
<div id="footer">
home - prodotti e servizi - portfolio - chi sono - contatti
powered by Omnigrafica 2010</p>
<div id="fine"></div>
</div>
</div>
</div>
</body>
gli stili
codice:
@charset "UTF-8";
* {
margin:0 0 0 0;
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
}
body {
background-color: #000;
}
#pagina {
position: absolute;
background-image:url(../componenti/OM_sfondo.gif);
background-repeat:repeat-y;
left: 50%;
margin:0 -600px;
width: 1200px;
}
#header {
background-image:url(../componenti/OM_sfondotop.png);
background-repeat:no-repeat;
height:155px;
}
#logo {
margin-top: 35px;
margin-left:100px;
}
/* ------- navigazione ------- */
#navbar {
background-image: url(../componenti/OM_navbar.gif);
height: 52px;
width:1200px;
position: relative;
text-align: center;
margin-bottom: 0px;
}
#home
{
margin-left: 298px;
float: left;
}
#pro {
float: left;
}
#port {
float: left;
}
#chi {
float: left;
}
#cont {
float: left;
}
a.link:hover {
color:#CAE14D;
text-shadow:0px 2px 2px #000;
}
a.link:active {
padding-top:18px;
height:35px;
text-shadow:none;
}
a.link {
display:block;
position:relative;
padding:17px 23px 0 23px;
height:35px;
color:#666;
text-decoration:none;
}
/* -------- fine navigazione -------- */
#contenitore {
background-image:url(../componenti/OM_sfondogiu.png);
background-repeat:no-repeat;
background-width:100%;
background-height:100%;
background-position:top;
background-attachment:fixed;
margin:0 auto 0 auto;
padding:0 0 0 0;
}
#contenitore2 {
margin:0 auto 0 auto;
background-image:url(../componenti/OM_luce.png);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center 0px;
}
#spaziatore {
height:10px;
background-image:url(../componenti/OM_ombrabar.png);
}
#contenitore3 {
width:960px;
margin:0 0 0 100px;
padding:10px 20px 0 20px;
background-image:url(../componenti/Om_sfondonuto.png);
background-repeat:repeat-y;
border-bottom:solid #000;
position:relative;
border-bottom-width:1px;
-webkit-border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius: 15px 15px 0 0;
}
.mano {
float: left;
margin:18px 40px 10px 30px;
}
h1 {
color: #F90;
text-shadow:0 2px 2px #000;
}
hr {
color: #000;
}
#nuto {
width:960px;
position:relative;
color: #FFF;
text-align: left;
padding:10px 0 10px 0;
margin:0 auto o auto;
}
imput {
}
p {
line-height: 2em;
text-shadow:0px 1px 1px #000;
}
.testofirst {
line-height: 2em;
margin-top: 20px;
}
.campo {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:1em;
margin-bottom: 10px;
padding:0px 8px 2px 8px;
background-color: #333;
border:solid 1px #333;
-webkit-border-top-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius: 8px 8px 0px 0px;
color:#FFF;
-webkit-box-shadow: 1px 1px 3px #000;
-moz-box-shadow: 1px 1px 3px #000;
}
#form1 {
margin:20px 0;
}
.def {
color:#999;
text-shadow:0px 1px 1px #000;
}
imput:focus, textfield:focus {
margin:20px 0;
border-bottom:solid 1px #CAE14D
}
#clear {
clear:both;
}
#filetto {
width:1000px;
height:1px;
clear:both;
margin:0 auto 0 auto;
border-top-color:#CAE14D;
border-top-style:solid;
border-top-width:1px;
}
#footer {
width:1000px;
background-color:#000;
width:100%;
margin-top:10px;
padding-top:0.3em;
padding-bottom:0.4em;
color: #333;
text-align:center;
font-size: 0.7em;
line-height: 1.2em;
}
#footer p a {
text-decoration: none;
color: #333;
display: inline;
}
#footer p a:hover {
text-decoration: underline;
}
#navgiu {
display:block;
border-bottom:solid 1px #333;
}
#fine {
height:15px;
}
/* ------- aggiusutamenti compatibilità ------- */
a img {
border: 0;
}
a:focus {
outline: 0;
}