Re: menu dock & png sous ie 6.
Publié par marcetmaud le 1193582544
pour info :
dans le style.css :
Citation :
dans le theme.html :
Citation :
et efin dans le globalnav.html :Citation :
A+
dans le style.css :
Citation :
/* dock - top */
.dock {
position: relative;
top: 130px;
height: 150px;
text-align: center;
background-repeat: repeat-x;
}
.dock-container {
position: absolute;
height: 150px;
background: url(images/dock-bg2.gif);
padding-left: 20px;
}
a.dock-item {
display: block;
width: 140px;
color: #cfdde6;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 34px Arial, Helvetica, sans-serif;
}
.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
.dock-item span {
display: none;
padding-left: 20px;
}
dans le theme.html :
Citation :
<head>
<!-- pour la transparence des images au format png sous ie -->
<!--[if lt IE 6]>
<script type="text/javascript">
var WEBFX_PNG_PATTERN=".*.png";
var WEBFX_PNG_BLANK = "<{xoImgUrl /jseffects/img/blank.gif}>";
</script>
<style type="text/css">
img { behavior: url(<{xoImgUrl /jseffects/pngbehavior.htc}>); }
</style>
<![endif]-->
<script type="text/javascript" src="<{xoAppUrl /jseffects/jquery.js}>" ></script>
<script type="text/javascript" src="<{xoAppUrl /jseffects/interface.js}>" ></script>
</head>
<body>
<{includeq file="$theme_name/globalnav.html"}>
</body>
<div id="xo-canvas"<{if $columns_layout}> class="<{$columns_layout}>"<{/if}>>
<div id="xo-header"><{includeq file="$theme_name/globalnav.html"}>
</div>
et efin dans le globalnav.html :Citation :
<!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>CSS Mac Dock</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<{xoAppUrl /jseffects/jquery.js}>" </script>
<script type="text/javascript" src="<{xoAppUrl /jseffects/interface.js}>" </script>
</head>
<body>
<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="<{xoAppUrl /index.php}>"><img src="<{xoAppUrl /images/s.png}>" alt="home" /><span>Accueil</span></a>
<a class="dock-item" href="#"><img src="<{xoAppUrl /images/a.png}>" alt="home" /><span>Agenda</span></a>
<a class="dock-item" href="#"><img src="<{xoAppUrl /images/i.png}>" alt="home" /><span>Articles</span></a>
<a class="dock-item" href="#"><img src="<{xoAppUrl /images/n.png}>" alt="home" /><span>exemple</span></a>
<a class="dock-item" href="#"><img src="<{xoAppUrl /images/t.png}>" alt="home" /><span>Le Sport</span></a>
<a class="dock-item" href="#"><img src="<{xoAppUrl /images/esp.png}>" alt="home" /><span>exemple</span></a>
<a class="dock-item" href="#"><img src="<{xoAppUrl /images/f.png}>" alt="home" /><span>exemple</span></a>
<a class="dock-item" href="#"><img src="<{xoAppUrl /images/a.png}>" alt="home" /><span>exemple</span></a>
<a class="dock-item" href="#"><img src="<{xoAppUrl /images/u.png}>" alt="home" /><span>exemple</span></a>
<a class="dock-item" href="#"><img src="<{xoAppUrl /images/s.png}>" alt="home" /><span>exemple</span></a>
<a class="dock-item" href="#"><img src="<{xoAppUrl /images/t.png}>" alt="home" /><span>exemple</span></a>
<a class="dock-item" href="#"><img src="<{xoAppUrl /images/esp.png}>" alt="home" /><span>exemple</span></a>
<a class="dock-item" href="#"><img src="<{xoAppUrl /images/i.png}>" alt="home" /><span>exemple</span></a>
<a class="dock-item" href="#"><img src="<{xoAppUrl /images/n.png}>" alt="home" /><span>exemple</span></a>
<a class="dock-item" href="#"><img src="<{xoAppUrl /images/f.png}>" alt="home" /><span>exemple</span></a>
<a class="dock-item" href="#"><img src="<{xoAppUrl /images/o.png}>" alt="home" /><span>exemple</span></a>
</div>
</div>
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 120,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);
</script>
</body>
</html>
A+
Cette contribution était de : https://www.frxoops.org/newbb/viewtopic.php?topic_id=23959&post_id=140572