confusione con i DIV, abbassare barra del menù
A seguito di questa discussione postata in pubblicità "http://forum.it.altervista.org/pubbl...tml#post717086" che poi si è evoluta in un discorso tecnico mi sono messo al lavoro per corregge alcune cose.
Solo che non sò più come portare la barra del menù sotto l'immagine principale,questo è il risultato.
Codice index dove ho collocato il menù:
Codice PHP:
</head>
<body>
<div id="head" style="position:absolute; width:698px; height:219px; z-index:1; left: 122px; top: 28px; background-image: url(immagini/head.jpg); layer-background-image: url(immagini/head.jpg); border: 1px none #000000;" align="center"> </div>
<div id="Layer3" style="position:absolute; width:692px; height:94px; z-index:5; left: 134px; top: 100px;"><div class="menu">
<ul>
<li><a href="index.php?pagina=chisiamo" class="yellow">Chi siamo</a></li>
<li><a href="http://jalbum.net/browse/user/album/500737/" target="_blank" class="yellow">Foto</a></li>
<li><a href="index.php?pagina=contaclick/download" class="yellow">Download</a>
<li><a href="index.php?pagina=guide" class="yellow">Guide</a>
</li>
<li><a href="index.php?pagina=form-mail" class="yellow">Contatti</a>
</li>
<li><a href="index.php?pagina=emoartebay" class="yellow">Aste su Ebay</a>
</div>
<!-- Fine barra orizontale--></div>
<div id="Layer1" style="position:absolute; width:144px; height:835px; z-index:2; left: 122px; top: 249px; background-color: #FF9966; layer-background-color: #FF9966; border: 1px none #000000;">
<?php
include ('menu.htm');
?>
</div>
<div id="corpo" style="position:absolute; width:418px; height:835px; z-index:3; top: 249px; left: 268px; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000;">
<?php ......
mentre questo è il css a cui fà riferimento (la barra l'ho scaricata da un sito), gli altri colori attualmente non li stò usando.
Codice:
/*nuovo menu orizontale*/
.menu{
margin:0;
padding:0;
}
.menu ul{
padding:0;
margin:0;
}
.menu li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
}
.menu li a{
width:100px;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
font-weight: bold;
font-size: 12px;
}
.menu a:hover{
background-position: bottom center;
}
.menu ul ul{
position: absolute;
top: 30px;
width: 120px;
visibility: hidden;
}
.menu ul li:hover ul{
visibility:visible;
}
a.green{
background: url(img/green.jpg) no-repeat top center;
color: #006600;
}
a.orange{
background: url(img/orange.jpg) no-repeat top center;
color: #CC3300;
}
a.blu{
background: url(img/blu.jpg) no-repeat top center;
color: #006699;
}
a.yellow{
background: url(img/yellow.jpg) no-repeat top center;
color: #FF9900;
}
a.purple{
background: url(img/purple.jpg) no-repeat top center;
color: #990066;
}
/* fine nuovo menu orizontale*/
