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: 125

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: 9,017

Mini-Profile Theme: RedBassett's Mini-Profile

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>

[Source]

Do not help:
1. Ungrateful people
2. Lazy people
3. Irresponsible person
4. Manipulators
5. Chronic critics
6. Narcissists
7. Opportunists
8. Envious people

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

clemie New Member Posts: 125 clemie inherit Female 208780 0 Sept 10, 2024 17:23:11 GMT -8 clemie 125 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