positionnement du menu effet dock
positionnement du menu effet dock - HTML/CSS - Programmation
Sujets relatifs:
- Problème de menu en cascade avec Firefox
- controler le positionnement d'une puce li avec css
- Effet pour un lien image
- [VB] Menu dynamique
- Probleme de menu
- problème bête de positionnement de div
- liste menu associé a un panier
- [wxPython] Pop-up menu
- [Règlé] Son d'un menu Flash
- Intégrer un effet de scriptaculous.js dans Ajax.Updater
Marsh Posté le 09-11-2007 à 23:02:55
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%;
}