Slide??? Need help with some coding!

[Tiffy-Bean]

thecityofsin.freeforums.net/

So, I got this working beautifully! (thank you so much). My only thing I need to adjust is I want to move the images down a little and can't figure out how. I want them centered in the background box but every time I try to margin it down it doesn't work. How do I move the whole marquee down to center it?

I lied. I broke it.  what'd I do. Halllp..-falls over under code-  

now it's repeating itself one over the other when I added in extra images.


   



<style>

/*the width needs to be set at least as wide as all the images combined*/

#scroller_wrapper{

width:relative; height:250px;

margin:auto;background:rgba(0, 0, 0, .5);

}

/*this is the div around the text needed for pixel width to center/position text*/

.my_text {

margin:auto;position:relative;

top:-20px; width:140px; background: black;

text-align:center; padding:5px;

font-size:10px;

margin-top:-15px;

}

/*the first image text needed special alignment*/

#my_image1 .my_text{

margin-left: 9px;

}

/*makes the images go in a row*/

#my_image1,#my_image2,

#my_image3,#my_image4, #my_image5,#my_image6,

#my_image7,#my_image8,

#my_image9,#my_image10,

#my_image11,#my_image12,

#my_image13,#my_image14,

#my_image15,#my_image16{display:inline-block;

}

/*this first image needs slightly different margins*/

#my_image1 img{

position:relative;top:5px;

width:relative;

height:235px;

border:4px solid black;

padding:2px;

margin:0px 4px 0px 0px;

}

/*all other image div id's except the first one go here*/

#my_image2 img,#my_image3 img,#my_image4 img,#my_image5 img,#my_image6 img,#my_image7 img,#my_image8 img,#my_image9 img,#my_image10 img,#my_image11 img,#my_image12 img,#my_image13 img,#my_image14 img,#my_image15 img,#my_image16 img{

position:relative;top:5px;

width:relative;

height:235px;

border:4px solid black;

padding:2px;

margin:0px 2px 0px 2px;

}

/*your link color*/

.my_text a{

color:#fff;

}  

   

</style>

<div id="scroller_wrapper">

<!--*adjust the marqueed div below in the jquery-->

<div class="marquee" id="mycrawler2">

   

<div id="my_image1"><img src="http://i.imgur.com/6tkVR7V.jpg" />

       <div class="my_text"><a href="http://thecityofsin.freeforums.net/user/48">Izabetta DiNatale</a><br>Most Active</div>

</div>

   

    <div id="my_image2"><img src="http://i.imgur.com/8RoqY05.jpg" />

        <div class="my_text"><a href="http://thecityofsin.freeforums.net/user/2/">Dimitrius King</a><br>Best Villain</div>

</div>



<div id="my_image3"><img src="http://i.imgur.com/6h9ogEt.jpg" />

   <div class="my_text"><a href="http://thecityofsin.freeforums.net/user/10">Angeles</a> and <a href="http://thecityofsin.freeforums.net/user/5">Dylan Keaton</a><br>Soulmates</div>

   </div>



<div id="my_image4"><img src="http://i.imgur.com/YsKSEBe.jpg" />

<div class="my_text"><a href="http://thecityofsin.freeforums.net/user/15">Zathen Blaine</a><br>Most Adorable|Trouble Maker</div>

</div>



<div class="my_image5"><img src="http://i.imgur.com/6gcwvWx.jpg" />

<div class="my_text"> <a href="http://thecityofsin.freeforums.net/user/39">Elena DaSilva</a><br>Trouble Maker</div>

</div>



   <div class="my_image6"><img src="http://i.imgur.com/p0QYUqx.jpg" />

<div class="my_text"> <a href="http://thecityofsin.freeforums.net/user/4">Juliet Slade</a><br>Trouble Maker</div>

</div>



   <div class="my_image7"><img src="http://i.imgur.com/4hGwFuu.jpg" />

<div class="my_text"> <a href="http://thecityofsin.freeforums.net/user/8">Layla Bishop</a><br>Trouble Maker</div>

</div>



   <div class="my_image8"><img src="http://i.imgur.com/wvdfRxm.jpg" />

<div class="my_text"> <a href="http://thecityofsin.freeforums.net/user/79">Alice Lyddell</a><br>Royal Snob</div>

</div>



   <div class="my_image9"><img src="http://i.imgur.com/8vFK8Be.jpg" />

<div class="my_text"> <a href="http://thecityofsin.freeforums.net/user/49">Arrias Hearst</a><br>Royal Snob</div>

</div>



   <div class="my_image10"><img src="http://i.imgur.com/Besjf0D.jpg" />

