PDA

View Full Version : nivo slider


tony09uk
04-07-2011, 08:06 PM
I have an image slider on my home page which has an arrow at each side of the image. I am trying to move the arrow on the right, but can't work out how. Can you please help?

/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* 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;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index: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 a {
position:relative;
z-index:9;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}


@charset "utf-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}
/*===================*/
/*=== Main Styles ===*/
/*===================*/
body {
color:#000;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
background-color: #000;
}

h4 {
text-align: center;
color: #FFF;
line-height: 0px;
}

a, a:visited {
color:#000;
text-decoration:none;
font-weight: bold;
text-transform: capitalize;
}

a:hover, a:active {
color:#d62f1e;
text-decoration:none;
}

#apDiv2 {
position:absolute;
left:-1px;
top:1470px;
width:901px;
height:28px;
z-index:2;
}


#apDiv1 {
position:absolute;
left:38px;
top:470px;
width:188px;
height:50px;
z-index:2;
background-image: url(../images/gradients/fireGradient.jpg);
background-repeat: repeat-x;
padding-top: 20px;
}

#apDiv1 a h4:hover {
background-color: #FF8000;
color: #000;
}

#apDiv3 {
position:absolute;
left:287px;
top:470px;
width:188px;
height:50px;
z-index:2;
background-image: url(../images/gradients/fireGradient.jpg);
padding-top: 20px;
background-repeat: repeat-x;
}

#apDiv3 a h4:hover {
background-color: #FF8000;
color: #000;
}

#apDiv4 {
position:absolute;
left:525px;
top:470px;
width:188px;
height:50px;
z-index:2;
background-image: url(../images/gradients/fireGradient.jpg);
background-repeat: repeat-x;
padding-top: 20px;
}

#apDiv4 a h4:hover {
background-color: #FF8000;
color: #000;
}

#wrapper {
width: 750px;
margin-right: auto;
margin-left: auto;
height: auto;
background-color: #000;
position: relative;
}
#wrapper #fader {
height: auto;
width: 100%;
}

#wrapper #header {
background-color: #000;
height: 200px;
width: 100%;
}
#wrapper #header #logo {
float: left;
height: 200px;
width: 209px;
}
#wrapper #header #nav {
background-color: #000;
float: right;
height: 200px;
width: 541px;
}

#wrapper #header #nav .button {
float: left;
height: 60px;
width: 20%;
margin-top: 25px;
margin-right: auto;
margin-bottom: auto;
line-height: 60px;
text-align: center;
background-image: url(../images/button.gif);
background-repeat: no-repeat;
font-size: 0.8em;
margin-left: 5%;
}

#wrapper #header #nav .button:hover{
background-image: url(../images/activeButton.gif);
background-repeat: no-repeat;
}

#wrapper #header #nav .button a {
color: #FFF;
font-size: 1.5em;
}

#wrapper #header #nav .button a:hover {
color: #000;
font-size: 1.5em;
}

#slider {
position:relative;
width:750px;
height:246px;
background:url(images/loading.gif) no-repeat 50% 50%;
}
#wrapper #topFader {
height: 20px;
width: 100%;
background-image: url(../images/gradients/topFader.jpg);
background-repeat: repeat-x;
}
#wrapper #topWhiteContent {
height: 30px;
width: 100%;
background-color: #3A3635;
}
#wrapper #whiteContent {
height: 250px;
width: 100%;
padding-right: 80px;
padding-bottom: 20px;
background-image: url(../images/whiteContent.jpg);
background-repeat: no-repeat;
margin-left: -35px;
}
#wrapper #whiteContent #divider1 {
float: left;
width: 28%;
padding-left: 4%;
margin-left: 6%;
padding-top: 5%;
height: 210px;
overflow: hidden;
font-size: 0.9em;
}
#wrapper #whiteContent #divider2 {
float: left;
width: 25%;
padding-right: 3%;
padding-left: 1%;
margin-left: 4%;
padding-top: 5%;
height: 210px;
overflow: hidden;
font-size: 0.9em;
}
#wrapper #whiteContent #divider3 {
float: left;
width: 25%;
padding-top: 5%;
padding-left: 3%;
margin-left: 1%;
height: 210px;
overflow: hidden;
font-size: 0.9em;
}


