[jQuery] multiple width kwicks

[jQuery] multiple width kwicks


Hi.
I'm implementing this effect for a project:
http://www.jeremymartin.name/projects.php?project=kwicks
The problem is that I'm trying to apply the same effect but using
different width buttons, I mean, the first button is 88px width, the
second 100px, the third 75px and so on...
I tryed defining the widths in the CSS but didn't work, the effect
cuts in 700px even if I defined a 960px container, got this CSS:
* defaults for all examples */
.kwicks {
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0;
    width: 690px;
}
.kwicks li{
    display: block;
    overflow: hidden;
    padding: 0;
/*    cursor: pointer; */
    float: left;
    width: 130px; /* */
    height: 50px;
    margin-right: 0px;
}
.kwicks li a {
    display: block;
    height: 50px;
}
#it1 {
    background: url(../img/nav/home.jpg) no-repeat;
}
#it1.active {
    background-color: #86e6bb;
}
#it2 {
    background: url(../img/nav/about.jpg) no-repeat;
}
#it2.active {
    background: url(../img/nav/about_selected.jpg) no-repeat;
}
#it3 {
    background: url(../img/nav/procedures.jpg) no-repeat;
}
#it3.active {
    background-color: #f5979b;
}
#it4 {
    background: url(../img/nav/treatments.jpg) no-repeat;
}
#it4.active {
    background-color: #efaffa;
}
#it5 {
    background: url(../img/nav/facilities.jpg) no-repeat;
}
#it5.active {
    background-color: #86e6bb;
}
#it6 {
    background: url(../img/nav/packages.jpg) no-repeat;
}
#it6.active {
    background-color: #8d9cdc;
}
#it7 {
    background: url(../img/nav/photogallery.jpg) no-repeat;
}
#it7.active {
    background-color: #f5979b;
}
#it8 {
     background: url(../img/nav/testimonials.jpg) no-repeat;
}
#it8.active {
    background-color: #efaffa;
}
and the js I'm using is in the example 2: http://www.jeremymartin.name/examples/kwicks.php?example=2
As I said, I tried adding the width: 100px; property to each #it (<li
id="it1"></li>, <li id="it2"></li>, <li id="it3"></li> and so on) but
didn't work.
Is there a way to do that effect in different width buttons or I have
to change my design and make all buttons the same width?
Thank you very much!





















































































    • Topic Participants

    • lists