Salve a tutti ragazzi...ho creato una skin in html/css e la sto convertendo in php per joomla 2.5. Prima di convertirlo però vorrei che fosse scritto il più correttamente possibile. Il mio problema è semplice: praticamente il menu javascript/jquery non si sovrappone al div sottostante ma lo lascia scivolare in basso. Vi posto il sorgente del mio sito. Ho provato con "z-index" nei css ma niente...forse non è quello oppure non so bene dove inserire il comando....potete darmi una mano? grazie a tutti quelli che mi aiuteranno anticipatamente!
Codice:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="it" lang="it">
<head>
<title>SITO</title>
<meta charset="utf-8">
<link media="screen" type="text/css" href="css/style.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="mail.js"></script>
<link rel='stylesheet' id='style-css' href='diapo.css' type='text/css' media='all'>
<script type='text/javascript' src='scripts/jquery.min.js'></script>
<!--[if !IE]><!--><script type='text/javascript' src='scripts/jquery.mobile-1.0rc2.customized.min.js'></script><!--<![endif]-->
<script type='text/javascript' src='scripts/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='scripts/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='scripts/diapo.js'></script>
<style type="text/css" media="screen">
#large_box {width:800; height:600;}
li.headlink ul { display: none; z-index: 1000; text-decoration:none; }
li.headlink:hover ul { display: block; z-index: 1000; text-decoration:none; }
#cssdropdown, #cssdropdown ul {
list-style: none outside none;
z-index: 2;
font-weight:bold;
text-decoration:none;
}
#cssdropdown .link_menu:hover {background-color: #0071ac; color:#ffffff; text-decoration:none;}
#cssdropdown, #cssdropdown * {
margin: 0;
padding: 0;
z-index: 2;
text-decoration:none;
}
#cssdropdown li.headlink {
background-color: #E3E9E9;
border: 0px solid black;
float: right;
margin-left: -1px;
text-align: center;
width: 200px;
z-index: 2;
}
#cssdropdown li.headlink a {
display: block;
padding: 15px;
z-index: 2;
}
#cssdropdown li.headlink ul {
border-top: 2px solid #ccc;
display: none;
text-align: left;
z-index: 2;
}
#cssdropdown li.headlink:hover ul {
border-top: 2px solid #ccc;
display: block;
z-index: 2;
}
#cssdropdown li.headlink ul li a {
border-top: 2px solid #ccc;
height: 20px;
padding: 16px;
z-index: 2;
}
#cssdropdown li.headlink ul li a:hover {
border-top: 2px solid #ccc;
background-color: #0071ac;
filter:alpha(opacity=65);
-moz-opacity:.65;
opacity:.65;
z-index: 2;
}
#cssdropdown a {
color: #000000;
z-index: 2;
}
#cssdropdown ul li a:hover {
text-decoration: none;
color: #ffffff;
z-index: 2;
}
#cssdropdown li.headlink {
border-top: 2px solid #ccc;
background-color: #e3e9e9;
z-index: 2;
}
#cssdropdown li.headlink ul {
border-top: 2px solid #ccc;
padding-bottom: 10px;
z-index: 2;
}
section {
display: block;
overflow: hidden;
position: relative;
}
.button {
background: #014464;
background: -moz-linear-gradient(top, #0D658E, #0C577A 50%, #014D71 51%, #003E5C);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0E658E), color-stop(.5, #0C577A), color-stop(.5, #014D71), to(#003E5C));
border: 1px solid #368DBE;
border-top: 1px solid #c3d6df;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 3px black;
-webkit-box-shadow: 0 1px 3px black;
box-shadow: 0 1px 3px black;
color: white;
display: block;
font-size: 12px;
font-weight: bold;
height: 30px;
line-height: 30px;
padding: 5px 20px;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 1px black;
text-transform: uppercase;
width: auto;
}
.button2 {
background: #d9ae00;
background: -moz-linear-gradient(top, #b28b06, #9c7705 50%, #9c7705 51%, #5c4100);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #b28b06), color-stop(.5, #9c7705), color-stop(.5, #9c7705), to(#5c4100));
border: 1px solid #c7a60c;
border-top: 1px solid #e5d51f;
}
.button3 {
background: #ffd838;
background: -moz-linear-gradient(top, #edbf21, #c89b0f 50%, #9c7705 51%, #906706);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #edbf21), color-stop(.5, #c89b0f), color-stop(.5, #c89b0f), to(#906706));
border: 1px solid #c7a60c;
border-top: 1px solid #e5d51f;
}
.price_table {
float: right;
font-size: 12px;
margin: 10px auto 0;
padding: 20px 0;
position: relative;
width: 570px;
}
.price_table .price_column.highlighted {
background: #ffd838;
margin: -5px!important;
padding: 10px;
z-index: 2;
}
.price_table .price_column {
display: block;
margin: 5px;
float: left;
position: absolute;
width: 180px;
z-index: 1;
}
.price_table .price_column > div {
background: #eeeeee;
}
.price_table .price_column > div > div {
padding: 10px 15px;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #f6f6f6;
}
.price_table .price_column > div > p {
padding: 10px 15px;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #f6f6f6;
}
.price_table .price_column > div > ul {
padding: 10px 15px;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #f6f6f6;
}
.price_table .price_title {
background-color: #333333;
border-top: 0!important;
color: #ffffff;
font-size: 14px;
}
.price_table .highlighted .price_title {
font-size: 16px;
}
.price_table .price_price {
font-size: 36px;
line-height: 40px;
}
.price_table .highlighted .price_price {
font-size: 40px;
line-height: 44px;
}
.price_table .price_explanation {
font-size: 10px;
line-height: 13px;
text-transform: uppercase;
}
.price_table .cusButton {
background-color: #333333;
display: block;
text-align: center;
}
.price_table li {
padding: 5px 0;
}
.price_table div.pix_check {
background: url(images/demo/list-check-green.png) no-repeat 15px center;
padding-left: 38px!important;
}
.price_table div.pix_error {
background: url(images/demo/list-error.png) no-repeat 15px center;
padding-left: 38px!important;
}
html, body {height:100%; margin:0; padding:0;}
body {
background-color: #eeeeee;
color: /*#8F8F8F*/ #504f4f;
font-family: 'Lato', sans-serif; /*font-family: 'Droid Sans', sans-serif;*/
font-size:12px;
min-width: 320px;
position: relative;
}
#wrapper {
background: url("../images/....") repeat-x #fefefe;*/
}
/*reset.style*/
a, abbr, acronym, address, applet, article, aside, audio, b, blockquote, big, body, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend, li, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup, table, tbody, tfoot, thead, th, tr, tdvideo, tt, u, ul, var {
background: none repeat scroll 0 0 transparent;
border: 0 none;
font-size: 100%;
margin: 0;
outline: 0 none;
padding: 0;
vertical-align: middle;
}
ul {
list-style: none outside none;
}
blockquote, q {
quotes: none;
}
table, table td {
border: medium none;
border-collapse: collapse;
padding: 0;
}
img {
vertical-align: top;
}
embed {
vertical-align: top;
}
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
display: block;
}
mark, rp, rt, ruby, summary, time {
display: inline;
}
/*end.reset.style*/
#header {
padding-top: 15px;
width: 100%;
}
#header .main {
border-radius: 4px 4px 0 0;
padding-top: 20px;
}
.main {
background: #e3e9e9;
box-shadow: 1px 1px 9px rgba(0, 0, 0, 0.02);
margin: 0 auto;
width: 980px;
}
.container_header {
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
position: relative;
width: 960px;
}
.container_header .grid1 {
width: 960px;
margin-left: 0px;
margin-right: 0px;
}
.tel {
width:100%;
position:relative;
margin:0px;
padding:0px;
z-index: 2;
}
.tel a {
color: #4B8CB9;
}
#header .border-bottom {
border-bottom: 2px solid #ccc;
width:100%;
position:relative;
padding-bottom:5px;
}
#menu {
width:940px;
position:relative;
padding-bottom: 0px;
margin-left: 10px;
margin-right: 10px;
}
.logo {
width:300px;
height:165px;
float:left;
border:0px;
[if IE 8] margin-top: 40px;
[if IE 7] width: 4000px;
[if IE 6] margin-top: 40px;
}
#nav {
width:630px;
float: right;
margin:0px;
}
#modulo_loghi {
width:100%;
height:110px;
float:left;
display:none;
}
#modulo_menu {
width:100%;
float:right;
border-top: 2px solid #ccc;
}
h3 {
color: #333333;
font-family: 'Lato', sans-serif; /*font-family: 'Droid Sans', sans-serif;*/
}
h3 em {
display: block;
font-style: normal;
}
.h3_padding {
margin-bottom: 20px;
border-bottom: 1px solid #E5E5E5;
}
h6 {
color: #4B8CB9;
font-weight: normal;
}
.p4 {
margin-bottom: 20px;
}
.clear {
clear: both;
font-size: 0;
height: 0;
line-height: 0;
overflow: hidden;
width: 100%;
}
#slides {
overflow: hidden;
position: relative;
padding-top:40px;
width: 100%;
}
.slides_container {
height: 295px;
overflow: hidden;
width: 950px;
background:trasparent;
border: 0px solid #cccccc;
text-align:center;
/*border-radius: 6px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-webkit-box-shadow: 0 1px 2px rgba(63,38,28, .4);
-moz-box-shadow: 0 1px 2px rgba(63,38,28, .4);
box-shadow: 0 1px 2px rgba(63,38,28, .4);*/
}
.slide {
height: auto;
width: 940px;
}
#content {
overflow: hidden;
width: 100%;
}
</style>
</head>
<body>
<div style="width:100%; background: url('images/striscia_bg.jpg') repeat-x;"><br></div>
<div id="wrapper" >
<div id="header">
<div class="main">
<div class="container_header">
<div class="grid1">
<div class="tel">
<div style="width:220px; float:right; margin-left:0px;"></div>
<div style="font-size:12px; font-weight:bold; margin:0px; float:right;">
</div>
</div>
<div id="menu">
<div class="border-bottom">
<div class="logo">
<img src="images/logo_protos.png" alt="logo_protos" border="0" />
</div>
<div id="nav">
<div id="modulo_menu" style="z-index:-1000; margin-bottom:10px;">
<div style="float:right; margin-top:8px; z-index:-1000;"><img src="images/numero_verde2.png" /></div>
</div>
<div id="" style="z-index: 2;">
<!-- MENU JQUERY -->
<ul id="cssdropdown">
<li class="headlink" style="width:140px;">
<a href="protos.html" class="link_menu">Protos SOA</a>
<ul>
<li><a href="azionisti.html">Azionisti</a></li>
<li><a href="organigramma.html">Organigramma</a></li>
<li><a href="certificazioni.html">Certificazioni</a></li>
<li><a href="codice-etico.html">Codice Etico</a></li>
</ul>
</li>
<li class="headlink">
<a href="protos.html" class="link_menu" style="";">Come Attestarsi</a>
<ul>
<li><a href="normativa.html">Normativa</a></li>
<li><a href="costi.html">Costi</a></li>
<li><a href="categorie-e-classifiche.html" style="">Categorie e Classifiche</a></li>
</ul>
</li>
<li class="headlink" style="width:140px;">
<a href="protos.html" class="link_menu">Le Nostre Sedi</a>
<ul>
<li><a href="sede-roma.html">Roma</a></li>
<li><a href="sede-ravenna.html">Ravenna</a></li>
<li><a href="sede-bari.html">Bari</a></li>
<li><a href="sede-bergamo.html">Bergamo</a></li>
</ul>
</li>
<li class="headlink" style="width:140px;">
<a href="privacy.html" class="link_menu">Privacy</a>
</li>
</ul>
<!-- END MENU JQUERY -->
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div id="slides">
<div class="slides_container">
<div style="overflow:hidden; width:98%; margin: 0px auto; padding:0px;">
<div class="pix_diapo">
<div data-thumb="images/foto3.jpg">
<img src="images/foto3.jpg">
<div class="caption elemHover fromLeft">
This is a simple sliding image with caption. You can have more than one caption and decide the layout of the caption via css.
</div>
</div>
<div data-thumb="images/slide4.jpg">
<img src="images/slide4.jpg">
<div class="caption elemHover fromRight" style="bottom:65px; padding-bottom:5px; color:#ff0; text-transform:uppercase">
Here you can see two captions.
</div>
<div class="caption elemHover fromLeft" style="padding-top:5px;">
The first are loaded immediately before than the second one
</div>
</div>
<div data-thumb="images/slide6.jpg" data-time="7000">
<img src="images/slide6.jpg">
<div class="elemHover caption fromLeft" style="bottom:70px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px;">
You can also get the same effect as the caption with:
</div>
<div class="elemHover button fromTop" data-easing="easeOutExpo" style="left:388px; bottom:78px;">
A button
</div>
<div class="elemHover button button2 fromBottom" data-easing="easeOutExpo" style="left:512px; bottom:78px;">
Or two buttons
</div>
<div class="elemHover fadeIn" style="left:600px; bottom:auto; top:0; padding-top:50px; color:#ff0; font-size:13px; line-height:20px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; background:url(images/demo/arrow_caption.png) no-repeat 230px 30px">
Or any other html element...<br>
and you can decide the transition time of any slide
</div>
</div>
<!--<div data-thumb="images/thumbs/up-official-trailer-fake.jpg">
<iframe width="940" height="470" src="http://www.youtube.com/embed/qas5lWp7_R0?wmode=transparent&autoplay=1" data-fake="images/slides/up-official-trailer-fake.jpg" frameborder="0" allowfullscreen></iframe>
<div class="elemHover caption fromLeft elemToHide" style="bottom: 350px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; left:0">
You can also display videos, but it requires a "fake image"... read the documentation please
</div>
</div>
<!-- <div data-thumb="images/slide2.jpg">
<img src="images/slide2.jpg">-->
</div>
</div><!-- #pix_diapo -->
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div id="content">
<div class="main">
<div id="component">
<h1 style="color:#0071ac; font-size:30px; border-bottom: solid 2px #ccc;">Protos SOA - La Società</h1><br>
<p>
</p>
</div>
<div class="content_article">
<div>
<div class="grid2">
<div class="box1" style="height:430px;">
<div class="indents1">
<h3>Eventi e Congressi</h3>
<a href="#"><img src="images/meeting.jpg" onmouseover="this.src ='images/meeting_hover.jpg';" onmouseout="this.src='images/meeting.jpg';" width="240" height="" alt="avcp" style="" /></a>
<br>
<br>
<div style="height:100px; text-align:justify; text-justify:inter-word; font-family: 'Lato', sans-serif; color:#504f4f; ">
Protos SOA sarà presente al prossimo MADE EXPO (Fiera di Milano-Rho) con un Workshop dal titolo: "Oltre la crisi: nuove opportunità nel settore degli appalti di lavori pubblici".
<!--Entra nell'area <strong>"Eventi e Congressi"</strong> per visualizzare le <strong>gallery</strong> di tutti gli eventi organizzati da <strong>PROTOS SOA</strong>-->
</div><br>
<div><a href="Workshop_MADE EXPO_Milano_Clienti.pdf" target="_blank"> --> Scarica l'invito</a></div>
<div style="text-align:center;">
<a href="Workshop_MADE EXPO_Milano_Clienti.pdf" target="_blank"><img src="images/made_expo.png" onmouseover="this.src ='images/made_expo.png';" onmouseout="this.src='images/made_expo.png';" width="" height="" alt="bottone" style="margin-top: 15px; vertical-align: middle;" /></a>
</div>
</div>
</div>
</div>
<div class="grid2">
<div class="box1" style="height:430px;">
<div class="indents1">
<h3>Comunicazioni AVCP</h3>
<a href="#"><img src="images/avcp.jpg" onmouseover="this.src ='images/avcp_hover.jpg';" onmouseout="this.src='images/avcp.jpg';" width="240" height="" alt="avcp" style="" /></a>
<br>
<br>
<div style="height:100px; text-align:justify; text-justify:inter-word; font-family: 'Lato', sans-serif; color:#504f4f; ">
Consulta le ultime notizie pubblicate sul sito dell'Autorità per la Vigilanza dei lavori pubblici collegandoti direttamente sul sito ufficiale dell'Autorità o cliccando sul link in basso.
</div><br>
<div><a href="http://www.avcp.it/portal/public/classic/" target="_blank"> --> Sito web A.V.C.P.</a></div>
<div style="margin:px;">
<a href="avcp.html"><img src="images/bottone2.jpg" onmouseover="this.src ='images/bottone2_hover.jpg';" onmouseout="this.src='images/bottone2.jpg';" width="240" height="45" alt="bottone" style="margin-top: 15px; vertical-align: middle;" /></a>
</div>
</div>
</div>
</div>
<div class="grid2">
<div class="box1" style="height:430px;">
<div class="indents1">
<h3>Richiedi un preventivo</h3>
<a href="#"><img src="images/contatti.jpg" onmouseover="this.src ='images/contatti_hover.jpg';" onmouseout="this.src='images/contatti.jpg';" width="240" height="" alt="avcp" style="" /></a>
<br>
<br>
<div style="height:100px; text-align:justify; text-justify:inter-word; font-family: 'Lato', sans-serif; color:#504f4f; ">
Compila il form di contatto per richiedere un preventivo completo e immediato. Insirisci le categorie e le classifiche richieste. Un team di esperti ti ricontattaterà al più presto.
</div><br>
<div><a href="newsletter.html" target="_blank"> --> Iscriviti alla newsletter</a></div>
<div style="margin:px;">
<a href="preventivo.html"><img src="images/bottone3.jpg" onmouseover="this.src ='images/bottone3_hover.jpg';" onmouseout="this.src='images/bottone3.jpg';" width="240" height="45" alt="bottone" style="margin-top: 15px; vertical-align: middle;" /></a>
</div>
<br>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div id="aside">
<div class="main_aside">
<div class="container_header">
<div class="grid2" style="width:280px; overflow:hidden;">
<h3 class="h3_padding">News in Evidenza</h3>
<div>
<!-- FADE NEWS SCROLLER -->
<script type="text/javascript">
/***********************************************
* Fading Scroller- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var delay = 4000; //set delay between message change (in miliseconds)
var maxsteps=30; // number of steps to take to change from start color to endcolor
var stepdelay=40; // time in miliseconds of a single step
//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
var startcolor= new Array(255,255,255); // start color (red, green, blue)
var endcolor=new Array(0,0,0); // end color (red, green, blue)
var fcontent=new Array();
begintag='<div style="height:250px; width:275px; font: normal 14px Arial; padding: 10px; padding-right:20px; border:0px;">'; //set opening tag, such as font declarations
fcontent[0]="<b>What\'s new?</b><br>New scripts added to the Scroller category!<br><br>The MoreZone has been updated. <a href='../morezone/index.htm'>Click here to visit</a>";
fcontent[1]="Dynamic Drive has been featured on Jars as a top 5% resource, and About.com as a recommended DHTML destination.";
fcontent[2]="Ok, enough with these pointless messages. You get the idea behind this script.</a>";
closetag='</div>';
var fwidth='275px'; //set scroller width
var fheight='250px'; //set scroller height
var fadelinks=1; //should links inside scroller content also fade like text? 0 for no, 1 for yes.
///No need to edit below this line/////////////////
var ie4=document.all&&!document.getElementById;
var DOM2=document.getElementById;
var faderdelay=0;
var index=0;
/*Rafael Raposo edited function*/
//function to change content
function changecontent(){
if (index>=fcontent.length)
index=0
if (DOM2){
document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
if (fadelinks)
linkcolorchange(1);
colorfade(1, 15);
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
index++
}
// colorfade() partially by Marcio Galli for Netscape Communications. ////////////
// Modified by Dynamicdrive.com
function linkcolorchange(step){
var obj=document.getElementById("fscroller").getElementsByTagName("A");
if (obj.length>0){
for (i=0;i<obj.length;i++)
obj[i].style.color=getstepcolor(step);
}
}
/*Rafael Raposo edited function*/
var fadecounter;
function colorfade(step) {
if(step<=maxsteps) {
document.getElementById("fscroller").style.color=getstepcolor(step);
if (fadelinks)
linkcolorchange(step);
step++;
fadecounter=setTimeout("colorfade("+step+")",stepdelay);
}else{
clearTimeout(fadecounter);
document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")";
setTimeout("changecontent()", delay);
}
}
/*Rafael Raposo's new function*/
function getstepcolor(step) {
var diff
var newcolor=new Array(3);
for(var i=0;i<3;i++) {
diff = (startcolor[i]-endcolor[i]);
if(diff > 0) {
newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
} else {
newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
}
}
return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
}
if (ie4||DOM2)
document.write('<div id="fscroller" style="border:1px solid black;width:'+fwidth+';height:'+fheight+'"></div>');
if (window.addEventListener)
window.addEventListener("load", changecontent, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent)
else if (document.getElementById)
window.onload=changecontent
</script>
<!-- END FADE NEWS SCROLLER -->
</div>
</div>
<div class="grid2" style="width:280px; overflow:hidden;">
<h3 class="h3_padding">Major List</h3>
<div>
</div>
</div>
<div class="grid2" style="float:left; width:280px; margin-left:25px; overflow:hidden;">
<h3 class="h3_padding">Brochure</h3>
<div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div id="footer" style="background: url('images/footer_bg.jpg') no-repeat #170f31;">
<div class="container_header" style="padding-bottom:15px;">
<div class="grid_footer">
<div style="float: left; margin-top:30px;">
<span style="font-size:12px; color:#ffffff; ">Protos Soa S.p.A. - Via Lovanio, n° 6 00198 Roma - P.IVA 06089021007 <br> Copyright © 2012 / Tutti i diritti sono riservati. E’ vietata la riproduzione anche parziale e con qualsiasi strumento</span>
</div>
<div style="width: px; float: right; margin-left:0px;">
<img src="images/logodnv.png" style="width:px; height:px;" />
</div>
</div>
</div>
</div>
</div>
<div style="width:100%; background: url('images/striscia_ft.jpg') repeat-x;"><br></div>
</body>
<script type="text/javascript" >
$(document).ready(function(){
$('li.headlink').hover(
function() { $('ul', this).css('display', 'block'); },
function() { $('ul', this).css('display', 'none'); });
});
</script>
<script type="text/javascript" >
window.onload = function()
{
var lis = document.getElementsByTagName('li');
for(i = 0; i < lis.length; i++)
{
var li = lis[i];
if (li.className == 'headlink')
{
li.onmouseover = function() { this.getElementsByTagName('ul').item(0).style.display = 'block'; }
li.onmouseout = function() { this.getElementsByTagName('ul').item(0).style.display = 'none'; }
}
}
}
</script>
<script>
$(function(){
$('.pix_diapo').diapo();
});
</script>
</html>