<div class="my_text"> <a href="http://thecityofsin.freeforums.net/user/7">Claire Monroe</a><br>Royal Snob</div>

</div>



   <div class="my_image11"><img src="http://i.imgur.com/ywnTOIZ.jpg" />

<div class="my_text"> <a href="http://thecityofsin.freeforums.net/user/9">Verias de Starling</a><br>Royal Snob</div>

</div>

   

<div class="my_image12"><img src="http://i.imgur.com/JL7q7HB.jpg" />

<div class="my_text"> <a href="http://thecityofsin.freeforums.net/user/67">Adrian de la Fontaine</a><br>Plot Shaker</div>

</div>

   

<div class="my_image13"><img src="http://i.imgur.com/CtnFx5j.png" />

<div class="my_text"> <a href="http://thecityofsin.freeforums.net/user/94">Andrew Fisher</a><br>Plot Shaker</div>

</div>

   

   <div class="my_image14"><img src="http://i.imgur.com/CZ2RpQ6.jpg" />

<div class="my_text"> <a href="http://thecityofsin.freeforums.net/user/56">Chancellor Constigen</a><br>Plot Shaker</div>

</div>

   

       <div class="my_image15"><img src="http://i.imgur.com/WQeKxzP.jpg" />

<div class="my_text"> <a href="http://thecityofsin.freeforums.net/user/3">Gaia</a> and <a href="http://thecityofsin.freeforums.net/user/2">Dimitrius King</a><br>Soulmates</div>

</div>

   

           <div class="my_image16"><img src="http://i.imgur.com/PomnAVp.jpg" />

<div class="my_text"> <a href="http://thecityofsin.freeforums.net/user/14">Wednesday</a> and <a href="http://thecityofsin.freeforums.net/user/17">Bryce Gibson</a><br>Soulmates</div>

</div>



   

</div>

   

</div>

<br /><br />

<script type="text/javascript">

marqueeInit({

uniqueid: 'mycrawler2',

style: {

'padding': '2px',

'width': 'relative',

'height': '235px',

       'margin': 'auto'

},

inc: 5, //speed - pixel increment for each iteration of this marquee's movement

mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)

moveatleast: 2,

neutral: 150,

savedirection: true,

random: true

});

</script>

[Tumbleweed]

Tiffy-Bean,

For one thing, width:relative; is not proper css. There is no such thing as a width being relative. Also you have relative as the width in that bottom script so put it back to what it was originally until we work out where you went wrong. You changed a lot so I'm not sure what else might be the problem.

I redid your html. There was an error in there somewhere but here is your whole redid code minus the big script code. I'm posting what you posted but redone:

<style>

#scroller_wrapper{
width:700px height:150px;
margin:auto;background:rgba(0, 0, 0, .5);
}
/*this is the div around the text needed for pixel width to center/position text*/
.my_text {
margin:auto;position:relative;
top:-40px; width:140px; background: black;
text-align:center; padding:5px;
font-size:10px;
}
/*the first image text needed special alignment*/
#my_image1 .my_text{
margin-left: 9px;
}
/*makes the images go in a row*/
#my_image1, #my_image2,
#my_image3, #my_image4,
#my_image5, #my_image6,
#my_image7, #my_image8,
#my_image9, #my_image10,
#my_image11, #my_image12,
#my_image13, #my_image14,
#my_image15, #my_image16{display:inline-block; border:1px solid red;
}
/*this first image needs slightly different margins*/
#my_image1 img{
position:relative;top:5px;
width:150px;
height:225px;
border:4px solid black;
padding:2px;
margin:0px 4px 0px 0px;
}
/*all other image div id's except the first one go here*/
#my_image2 img,#my_image3 img,
#my_image4 img,#my_image5 img,
#my_image6 img,#my_image7 img,
#my_image8 img,#my_image9 img,
#my_image10 img,#my_image11 img,
#my_image12 img,#my_image13 img,
#my_image14 img,#my_image15 img,
#my_image16 img{
position:relative;top:5px;
width:150px;
height:225px;
border:4px solid black;
padding:2px;
margin:0px 2px 0px 2px;
}
/*your link color*/
.my_text a{
color:#fff;
} 
</style>

<div id="scroller_wrapper">


<div class="marquee" id="mycrawler2">

<div id="my_image1"><img src="http://i.imgur.com/6tkVR7V.jpg" />
<div class="my_text"><a href="http://thecityofsin.freeforums.net/user/48"><span>Izabetta DiNatale</span></a><br>Most Active</div>
</div>

<div id="my_image2"><img src="http://i.imgur.com/8RoqY05.jpg" />
<div class="my_text"><a href="http://thecityofsin.freeforums.net/user/2/"><span>Dimitrius King</span></a><br>Best Villain</div>
</div>

