Bonjour,
Voila je fais des tests sur ma page et je n'arrive pas a comprendre pourquoi il y a un espacement entre le carré rose et le carré violet ?
je vous met un petit lien, c'est toujours mieux.
une idée?
Voila je fais des tests sur ma page et je n'arrive pas a comprendre pourquoi il y a un espacement entre le carré rose et le carré violet ?
je vous met un petit lien, c'est toujours mieux.
<body>
<div>
<ul id="menu">
<li><a href="www.google.com" class="news"><span></span></a></li>
<li><a href="#" class="portfolio"><span></span></a></li>
<li><a href="#" class="services"><span></span></a></li>
<li><a href="#" class="contact"><span></span></a></li>
</ul>
</div>
<div>
<ul class="kwicks horizontal" >
<li id="kwick_1"></li>
<li id="kwick_2"></li>
<li id="kwick_3"></li>
<li id="kwick_4"></li>
</ul>
</div>
</body>
body{
background:#211205;
margin:auto;
width:980px;
}
#menu{
padding-left:304px;}
ul#menu{
background:url(fond_menu.png) no-repeat center;
height:36px;
list-style:none;}
ul#menu li {
float:left;
}
ul#menu li a {
background:url(onglets.png) no-repeat scroll top left;
height:36px;
display:block;
position:relative;
}
ul#menu li a.news {
width:89px;
}
ul#menu li a.portfolio {
width:87px;
background-position:-89px 0px;
}
ul#menu li a.services {
width:87px;
background-position:-176px 0px;
}
ul#menu li a.contact {
width:87px;
background-position:-263px 0px;
}
ul#menu li a span {
background:url(onglets.png) no-repeat scroll bottom left;
display:block;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:100;
}
ul#menu li a.news span {
background-position:0px -36px;
}
ul#menu li a.portfolio span {
background-position:-89px -36px;
}
ul#menu li a.services span {
background-position:-176px -36px;
}
ul#menu li a.contact span {
background-position:-263px -36px;
}
A:active {
outline: none
}
a:focus {
-moz-outline-style: none;
}
.kwicks {
list-style: none;
}
.kwicks li{
width: 125px;
height: 100px;
display: block;
overflow: hidden;
padding: 0;
}
.kwicks.horizontal li {
float: left;
}
#kwick_1 {
background-color: #53b388;
}
#kwick_2 {
background-color: #5a69a9;
}
#kwick_3 {
background-color: #c26468;
}
#kwick_4 {
background-color: #bf7cc7;
}
.kwicks.horizontal #kwick_4 {
margin-right: none;
}
.kwicks.vertical #kwick_4 {
margin-bottom: none;
}
$(function() {
// set opacity to nill on page load
$("ul#menu span").css("opacity","0");
// on mouse over
$("ul#menu span").hover(function () {
// animate opacity to full
$(this).stop().animate({
opacity: 1
}, 'slow');
},
// on mouse out
function () {
// animate opacity to nill
$(this).stop().animate({
opacity: 0
}, 'slow');
});
});
une idée?
