I'm pretty sure that the whole point is that the kwicks are evenly
distributed. You can't have multiple widths.
andy
-----Original Message-----
From:
jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] On
Behalf Of jesusbet
Sent: Friday, December 05, 2008 1:17 PM
To: jQuery (English)
Subject: [jQuery] multiple width kwicks
Hi.
I'm implementing this effect for a project:
http://www.jeremymartin.name/projects.php?project=kwicksThe 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=2As 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!