<div id="my_image3"><img src="http://i.imgur.com/6h9ogEt.jpg" />
<div class="my_text"><a href="http://thecityofsin.freeforums.net/user/10"><span>Angeles</span></a> and <a href="http://thecityofsin.freeforums.net/user/5">Dylan Keaton</a><br>Soulmates</div>
</div>
   
<div id="my_image4"><img src="http://i.imgur.com/YsKSEBe.jpg" />
<div class="my_text"><a href="http://thecityofsin.freeforums.net/user/15"><span>Zathen Blaine</span></a><br>Most Adorable|Trouble Maker</div>
</div>
   
<div id="my_image5"><img src="http://i.imgur.com/6gcwvWx.jpg" />
<div class="my_text"><a href="http://thecityofsin.freeforums.net/user/39"><span>Elena DaSilva</span></a><br>Trouble Maker</div>
</div>
   
<div id="my_image6"><img src="http://i.imgur.com/p0QYUqx.jpg" />
<div class="my_text"><a href="http://thecityofsin.freeforums.net/user/4"><span>Juliet Slade</span></a><br>Trouble Maker</div>
</div>    

<div id="my_image7"><img src="http://i.imgur.com/4hGwFuu.jpg" />
<div class="my_text"><a href="http://thecityofsin.freeforums.net/user/8"><span>Layla Bishop</span></a><br>Trouble Maker</div>
</div>

<div id="my_image8"><img src="http://i.imgur.com/wvdfRxm.jpg" />
<div class="my_text"><a href="http://thecityofsin.freeforums.net/user/79"><span>Alice Lyddell</span></a><br>Royal Snob</div>
</div>    
   
<div id="my_image9"><img src="http://i.imgur.com/8vFK8Be.jpg" />
<div class="my_text"><a href="http://thecityofsin.freeforums.net/user/49"><span>Arrias Hearst</span></a><br>Royal Snob</div>
</div>  
   
<div id="my_image10"><img src="http://i.imgur.com/Besjf0D.jpg" />
<div class="my_text"><a href="http://thecityofsin.freeforums.net/user/7"><span>Claire Monroe</span></a><br>Royal Snob</div>
</div>  
   
<div id="my_image11"><img src="http://i.imgur.com/ywnTOIZ.jpg" />
<div class="my_text"><a href="http://thecityofsin.freeforums.net/user/9"><span>Verias de Starling</span></a><br>Royal Snob</div>
</div>    
   
<div id="my_image12"><img src="http://i.imgur.com/JL7q7HB.jpg" />
<div class="my_text"><a href="http://thecityofsin.freeforums.net/user/67"><span>Adrian de la Fontaine</span></a><br>Plot Shaker</div>
</div>  
   
<div id="my_image13"><img src="http://i.imgur.com/CtnFx5j.png" />
<div class="my_text"><a href="http://thecityofsin.freeforums.net/user/94"><span>Andrew Fisher</span></a><br>Plot Shaker</div>
</div>

<div id="my_image14"><img src="http://i.imgur.com/CZ2RpQ6.jpg" />
<div class="my_text"><a href="http://thecityofsin.freeforums.net/user/56"><span>Chancellor Constigen</span></a><br>Plot Shaker</div>
</div>
   
<div id="my_image15"><img src="http://i.imgur.com/WQeKxzP.jpg" />
<div class="my_text"><a href="http://thecityofsin.freeforums.net/user/3"><span>Gaia</span></a>and <a href="http://thecityofsin.freeforums.net/user/2">Dimitrius King</a><br>Soulmates</div>
</div>
   
<div id="my_image16"><img src="http://i.imgur.com/PomnAVp.jpg" />
<div class="my_text"><a href="http://thecityofsin.freeforums.net/user/14"><span>Wednesday</span></a> and <a href="http://thecityofsin.freeforums.net/user/17">Bryce Gibson</a><br>Soulmates</div>
</div>    
   

   
</div>
</div>

<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '2px',
'width': '990px',
'height': '180px',
       'margin': 'auto'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
savedirection: true,
random: true
});
</script>


The width in that bottom script can be changed to the pixel width you want or just set it to 100% but on a wider screen that might? slow it down since so many images need to be lined up. Not sure about that, though. But definitely a pixel or percent width.

Look the over to make sure I got them right.

[Tumbleweed]

Sept 23, 2015 4:48:14 GMT -8 alleyesonme said:

Thanks so much tumbleweed <3 Ugh trying out the margin and stuff is super annoying lol The images were going every where. I did manage to get them right next to each other but then the text for the first image moved and yea it got messy lols I think I'll stick to what I have for now but thank you so much!!