#wrapper #bgContent {
height: auto;
width: 100%;
background-color: #3A3535;
}
#wrapper #bgContent #bgContentLeft {
background-color: #3a3535;
float: left;
height: auto;
width: 60%;
margin-left: 20px;
color: #FFF;
margin-top: -4px;
}
#wrapper #bgContent #bgContentLeft p {
padding-top: 15px;
}
#wrapper #bgContent #bgContentLeft h3 {
padding-top: 20px;
}

#wrapper #bgContent #bgContentRight {
float: right;
height: 295px;
width: 260px;
padding-top: 5px;
margin-top: 20px;
background-image: url(../images/testimonial.jpg);
background-repeat: no-repeat;
padding-right: 6px;
padding-left: 10px;
margin-right: -48px;
margin-left: 10px;
}

#wrapper #bgContent #footer {
height: 90px;
width: 100%;
position: relative;
background-color: #EDFBEA;
background-image: url(../images/footer.jpg);
padding-bottom: 20px;
border-bottom-width: 0px;
background-repeat: no-repeat;
clear: both;
padding-right: 69px;
margin-left: -35px;
}
#wrapper #bgContent #bgContentRight p {
}


#wrapper #bgContent #footer img {
float: right;
padding-top: 20px;
padding-left: 15px;
}


#wrapper #bgContent #footer a {
padding-left: 20px;
font-size: 0.6em;
line-height: 120px;

}
#wrapper #bgContent #bgContentRight p {
margin-right: 25px;
padding-left: 20px;
}

#wrapper #fader {
height: 20px;
width: 750px;
background-image: url(../images/gradients/fadeToBackground.jpg);
color: #FFF;
font-size: 0.8em;
text-align: center;
}
#wrapper #fader a {
color: #FFF;
font-size: 0.8em;
}


.nivo-controlNav {
position:absolute;
left:260px;
bottom: -42px;
}
.nivo-controlNav a {
display:block;
height:22px;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
background-image: url(../java/nivo-slider/demo/images/bullets.png);
background-repeat: no-repeat;
width: 22px;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}

.nivo-directionNav a {
display:block;
width:30px;
height:30px;
text-indent:-9999px;
border:0;
background-image: url(../images/arrows.png);
background-repeat: no-repeat;
}
a.nivo-nextNav {
background-position:-30px 0;
right: 15px;
}
a.nivo-prevNav {
left:15px;
}

.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}

/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
clear:both;
height: 50px;
width: 100%;
}


#slider-wrapper {
width:750px;
height:392px;
margin:0 auto;
padding-top:74px;
margin-top:50px;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}

#slider a {
border:0;
display:block;
}

johnMoss
04-07-2011, 08:20 PM
What do you mean move the arrow? You mean reposition it? I can't see what you're doing but typically these are images. You have to photoshop the image...

gentleone
04-07-2011, 09:10 PM
Your CSS is a bit of a mess. I see two parts of css rules that belongs to nivo slider. A part at the top and a part at the bottom. The CSS for the arrows (next & prev links) are these.
Top part:

/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:razz:ointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}

bottom part:

.nivo-directionNav a {
display:block;
width:30px;
height:30px;
text-indent:-9999px;
border:0;
background-image: url(../images/arrows.png);
background-repeat: no-repeat;
}
a.nivo-nextNav {
background-position:-30px 0;
right: 15px;
}
a.nivo-prevNav {
left:15px;


The right value of a.nivo-nextNav and the left value of a.nivo-prevNav in the bottom part are different then the ones you have in the top part. You can delete the top part ones and change the values of the bottom part to suit your needs.
If you want to change the vertical position you should change top:45%;

If you don't stay organized with your code you can make it yourself pretty difficult. I would like to mention also that if you use a CSS reset, the reset rules should be the first rules in your stylesheet, so at the top and not halfway like you have now.

tony09uk
04-08-2011, 08:29 AM
Thanks. I have tried to be organised, then I find something new that needs adding and forget. Consequently it all becomes a real mess. I will tidy it up before I continue