Marquee Hover Image, How to place Side by Side?

The Coding Help board is exclusively for general coding help, not for modifications having to do with themes, templates, or plugins. If you have any questions involving those three categories please post them in the appropriate board.

clemie
New Member

Posts: 123

Marquee Hover Image, How to place Side by Side? Feb 2, 2017 11:52:26 GMT -8

Post by clemie on Feb 2, 2017 11:52:26 GMT -8

I'm adding OTM (Of The Month) section to the side table and I can't get then to lay side by side and scroll, they end up underneath each other.

Layout:

<marquee behavior="scroll" id="otmmarquee" direction="left" scrollamount="5" onmouseover="this.stop();" onmouseout="this.start();">

<center><body> <div class="pic"> <div class="text"> <center><br><br>Words<br>Words</center></div> </div> </body> </center>

</marquee>

This is what I have with a single one, No matter where I add another one it ends up below the first one rather than beside it.

Style Sheet:

.picMale { width:130px; height:230px; background: url(https://placehold.it/130x230) no-repeat; }

.picFemale { width:130px; height:230px; background: url(https://placehold.it/130x230) no-repeat; }

.picClan { width:130px; height:230px; background: url(https://placehold.it/130x230) no-repeat; }

.picCouple { width:130px; height:230px; background: url(https://placehold.it/130x230) no-repeat; }

.picSomething { width:130px; height:230px; background: url(https://placehold.it/130x230) no-repeat; }

.text{ width:130px; height:230px; background:#FFF; opacity:0; }

.picMale:hover .text { width:70px; height:200px; opacity:0.2; text-align:center; color:#000000; font-size:20px; font-weight:700; font-family:"Times New Roman", Times, serif; padding:30px; }

.picFemale:hover .text { width:70px; height:200px; opacity:0.2; text-align:center; color:#000000; font-size:20px; font-weight:700; font-family:"Times New Roman", Times, serif; padding:30px; }

Chris
ProBoards Coder

Official Code Helper

"'Oops' is the sound we make when we improve"

Posts: 8,870

Marquee Hover Image, How to place Side by Side? Feb 2, 2017 15:06:24 GMT -8 clemie likes this

Post by Chris on Feb 2, 2017 15:06:24 GMT -8

Judging from what I see on the BOH Forum the markup is different from what you posted above, so we'll use the markup from BOH as a guide to create the following new CSS rule which should govern any future OTMs added because it looks like you've added classes for additional ones:

#otmmarquee > center > div {
    display: inline-block;
    margin: 2em;
}

Reference: markup @ BOH Forum

<marquee behavior="scroll" id="otmmarquee" direction="left" scrollamount="5" onmouseover="this.stop();" onmouseout="this.start();">
                                            <center> <div class="picMale"> <div class="text"> <center><br><br>Words<br>Words</center></div> </div>   </center>
                                </marquee>

Every day, coders are looking for new ways to kill bugs. Think you've got what it takes?

"To fight the bug, we must first understand the bug. "

[would you like to know more?]

clemie New Member Posts: 123 clemie inherit Female 208780 0 Jan 13, 2024 6:02:20 GMT -8 clemie 123 New Member May 2014 clemie	Marquee Hover Image, How to place Side by Side? Feb 6, 2017 17:07:08 GMT -8 Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by clemie on Feb 6, 2017 17:07:08 GMT -8 ohh o: I see thank you!

Marquee Hover Image, How to place Side by Side?

Post by clemie on Feb 2, 2017 11:52:26 GMT -8

Post by Chris on Feb 2, 2017 15:06:24 GMT -8

Reference: markup @ BOH Forum

Post by clemie on Feb 6, 2017 17:07:08 GMT -8