Bonsoir à tous,
Je fais une nouvelle fois appelle à vos lumières.
Je travail sur un menu avec un effet dock que je souhaite voir se positionner en bas de l'écran. Jusque là tout va bien sauf que lorsque le texte va plus loin que l'écran, le menu reste figé et ne descend pas. Le but est que le menu se place seul et systèmatiquement en bas de page.
Alors merci à tous ceux et toutes celles qui pourront m'aider à comprendre le problème.
Donc, voici le code de ma page
<!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=iso-8859-1" />
<title>test menu dock</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]-->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--bottom dock -->
<div class="dock" id="dock2">
<div class="dock-container2">
<a class="dock-item2" href="#"><span>1</span><img src="images/1.gif" alt="1" /></a>
<a class="dock-item2" href="#"><span>2</span><img src="images/2.gif" alt="2" /></a>
<a class="dock-item2" href="#"><span>3</span><img src="images/3.gif" alt="3" /></a>
<a class="dock-item2" href="#"><span>4</span><img src="images/4.gif" alt="4" /></a> </div>
</div>
<p>
<!--dock menu JS options -->
</p>
<p> </p>
<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>
</body>
</html>
Et voici la feuille de style css
/* dock2 - bottom */
#dock2 {
width: 100%;
bottom: 0;
position: absolute;
left: 0;
}
.dock-container2 {
position: absolute;
height: 50px;
padding-left: 20px;
}
a.dock-item2 {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
width: 40px;
color: #FFFFFF;
bottom: 0;
position: absolute;
text-align: center;
text-decoration: none;
}
.dock-item2 span {
display: none;
position: absolute;
}
.dock-item2 img {
border: none;
margin: 5px auto 0 auto;
width: 100%;
}
