Repositioning the nav slider array

First, I'd like to say thank you and give much respect to the developers of Hot Image Slider - remarkably easy to use and with a little bit of CSS knowledge, most of the questions I've seen in this forum can be easily managed.

However, my CSS knowledge isnt as great as I'd like, and while I've customized the slider to look and operate in the way I'd like ( www.726creative.com/home ) I now find myself needing to modify the CSS to place the nav-slide array in a "pixels from bottom" scenario, so that in other sliders that are not as tall, the array will always appear on the bottom.

I fear I may have modified the code incorrectly in order to accomplish the current end result as seen in the link above, but I'm sure there must be a simple way to specify the navs location in pixels or percentage from the bottom, and not the top.

agan, an AWESOME module!

Base on link you provided you can try something like this:

div#header_hotslider div#slide-holder div#slide-controls {
background: url( www.726creative.com/home/modules/mod_hot...r/images/slide-bg.pg ) 0px 0px;
display: none;
height: 46px;
left: 0px;
position: relative;
top: 90%;
width: 940px;
}


div#header_hotslider div#slide-holder div#slide-controls div#slide-nav a {
background-image: url( www.726creative.com/home/modules/mod_hot...slide-nav-yellow.png );
color: white;

/*[strike]left: 50px;[/strike]*/
/*[strike]position: relative;[/strike]*/
/*[strike]top: 310px;[/strike]*/

}

Here the problem may be top:90%, but can be good solution if you can find value that will fit all needed cases of image sizes.

Best solution however would be to use javascript like jQuery.position(...
See: jqueryui.com/demos/position/

<script type="text/javascript">

jQuery(document).ready(function(){
jQuery( "#slide-controls" ).position({
of: $( "#slide-runner" ),
my: 'left bottom',
at: 'left bottom',
offset: '10 -10'
});
});

</script>


Ivan

First of all, great module! I'm really enjoying it so far, but I'm having trouble with positioning my menu bar. I've read a couple posts about the positioning and editing the CSS file, but I have no idea where to edit the CSS specifically.

Here's the link to the page: 174.132.162.162/~ncu2010/

And the CSS I'm working with (it's from a patch of yours from another post):

a img {
border:0;
}

div#top div#nav ul {
float:left;
list-style-type:none;
}

div#nav ul li {
float:left;
height:52px;
}

div#nav ul li a {
border:0;
height:52px;
display:block;
line-height:52px;
text-indent:-9999px;
}

div#headerslider {
margin:-1px 0 0;
}

div#video-header {
margin:-1px 0 0;
}

div#headerslider div#slide-holder img {
margin:0;
display:none;
position:absolute;
}

div#headerslider div#slide-holder div#slide-controls p.text {
float:left;
color:#fff;
display:inline;
font-size:10px;
line-height:16px;
margin:15px 0 0 20px;
text-transform:uppercase;
overflow:hidden;
}

div#headerslider div#slide-holder div#slide-controls div#slide-nav a {
float:left;
width:24px;
height:24px;
display:inline;
font-size:11px;
margin:0 5px 0 0;
line-height:24px;
font-weight:700;
text-align:center;
text-decoration:none;
background-position:0 0;
background-repeat:no-repeat;
padding:0;
}

div#headerslider div#slide-holder div#slide-controls div#slide-nav a.on {
background-position:0 -24px;
}

div#nav ul li a {
background:url(../images/nav.png) no-repeat;
}

Any help would be greatly appreciated. Thanks!!!

Paul

Hi,

where do you want to put your menu bar?

Hi! Thanks for your quick reply. I want to position them over the white circled numbers in my jpegs, so about 10-15 px from the bottom right-hand corner. I would also want to decrease the size of the circles, too, and make them tranparent, if possible.

Hi,

add

div#headerslider div#slide-holder div#slide-controls {
top:180px;
height:46px;
}

change:
div#nav ul li a {
background:none;
}

You have 3 links and five image places , so you will have to adjust next (where marked red) by yourself:

div#headerslider div#slide-holder div#slide-controls div#slide-nav a {
float:left;
width:24px;
height:24px;
display:inline;
font-size:11px;
margin:0 5px 0 0;
line-height:24px;
font-weight:700;
text-align:center;
text-decoration:none;
background-position:0 0;
background-repeat:no-repeat;
padding:0;
}