Aggravated... Style Tag Issues

[• Ambrose •]

I never do well when it comes to HOVER...

[newclass=".friend"]color:#343841;font-family:Tahoma;font-size:10px; padding:10px;[/newclass]

[newclass=".friendly"]opacity:1;background-image:url(http://www.placehold.it/300X125); width:300px; height:125px; font-family:Tahoma; font-size:18px; line-height:125px; text-align:center;[/newclass]

[newclass=".sleepover"]opacity:0; transition-duration:1s; -moz-transition-duration: 1s; -webkit-transition-duration: 1s; background-color:#fcfcfc; width:300px; height:125px; overflow:auto;width:290px; height:115px; padding:5px; font-size:10px; text-shadow:0px;[/newclass]

[newclass=".sleepover:hover"]opacity:1;[/newclass]



[div][attr="class","friend"]

[div][attr="class","friendly"]Friends

[div][attr="class","sleepover"]Description[/div]

[/div][/div]

I'm trying to make it so that Friends is there on the first slide, but then when you hover over it, the description would cover everything including "Friends." I can't for the life of me figure out what I'm doing wrong. If you need the link to the thread, I can add it.

[Chris]

A link to the post where the attempt was made would in fact be very helpful. There is no such thing as too much information when it comes to diagnosing a problem and that cigarette butt overlooked at the crime scene may have been the clue that would have broken the case wide open.

I see no positioning of elements necessary for the big reveal upon hover but that might very well have been addressed in another area which is why I need to see it in action and find that cigarette butt provided the crime scene has not already been contaminated.

[• Ambrose •]

Here is the thread in question then. ^^

courirnu.boards.net/threads/recent/324

I have also updated the code since the initial post. I decided to go ahead and add the styling to the rest of the form. The only issue is the hover, and centering the "titles" vertically.




[div align="center"][div style="padding:25px; background-color:#343841; width:350px; height:510px; overflow:none;"][div][attr="class","plot"]

[div][attr="class","friendface"]Friends

[div][attr="class","plotover"]Lucien Laurent, the last of the founding fathers, passes away at 73. In honor of the founding fathers’ memory, Courirnu hosts a festival to celebrate their lives, and residents and tourists both pay their respects. There is more reason to celebrate, for an union of love is coming. The eldest grandson of Corentine Dubois, Astor, is set to wed Sophia, his best friend of 8 years. Meanwhile, a visiting family of four went camping at the river, and now they have gone missing. With all the commotion, what would happen to them?[/div]

[/div]



[div][attr="class","plot"]

[div][attr="class","enemyface"]Enemies

[div][attr="class","plotover"]Lucien Laurent, the last of the founding fathers, passes away at 73. In honor of the founding fathers’ memory, Courirnu hosts a festival to celebrate their lives, and residents and tourists both pay their respects. There is more reason to celebrate, for an union of love is coming. The eldest grandson of Corentine Dubois, Astor, is set to wed Sophia, his best friend of 8 years. Meanwhile, a visiting family of four went camping at the river, and now they have gone missing. With all the commotion, what would happen to them?[/div]

[/div]



[div][attr="class","plot"]

[div][attr="class","loverface"]Lovers

[div][attr="class","plotover"]Lucien Laurent, the last of the founding fathers, passes away at 73. In honor of the founding fathers’ memory, Courirnu hosts a festival to celebrate their lives, and residents and tourists both pay their respects. There is more reason to celebrate, for an union of love is coming. The eldest grandson of Corentine Dubois, Astor, is set to wed Sophia, his best friend of 8 years. Meanwhile, a visiting family of four went camping at the river, and now they have gone missing. With all the commotion, what would happen to them?[/div]

[/div]

[/div]



[newclass=".plot"]color:#343841;font-family:Tahoma;font-size:10px; padding:10px;[/newclass]

[newclass=".friendface"]opacity:1;background-image:url(http://www.placehold.it/300X125); width:300px; height:125px; font-family:Tahoma; font-size:18px; text-align:center;[/newclass]

[newclass=".enemyface"]opacity:1;background-image:url(http://www.placehold.it/300X125); width:300px; height:125px; font-family:Tahoma; font-size:18px; text-align:center;[/newclass]

[newclass=".loverface"]opacity:1;background-image:url(http://www.placehold.it/300X125); width:300px; height:125px; font-family:Tahoma; font-size:18px; text-align:center;[/newclass]

[newclass=".plotover"]opacity:0; transition-duration:1s; -moz-transition-duration: 1s; -webkit-transition-duration: 1s; background-color:#fcfcfc; width:290px; max-height:115px; overflow:auto; padding:5px; font-size:10px; text-shadow:0px; text-align:justify;[/newclass]

[newclass=".plotover:hover"]opacity:1;[/newclass]



[Chris]

Jun 16, 2019 20:41:30 GMT -8 • Ambrose • said:

Here is the thread in question then. ^^

courirnu.boards.net/threads/recent/324

I have also updated the code since the initial post. I decided to go ahead and add the styling to the rest of the form. The only issue is the hover, and centering the "titles" vertically.

By centering vertically you mean you want the "Friends" text to be behind the "300 x 125" like so?



One way to accomplish that is to add display:table-cell; and vertical-align:middle;text-align:center to the friendface class.

By hovering issue I take it you mean you want the whole panel covered by the text?



One way to accomplish that is to add position:relative; to the parent friendface class so when you add position:relative absolute; to the plotover class it will be bound to the relative container and not the entire document. You can then add a top:0; and left:0; to position it the top left of friendface

The same should hold true for the others (enemies, lovers) you've since added.

[• Ambrose •]

I clearly did something wrong... Instead of it covering the friendface, it's just showing up below Friends and now there's extra space below the hover too. As you probably know by now, I'm not at all good with hovers and positions! lol...


[div align="center"][div style="padding:25px; background-color:#343841; width:350px; height:510px; overflow:none;"][div][attr="class","plot"]
[div][attr="class","friendface"]Friends
[div][attr="class","plotover"]Lucien Laurent, the last of the founding fathers, passes away at 73. In honor of the founding fathers’ memory, Courirnu hosts a festival to celebrate their lives, and residents and tourists both pay their respects. There is more reason to celebrate, for an union of love is coming. The eldest grandson of Corentine Dubois, Astor, is set to wed Sophia, his best friend of 8 years. Meanwhile, a visiting family of four went camping at the river, and now they have gone missing. With all the commotion, what would happen to them?[/div]
[/div]

[div][attr="class","plot"]
[div][attr="class","enemyface"]Enemies
[div][attr="class","plotover"]Lucien Laurent, the last of the founding fathers, passes away at 73. In honor of the founding fathers’ memory, Courirnu hosts a festival to celebrate their lives, and residents and tourists both pay their respects. There is more reason to celebrate, for an union of love is coming. The eldest grandson of Corentine Dubois, Astor, is set to wed Sophia, his best friend of 8 years. Meanwhile, a visiting family of four went camping at the river, and now they have gone missing. With all the commotion, what would happen to them?[/div]
[/div]

[div][attr="class","plot"]
[div][attr="class","loverface"]Lovers
[div][attr="class","plotover"]Lucien Laurent, the last of the founding fathers, passes away at 73. In honor of the founding fathers’ memory, Courirnu hosts a festival to celebrate their lives, and residents and tourists both pay their respects. There is more reason to celebrate, for an union of love is coming. The eldest grandson of Corentine Dubois, Astor, is set to wed Sophia, his best friend of 8 years. Meanwhile, a visiting family of four went camping at the river, and now they have gone missing. With all the commotion, what would happen to them?[/div]
[/div]
[/div]

[newclass=".plot"]color:#343841;font-family:Tahoma;font-size:10px; padding:10px;[/newclass]
[newclass=".friendface"]opacity:1;background-image:url(http://www.placehold.it/300X125); width:300px; height:125px; font-family:Tahoma; font-size:18px; display:table-cell; vertical-align:middle;text-align:center; position:relative;[/newclass]
[newclass=".enemyface"]opacity:1;background-image:url(http://www.placehold.it/300X125); width:300px; height:125px; font-family:Tahoma; font-size:18px; text-align:center;[/newclass]
[newclass=".loverface"]opacity:1;background-image:url(http://www.placehold.it/300X125); width:300px; height:125px; font-family:Tahoma; font-size:18px; text-align:center;[/newclass]
[newclass=".plotover"]opacity:0; transition-duration:1s; -moz-transition-duration: 1s; -webkit-transition-duration: 1s; background-color:#fcfcfc; width:290px; max-height:115px; overflow:auto; padding:5px; font-size:10px; text-shadow:0px; text-align:justify; position:relative; top:0; left:0;[/newclass]
[newclass=".plotover:hover"]opacity:1;[/newclass]


[Chris]

[newclass=".plotover"]opacity:0; transition-duration:1s; -moz-transition-duration: 1s; -webkit-transition-duration: 1s; background-color:#fcfcfc; width:290px; max-height:115px; overflow:auto; padding:5px; font-size:10px; text-shadow:0px; text-align:justify; position:absolute; top:0; left:0;[/newclass]

Edit:

---

My bad! I mistakenly put relative twice in previous post. It should be absolute within a relative container to get the effect

[elli]

As an addition, you might have an easier time building your template from an online code editor, such as CodePen or JSFiddle. That way, you can see your changes in real time and don't have to fuss with the Style Tag plugin until you have something built. Most of us build posting templates this way.

[• Ambrose •]

I will definitely try that out.

Everything's working, except one more issue that just came up after fixing the position error.

It doesn't keep the title aligned and the height of the plotover seems to be shortened. I want to keep the padding so that the text isn't touching the edges, but if I tried to fix the width and height to 300x125, it just expands past the plotface?

Also, just now noticed that the Lovers box is slightly off-center, and if you hovered over it, the box's expanded too.

[elli]

It looks like your containers are getting the default content-box value for box-sizing, which is expected unless you declare otherwise. Basically what this means is that padding is included in the calculations for width and height. So if you say something is 300 pixels wide, and has 10 pixels of padding on the left and right, it's actually 320 pixels in width. That's where your overflow is coming from.

You can fix this by applying border-box as the value for box-sizing. To do it with the Style Tag plugin, it looks like this:

[newclass=".plotter *"]-webkit-box-sizing: border-box !important; box-sizing: border-box !important;[/newclass]
We're using the global selector (*) to grab all children of the .plotter class. But first you have to wrap the full template in a new container with the class .plotter. Like this:

[div][attr="class","plotter"]

... rest of the template

[/div]
This will change any styles that have width and padding, so you'll need to adjust those. But this will make your container sizes much easier to work with. You can now simply define the width x height of each hover as 300x125.

[• Ambrose •]

That worked to align the third box evenly with the first two. I'm playing with it via CodePen too, but this thread has helped me a great deal because I'm learning what I missed or needs to include. That being said, the hover over Lovers is still larger than the first two. Thanks in advance for everyone's help!

[elli]

Your .plot containers are also double- and triple-nested, creating nested padding and throwing off the width of each subsequent hover section by 20px. You're probably missing the closing [/div] on those containers.

[• Ambrose •]

Honestly, position and hover tags confuse me to no end. I appreciate you guys trying to help. Unfortunately, I keep finding error after error whenever I follow your advice. =(

As I mentioned in my previous post, I decided to mess with it on CodePen, and I have updated it to a style I like so far. There are just two irritating issues (for now.)

Here's the link to my Pen; codepen.io/phoenixseraph/pen/EBybZg

1. Despite adding in the position:relative; and the other two bits, the hover is now at the very top left of the template. While it's quite accurate, it's not in the box like I wanted.

2. The text with the descriptions shouldn't be aligned vertically. I also noticed that even with padding:5px, it's touching the wall. =(

Hopefully, after those are fixed with everyone's help, I can then try to convert into a template I can use on ProBoards.

[elli]

Try this

codepen.io/ebbymac/pen/rELpVz

[• Ambrose •]

elli, tells me there's a 404 error.

[elli]

• Ambrose • Hm, apparently you can't make forks from other pens private. Try now.