I am using this code for transition between my HTML pages and it works just fine:
http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
But there is tiny issue that I cannot resolve and that is the blank white background shown between fade in and fade out transitions.
basically when the page is faded out and the code is trying to the load the next page, there is a slight delay (almost 1 seconds) and in that 1 second gap a blank white screen is shown. I know that I have to use some CSS and i added this to my HTML css code:
html{
font-size: 100%;
background-color:#000;
}
but when i do that, a black line is shown on the loaded page for some strange reason!
is there anyway to eliminate the 1 second delay or eliminate the black line on the page as i really don't know what is causing the issue?
Here is my Entire CSS code:
<style type="text/css" media="screen">
html{
font-size: 100%;
background-color:#000;
}
#maximage {
/* position:fixed !important;*/
}
#container{
overflow:hidden;
}
#footer{
color:#FFF;
text-align:left;
}
/*Set my logo in bottom left*/
#logo {
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
#txt1 {
top:55%;
height:auto;
left:5%;
position:absolute;
width:55%;
z-index:1000;
color:#FFF;
font-size:100%;
font-family:Verdana, Geneva, sans-serif;
}
#txt2 {
top:59%;
height:auto;
left:5%;
width:55%;
z-index:1000;
color:#cf0226;
font-size:100%;
font-family:Verdana, Geneva, sans-serif;
position:absolute;
}
#txt3 {
top:63%;
height:auto;
left:5%;
width:55%;
z-index:1000;
color:#cf0226;
font-size:100%;
font-family:Verdana, Geneva, sans-serif;
position:absolute;
}
#txt4{
top:22%;
height:auto;
left:3%;
width:55%;
z-index:1000;
color:#cf0226;
font-size:100%;
font-family:Verdana, Geneva, sans-serif;
position:absolute;
margin-top:4%;
float:left;
}
#txt5{
height:auto;
width:100%;
z-index:1000;
color:#fff;
font-size:4%;
font-family:Verdana, Geneva, sans-serif;
position:absolute;
text-align:center;
}
#logo img {
width:69%;
}
body {
background-color:#000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font: 16px/1.8 sans-serif;
font-family:Verdana, Geneva, sans-serif;
}
#preloader{
position:absolute;
top: 45%;
left: 75%;
width:278px;
height: 105px;
margin-top: -45px;
margin-left: -210px;
z-index:1000;
}
#wait{
position:absolute;
top: 37%;
left: 45%;
width:300px;
height: 113px;
margin-top: -45px;
margin-left: -120px;
z-index:1000;
}
h1 {
text-align: left;
color:#fff;
font: 16px/1 "Verdana, Geneva, sans-serif";
display: inline-block;
width: 100%;
font-family:Verdana, Geneva, sans-serif;
}
#wrap {
position: relative;
width: 39%;
margin: 0 auto;
height:50%;
overflow: hidden;
}
#navigation{
margin-left:2%;
margin-top:2%;
}
#home{
width:10%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
}
#products{
width:10%;
margin-bottom:0.5%;
text-align:center;
}
a:link { text-decoration:none;} /* unvisited link */
a:visited { text-decoration:none;} /* visited link */
a:hover {
text-decoration:none;
} /* mouse over link */
a:active { text-decoration:none;} /* selected link */
#div101:hover{
border:thin;
border:#FFF;
background-color:#FFF;
color:#000;
background: rgba(FFF, 0, 0, 0.6);
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
padding: 20px;
border-radius: 15px;
/* HOVER ON */
-webkit-transition: border-radius 2s;
transition:all 2s ease-in-out;
perspective: 800px;
}
#div102:hover{
border:thin;
border:#FFF;
background-color:#FFF;
color:#000;
background: rgba(FFF, 0, 0, 0.6);
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
/* Landscape */
#media screen and (orientation:landscape) {
#logo{
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
#preloader{
position:absolute;
top: 45%;
left: 55%;
width:278px;
height: 105px;
margin-top: -45px;
margin-left: -210px;
z-index:1000;
}
}
#media screen and (max-width: 600px) , screen and (max-height: 700px) {
#logo {
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
}
#media screen and (max-width: 4000px) , screen and (max-height: 2000px) {
#logo {
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
}
#media only screen and (min-width : 321px) {
#logo {
top:2%;
height:auto;
left:60%;
position:absolute;
width:38%;
z-index:1000;
}
}
#media only screen and (max-width : 321px) {
#footer {
font-size:10px;
text-align: left;
margin-left:10%;
margin-bottom:5%;
font-family:Verdana, Geneva, sans-serif;
width:42%;
}
#home{
width:35%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#products{
width:35%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
font-weight:bold;
color:#fff;
border:#666;
border:2px solid;
}
#vodka{
background-color:#C0C0C0;
width:35%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#contact{
width:35%;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#div101:hover{
border:thin;
border:#FFF;
background-color:#FFF;
color:#000;
background: rgba(FFF, 0, 0, 0.6);
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
padding: 5px;
border-radius: 5px;
/* HOVER ON */
-webkit-transition: border-radius 1s;
transition:all 1s ease-in-out;
perspective: 800px;
}
}
#media only screen and (min-width : 321px) {
#footer {
font-size:13px;
text-align:left;
margin-left:5%;
margin-bottom:10%;
font-family:Verdana, Geneva, sans-serif;
width:30%;
}
#home{
width:145px;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#products{
width:145px;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#vodka{
background-color:#C0C0C0;
width:145px;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
#contact{
width:145px;
margin-bottom:0.5%;
text-align:center;
font-size:12px;
border-radius:2px;
color:#fff;
border:#666;
border:2px solid;
}
.rotate{
cursor:pointer;
}
.rotate:hover
{
background-color:#da2128;
}
}
#keyframes filleffect
{
from {width:0;}
to {width: 400px;}
}
#-webkit-keyframes filleffect /* Safari and Chrome */
{
from {width:0;}
to {width: 400px;}
}
</style>
I suspect the reason you are getting a black line is because your html tag contains no content in between page transitions, so what you are seeing is in fact the dark background of a very narrow page. Try adding height: 100%; min-height: 100% to your html tag to force the page to be full height.
Related
So I've got this button, and it looks just fine in Chrome, but load it in Firefox and it's TOTALLY different. I've tried adding prefixes and it doesn't seem to change anything.
var checkbox = document.getElementById("cb4");
checkbox.indeterminate = true;
body
{
font-family:arial;
}
.flipswitch
{
position: relative;
background: white;
width: 120px;
height: 40px;
-webkit-appearance: initial;
border-radius: 3px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline:none;
font-size: 14px;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
cursor:pointer;
border:1px solid #ddd;
}
.flipswitch:indeterminate:after
{
position:absolute;
top:5%;
display:block;
line-height:32px;
width:45%;
height:90%;
box-sizing:border-box;
text-align:center;
color:black;
border:#888 1px solid;
border-radius:3px;
}
.flipswitch:not(:indeterminate):after
{
position:absolute;
top:5%;
display:block;
line-height:32px;
width:45%;
height:90%;
box-sizing:border-box;
text-align:center;
transition: all 0.3s ease-in 0s;
color:black;
border:#888 1px solid;
border-radius:3px;
}
.flipswitch:indeterminate:after
{
left:30%;
content:"???";
background:grey;
}
.flipswitch:not(:indeterminate):after
{
left:2%;
content: "OFF";
background:#f00;
}
.flipswitch:not(:indeterminate):checked:after
{
left:53%;
content: "ON";
background:#0f0;
}
<!--Marketing Emails -->
<div class="form-row">
<h4>Do you wish to receive Marketing Emails</h4>
<p>Emails reminding you to keep your account updated, and to continue your job search with redacted</p>
<div>
<input type="checkbox" id="cb4" class="flipswitch" name="marketing"/>
<span></span>
</div>
</div>
It is meant to display as it does in Chrome.
Any advice would be appreciated - if I find anything new I'll make an edit.
Cheers all.
You just need to add the -moz-appearance: initial; for Firefox.
var checkbox = document.getElementById("cb4");
checkbox.indeterminate = true;
body
{
font-family:arial;
}
.flipswitch
{
position: relative;
background: white;
width: 120px;
height: 40px;
-webkit-appearance: initial;
-moz-appearance: initial;
border-radius: 3px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline:none;
font-size: 14px;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
cursor:pointer;
border:1px solid #ddd;
}
.flipswitch:indeterminate:after
{
position:absolute;
top:5%;
display:block;
line-height:32px;
width:45%;
height:90%;
box-sizing:border-box;
text-align:center;
color:black;
border:#888 1px solid;
border-radius:3px;
}
.flipswitch:not(:indeterminate):after
{
position:absolute;
top:5%;
display:block;
line-height:32px;
width:45%;
height:90%;
box-sizing:border-box;
text-align:center;
transition: all 0.3s ease-in 0s;
color:black;
border:#888 1px solid;
border-radius:3px;
}
.flipswitch:indeterminate:after
{
left:30%;
content:"???";
background:grey;
}
.flipswitch:not(:indeterminate):after
{
left:2%;
content: "OFF";
background:#f00;
}
.flipswitch:not(:indeterminate):checked:after
{
left:53%;
content: "ON";
background:#0f0;
}
<!--Marketing Emails -->
<div class="form-row">
<h4>Do you wish to receive Marketing Emails</h4>
<p>Emails reminding you to keep your account updated, and to continue your job search with redacted</p>
<div>
<input type="checkbox" id="cb4" class="flipswitch" name="marketing"/>
<span></span>
</div>
</div>
I have created a small call back popup on the footer
http://bit.ly/1MThJ5w
The problem is when I click the text box it disappeared. I don't know how to stop that. Does anyone has any ideas on how to fix this? Thanks.
It should only close and open when I click- CALL BACK
And also the close and open arrows are not showing as well
My code snippet:
<script type="text/javascript">
$(document).ready(function() {
$('.foot').click(function() {
if($('.foot').hasClass('slide-up')) {
$('.foot').addClass('slide-down', 1000);
$('.foot').removeClass('slide-up');
} else {
$('.foot').removeClass('slide-down');
$('.foot').addClass('slide-up', 1000);
}
});
});
CSS CODE:
/*Contact Styles
------------------------------------*/
.contact{
width:28%;
float:left;
padding-left:20px;
background:#001832;
color:#FFFFFF;
padding-top:15px;
padding-bottom:12px;
}
.contact h2{
font-size:27px;
font-family:impact;
font-weight:500;
color:#fff;
}
.contact form{
margin-top:6px;
}
.contact label{
font-size:10px;
}
.contact input{
width:210px;
color:#666;
}
.contact a{
text-decoration:none;
text-align: center;
background: none repeat scroll 0% 0% #0060A3;
color: #FFF;
display: inline-block;
padding: 12px 37px;
margin-top: 5px;
font-family: arial;
font-weight: 700;
margin-bottom:15px;
}
.contact .btn{
text-decoration:none;
text-align: center;
background: #0060A3;
color: #FFF;
display: inline-block;
padding: 10px 20px;
margin-top: 5px;
font-family: arial;
font-weight: 700;
margin-bottom:15px;
font-size:20px;
border-radius:0;
-webkit-border-radius:0;
-moz-border-radius:0;
}
/*Slider footer*/
.foot {
position:fixed;
width: 300px;
z-index: 10000;
text-align:center;
height: 500px;
font-size:18px;
color: #000;
display: flex;
justify-content: center; /* align horizontal */
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
bottom: -185px;
}
.slide-up
{
bottom: -445px !important;
}
.slide-down
{
bottom: -185px !important;
}
.call_back{
background:#405E51;
padding:10px;
margin-bottom:10px !important;
color:#fff;
}
#closer{
background:none;
width:10px;
margin-top: -25px;
margin-right: 15px;
float:right;
}
#closer{
background:none;
width:10px;
margin-top: -25px;
margin-right: 15px;
float:right;
}
Your click event is bound to the wrong element. Change it to the "call_back" class instead.
Change this:
$('.foot').click(function() {
// your code
});
To this:
$('.call_back').click(function() {
// your code
});
I have a simple page. What I want to do is when I make the width smaller, I would like the "middle" div to be on top of the "left" div. Right now, the middle div is second as it should be, but I'm wondering how I would make it so that the middle div goes on top of the left div.
http://jsfiddle.net/nynou9mr/
div{
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size:60px;
}
body{
margin:0;padding:0;
}
#header{
height:100px;
width:100%;
background:purple;
text-align:center;
position:relative;
}
.wrap{
width:100%;
text-align:center;
background:blue;
overflow:hidden;
white-space:nowrap;
}
#left{
display: inline-block;
margin-top:10px;
height:500px;
width:300px;
background:red;
}
#middle{
display: inline-block;
margin-top:10px;
margin-left:10px;
height:500px;
width:1570px;
background:gray;
}
#media (max-width:1320px){
#left{
width:800px;
height:200px;
margin:20px auto;display:block;
}
#middle{
width:800px;
}
#bottom{
margin-top:100px;
}
}
#media (max-width:1625px){
#right{
width:100%;
height:300px;
}
}
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=For Footer */
* {
padding: 0;
}
html, body {
height: 100%;
padding:0;
}
.forfooter{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
}
#bottom{
/*position:absolute;
bottom:0;
width:100%;*/
height:100px;
background:orange;
}
.push{
height:0px;
margin-top:-100px;
}
<title>First Responsiveness</title>
</head>
<body>
<div class="forfooter">
<div id="header">Header</div>
<div class="wrap">
<div id="left">left</div>
<div id="middle">Middle</div>
</div>
<div class="push"></div>
</div>
<div class="push"></div>
<div id="bottom">Bottom</div>
Depending on what browser support you need.
flexbox makes this easy.
.wrap {
width: 80%;
margin: 10px auto;
border: 1px solid grey;
display: flex;
flex-direction: column;
padding: 25px;
}
#left,
#middle {
height: 50px;
line-height: 50px;
text-align: center;
order: 1;
}
#left {
background: #bada55;
}
#middle {
background: #663399;
color: white;
}
#media screen and (max-width: 760px) {
#middle {
order: 0;
}
}
<div class="wrap">
<div id="left">left</div>
<div id="middle">Middle</div>
</div>
Codepen Demo
Check this out: http://jsfiddle.net/e42q63w5/1/
The trick is to have div#middle before div#left in your html and control the position with float: left | right
div{
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size:60px;
}
body{
margin:0;padding:0;
}
#header{
height:100px;
width:100%;
background:purple;
text-align:center;
position:relative;
}
.wrap{
width:100%;
text-align:center;
background:blue;
overflow:hidden;
white-space:nowrap;
}
#left{
float: left
display: inline-block;
margin-top:10px;
height:500px;
width:20%;
background:red;
}
#middle{
float: right;
display: inline-block;
margin-top:10px;
margin-left:10px;
height:500px;
width:75%;
background:gray;
}
#media (max-width:1320px){
#left{
float: none;
width:800px;
height:200px;
margin:20px auto;
display:block;
}
#middle{
float: none;
width:800px;
}
#bottom{
margin-top:100px;
}
}
#media (max-width:1625px){
#right{
width:100%;
height:300px;
}
}
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=For Footer */
* {
padding: 0;
}
html, body {
height: 100%;
padding:0;
}
.forfooter{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
}
#bottom{
/*position:absolute;
bottom:0;
width:100%;*/
height:100px;
background:orange;
}
.push{
height:0px;
margin-top:-100px;
}
<div class="forfooter">
<div id="header">Header</div>
<div class="wrap">
<div id="middle">Middle</div>
<div id="left">left</div>
</div>
<div class="push"></div>
</div>
<div class="push"></div>
<div id="bottom">Bottom</div>
</div>
I have a div set up on my page that has an overlay appear on it when the user hovers over the div. On other websites, for example on here: http://www.elpassion.com have a really nice effect that also eases the background of the div behind. I cannot seem to get this to work as effectively as i have seen and was looking for some support and guidance.
https://jsfiddle.net/Lopcnsuq/
HTML
<div class="portfolio-project">
<div class="portfolio-project-image">
<ul class="portfolio-project-image">
<li>
<div class="portfolio-project-image-one"></div>
<a href="images/flyer_mock_up.jpg" class="html5lightbox" data-width="853" data-height="480" title="">
<div class="portfolio-overlay">
<div class="bt4">Marks & Spencer</div>
<div class="bt5">Summer Fete A5 Flyers</div>
</div>
</a>
</li>
</ul>
</div>
</div>
CSS
.portfolio-project {
width: 32%;
height: 373px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
margin-left:15px;
float:left;
}
.portfolio-project-image{
width: 100%;
height: 373px;
}
.portfolio-project-image-one{
width: 100%;
height: 373px;
background-image:url(../images/flyer_mock_up.jpg);
background-position:center;
}
.portfolio-project-image-one:hover{
width: 100%;
height: 373px;
background-image:url(../images/flyer_mock_up.jpg);
background-position:center;
display:block;
}
.portfolio-overlay {
width:100%;
height:100%;
opacity: 0.75;
position:absolute;
background-color:black;
transition: top 0.3s ease-in-out;
display:block;
-webkit-transition: top 0.3s ease-in-out;
transition: top 0.3s ease-in-out;
}
.portfolio-overlay div {
position:relative;
display:inline-block;;
}
ul.portfolio-project-image {
list-style: none;
width:100%
}
ul.portfolio-project-image li {
position: relative;
display: inline-block;
width:100%;
height: 100%;
overflow: hidden;
transition: 2s;
-moz-transition: 2s;
-webkit-transition: 2s;
}
li:hover .portfolio-overlay {
top: 0;
display:block;
transition: 2s;
-moz-transition: 2s;
-webkit-transition: 2s;}
.bt4 {
text-align: center;
margin-top: 160px;
font: 200 12px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
font-size: 14px;
font-weight: 500;
color:#FFF;
width:100%;
height:10px;
margin-left:auto;
margin-right:auto;
}
.bt5 {
text-align: center;
font: 100 14px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
font-size: 16px;
font-weight: 200;
color:#FFF;
width:100%;
height:10px;
margin-left:auto;
margin-right:auto;
margin-top: 10px;
}
.bt5 a {
text-align: center;
font: 100 14px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
font-size: 16px;
font-weight: 200;
color:#FFF;
width:100%;
height:10px;
margin-left:auto;
margin-right:auto;
margin-top: 10px;
text-decoration:none;
}
.bt6 {
text-align: center;
font: 200 12px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
font-size: 30px;
font-weight: 200;
color:#FFF;
width:100%;
height:10px;
margin-left:auto;
margin-right:auto;
margin-top: 30px;
}
I changed your fiddle a little bit so that your background-image zooms slightly when you hover the image as shown in the elpassion-example.
You can zoom/stretch the background-image of a div on hover with the following css:
.portfolio-project-image:hover {
background-size: 102% 102%;
background-repeat: no-repeat;
background-position: center center;
}
You can find your updated fiddle with an example-background-image at the following link: https://jsfiddle.net/Lopcnsuq/9/
I'm working on a Nivo Slider for my website, and I'm facing a problem with the bullets of the slider. I want them on the images of the slider. Now they are on my menu.
Like this:
This is the nivo-slider.css file:
/*
* jQuery Nivo Slider v3.2
* http://nivo.dev7studios.com
*
* Copyright 2012, Dev7studios
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
background:white;
filter:alpha(opacity=0);
opacity:0;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
width:100%;
z-index:8;
padding: 5px 10px;
opacity: 0.8;
overflow: hidden;
display: none;
-moz-opacity: 0.8;
filter:alpha(opacity=8);
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
text-align:center;
padding: 15px 0;
}
.nivo-controlNav a {
position: relative;
z-index:1000;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
And this is default.css
/*
Skin Name: Nivo Slider Default Theme
Skin URI: http://nivo.dev7studios.com
Description: The default skin for the Nivo Slider.
Version: 1.3
Author: Gilbert Pellegrom
Author URI: http://dev7studios.com
Supports Thumbs: true
*/
.theme-default .nivoSlider {
position:relative;
background:#fff url(images/loading.gif) no-repeat 50% 50%;
margin-bottom:10px;
/*-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;*/
}
.theme-default .nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.theme-default .nivoSlider a {
border:0;
display:block;
}
.theme-default .nivo-controlNav {
text-align: center;
padding: 20px 0;
}
.theme-default .nivo-controlNav a {
display:inline-block;
width:22px;
height:22px;
background:url(images/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin: 0;
}
.theme-default .nivo-controlNav a.active {
background-position:0 -22px;
}
.theme-default .nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
opacity: 0;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.theme-default:hover .nivo-directionNav a { opacity: 1; }
.theme-default a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
.theme-default a.nivo-prevNav {
left:15px;
}
.theme-default .nivo-caption {
font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
color:#fff;
border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
color:#fff;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled {
width: 100%;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled a {
width: auto;
height: auto;
background: none;
margin-bottom: 5px;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
display: block;
width: 120px;
height: auto;
}
I'd really appreciate your help.
Thanks in advance.
It's hard to actually give you a working example from the code you provided above, but I went to Nivo Slider's page and played with one of their demos in the console. What you can do is change this:
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
text-align:center;
padding: 15px 0;
}
to
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
text-align:center;
padding: 15px 0;
position: absolute;
top: 800px; /*CHANGE THIS VALUE TO FIT YOUR NEEDS*/
left: 200px; /*CHANGE THIS VALUE TO FIT YOUR NEEDS*/
z-index: 5; /*MAKE THIS HIGHER IF THE BUTTONS ARE NOT ON TOP OF THE IMAGE IN YOUR
EXAMPLE, THIS WAS ENOUGH ON NIVO'S SITE*/
}