Ciao a tutti... in queste pagine ho inserito il menu stile mac
http://punkrosteeny.altervista.org/blog2/elenco.php
volevo sapere come impostare la posizione correttamente (siccome su firefox e safari si vede più o meno nello stesso punto, invece in internet explorer è nettamente più alto)
il pezzo html è:
Codice PHP:
<h1> </h1>
<div class="dock" id="dock2">
<div class="dock-container2">
<a class="dock-item2" href="#.php"><span>Home</span><img src="images/home.png" alt="home" /></a>
<a class="dock-item2" href="#"><span>Contattaci</span><img src="images/email.png" alt="contact" /></a>
<a class="dock-item2" href="#"><span>Segnala Bug</span><img src="images/idea.png" alt="portfolio" /></a>
<a class="dock-item2" href="http://punkrosteeny.altervista.org/blog2/forum/"><span>Forum</span><img src="images/kig.png" alt="portfolio" /></a>
<a class="dock-item2" href="http://punkrosteeny.altervista.org/blog2/login.php"><span>Login</span><img src="images/login.png" alt="video" /></a>
<a class="dock-item2" href="http://punkrosteeny.altervista.org/blog2/elenco.php"><span>Elenco Soci</span><img src="images/portfolio.png" alt="video" /></a>
<a class="dock-item2" href="http://punkrosteeny.altervista.org/blog2/admin.php"><span>Admin</span><img src="images/link.png" alt="video" /></a>
</div>
</div>
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>
il pezzo css su cui si basa è:
Codice PHP:
/* dock - top */
.dock {
/*position: relative; */
height: 50px;
text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
/*background: url(images/dock-bg2.gif);*/
padding-left: 20px;
}
a.dock-item {
display: block;
width: 40px;
color: #000;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
.dock-item span {
display: none;
padding-left: 20px;
}
/* dock2 - bottom */
#dock2 {
width: 100%;
bottom: 200px’;
position: relative;
left: 0px;
}
.dock-container2 {
position: absolute;
height: 50px;
/* background: url(images/dock-bg.gif);*/
padding-left: 20px;
}
a.dock-item2 {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
width: 40px;
color: #000;
bottom: 0px;
position: absolute;
text-align: center;
text-decoration: none;
}
.dock-item2 span {
display: none;
padding-left: 20px;
}
.dock-item2 img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
volevo venisse centrato nella tabella che ha larghezza 800px, e ad un'altezza di 200px... mi date una mano? già cosi non è male in ogni caso..
ringrazio in anticipo