Hi All,
I also have a problem with kwicks on the main page. They don't slide open, just stay closed. As Im not familiar with this and I can't find a solution on the internet, can anyone help me please?
HTML FILE
____________________________________
<div class="main-bg">
<div class="main">
<!-- content -->
<section id="content">
<div class="main-2 ident-bot-11">
<div class="wrapper ident-bot-3">
<div class="fl-l ident-right-2">
<ul class="kwicks horizontal" >
<li id="kwick_1">
<div class="kwick-box-1">
<div class="kwick-bg-1">
<div class="fl-l">
<p class="kwick-slogan-1">hope</p>
<p class="kwick-slogan-2">for peace</p>
</div>
<a href="#">more info</a>
<div class="clear"></div>
</div>
</div>
<li id="kwick_2">
<div class="kwick-box-1">
<div class="kwick-bg-2">
<div class="fl-l">
<p class="kwick-slogan-1">save</p>
<p class="kwick-slogan-2">the earth</p>
</div>
<a href="#">more info</a>
<div class="clear"></div>
</div>
</div>
<li id="kwick_3">
<div class="kwick-box-1">
<div class="kwick-bg-3">
<div class="fl-l">
<p class="kwick-slogan-1">help</p>
<p class="kwick-slogan-2">those in need</p>
</div>
<a href="#">more info</a>
<div class="clear"></div>
</div>
</div>
</div>CSS FILE
________________________________
.kwicks {
/* recommended styles for kwicks ul container */
list-style: none;
position: relative;
margin-top: 20px;
padding: 0;
}
.kwicks li{
/* these are required, but the values are up to you (must be pixel) */
width: 209px;
height: 515px;
/*do not change these */
display: block;
overflow: hidden;
padding: 0; /* if you need padding, do so with an inner div (or implement your own box-model hack) */
}
.kwicks.horizontal li {
/* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */
float: left;
border-left: 1px solid #fff;
}
.kwicks.horizontal li:first-child {
border-left: none;
}
#kwick_1 {
background: url('../images/kwick-slide-1.png') no-repeat;
}
#kwick_2 {
background: url('../images/kwick-slide-2.png') no-repeat;
}
#kwick_3 {
background: url('../images/kwick-slide-3.png') no-repeat;
}
.kwick-box-1 {
position:absolute;
left:0;
bottom: 0;
width: 629px;
color:#fafafa;
text-transform: uppercase;
}
.kwick-bg-1 {
background: #ff5241;
padding: 16px 0 27px 0;
}
.kwick-bg-2 {
background: #ededeb;
padding: 16px 0 27px 0;
}
.kwick-bg-3 {
background: url('../images/main-bg.jpg');
padding: 16px 0 27px 0;
}
.kwick-slogan-1 {
font: 70px/84px 'Francois One', sans-serif;
letter-spacing: -1px;
padding-left: 19px;
}
.kwick-slogan-2 {
font: 23px/28px 'Oswald', sans-serif;
letter-spacing: -1px;
margin-top: -15px;
padding-left: 23px;
}
.kwiks-button {
font: 25px/56px 'Francois One', sans-serif;
color:#fff;
text-transform: uppercase;
letter-spacing: -1px;
padding: 0 20px;
background: url('../images/kwiks-button.png');
margin-top: 26px;
margin-right:39px;
}
.kwiks-button:hover {
color:#504257;
}I also have additional javascript files, just let me know if you also need to check out these ones. Thanks a lot!