No kidding, it is and was annoying. I totally understand.

[Tiffy-Bean]

Sept 23, 2015 12:12:33 GMT -8 Tumbleweed said:

Tiffy-Bean,

For one thing, width:relative; is not proper css. There is no such thing as a width being relative. Also you have relative as the width in that bottom script so put it back to what it was originally until we work out where you went wrong. You changed a lot so I'm not sure what else might be the problem.

I redid your html. There was an error in there somewhere but here is your whole redid code minus the big script code. I'm posting what you posted but redone:

The width in that bottom script can be changed to the pixel width you want or just set it to 100% but on a wider screen that might? slow it down since so many images need to be lined up. Not sure about that, though. But definitely a pixel or percent width.

Look the over to make sure I got them right.

Lol I told you I broke'd it.  A lot of CSS has been a learning curve for me because I taught myself, so I'm always thankful when people tell me things like the relative isn't proper because that lets me know for future CSS.

Your coding fix worked.  You can see it on the page.  I just want to move the thing down so you can see all the borders.  It cuts off at the top of the images and has space down below.  How do I do that?

[Tiffy-Bean]

[Tiffy-Bean]

You ever consider making this a plugin Tumbleweed? I'm sure a lot of people would jump at it.

[Tumbleweed]

Sept 23, 2015 16:05:05 GMT -8 Tiffy-Bean said:

Sept 23, 2015 12:12:33 GMT -8 Tumbleweed said:

Tiffy-Bean,

For one thing, width:relative; is not proper css. There is no such thing as a width being relative. Also you have relative as the width in that bottom script so put it back to what it was originally until we work out where you went wrong. You changed a lot so I'm not sure what else might be the problem.

I redid your html. There was an error in there somewhere but here is your whole redid code minus the big script code. I'm posting what you posted but redone:

The width in that bottom script can be changed to the pixel width you want or just set it to 100% but on a wider screen that might? slow it down since so many images need to be lined up. Not sure about that, though. But definitely a pixel or percent width.

Look the over to make sure I got them right.

Lol I told you I broke'd it.  A lot of CSS has been a learning curve for me because I taught myself, so I'm always thankful when people tell me things like the relative isn't proper because that lets me know for future CSS.

Your coding fix worked.  You can see it on the page.  I just want to move the thing down so you can see all the borders.  It cuts off at the top of the images and has space down below.  How do I do that?

Totally understand,  I taught myself too.

Here, try this css:

<style>
#scroller_wrapper{
width:700px height:255px;
margin:auto;background:rgba(0, 0, 0, .5);
}
/*this is the div around the text needed for pixel width to center/position text*/
.my_text {
margin:auto;position:relative;
top:-23px; width:140px; background: black;
text-align:center; padding:5px;
font-size:10px;
}
/*the first image text needed special alignment*/
#my_image1 .my_text{
margin-left: 9px;
}
/*makes the images go in a row*/
#my_image1, #my_image2,
#my_image3, #my_image4,
#my_image5, #my_image6,
#my_image7, #my_image8,
#my_image9, #my_image10,
#my_image11, #my_image12,
#my_image13, #my_image14,
#my_image15, #my_image16{display:inline-block;
}
/*this first image needs slightly different margins*/
#my_image1 img{
position:relative;top:17px;
width:150px;
height:225px;
border:4px solid black;
padding:2px;
margin:0px 4px 0px 0px;
}
/*all other image div id's except the first one go here*/
#my_image2 img,#my_image3 img,
#my_image4 img,#my_image5 img,
#my_image6 img,#my_image7 img,
#my_image8 img,#my_image9 img,
#my_image10 img,#my_image11 img,
#my_image12 img,#my_image13 img,
#my_image14 img,#my_image15 img,
#my_image16 img{
position:relative;top:17px;
width:150px;
height:225px;
border:4px solid black;
padding:2px;
margin:0px 2px 0px 2px;
}
/*your link color*/
.my_text a{
color:#fff;
}  
</style>

And then in that script below the html change the height to 245px to account for the border.

'height': '245px',

[Tiffy-Bean]

Perfect. Thank you for taking the time out to help me. You're more than a Saint. <3

[Tumbleweed]

Sept 23, 2015 20:38:50 GMT -8 Tiffy-Bean said:

Perfect. Thank you for taking the time out to help me. You're more than a Saint. <3

Happy to help. One last little thing I missed. You'll probably have to back off on how far the text for that first image (Izabetta DiNatale) is moved to the left: 6px worked on my test site.

#my_image1 .my_text{
margin-left: 6px;
}