Help with hovers: next to each other

pronounsShe/Her
49written posts
rileycooperearned bits
offlinecurrently
rileycooper
New Member
rileycooper Avatar
I'm trying to make a multi-character adoption page with hovers and I've got most of the basic coding for it down, give or take a copy and paste here and there. The trouble comes with trying to get the images next to each other rather than on their own lines. This what I have: [div][attr="class","adopts"][div][attr="class","fawnspark"][div][attr="class","fawnsparkimage"][/div][newclass=.adopts]background-color:#002b5c;width:500px;height:100%[/newclass][div][attr="class","fawnsparktext"]Fawnspark. Sister. Littermate. Has a come-and-go temper, by which I mean it's as easy to rile her up as it is to calm her down.[/div][/div][newclass=.fawnspark]width:200px; height:300px; color:black; position: relative; overflow: hidden;color: white;padding: 10px;[/newclass][newclass=.fawnsparktext]opacity: 0; position: relative;width:170px[/newclass][newclass=.fawnsparkimage]width:200px; height:300px; position: absolute; top: 0; left: 0; background-image:url(https://i.imgur.com/1VzXxUO.jpg?1);[/newclass][newclass=.fawnspark:hover]width: 300px;[/newclass][newclass= .fawnspark:hover .fawnsparktext]opacity: 1;[/newclass][newclass= .fawnspark:hover .fawnsparkimage]opacity:.5;[/newclass] [div][attr="class","specklescar"][div][attr="class","specklescarimage"][/div][div][attr="class","specklescartext"]Specklescar. Brother. Littermate. As competitive and rowdy as his siblings, but maybe nearly dying has tempered him. Got his scars when the trio went to fight a fox as apprentices.[/div][/div][newclass=.specklescar]width:200px; height:300px; color:black; position: relative; overflow: hidden;color:white;padding: 10px;[/newclass][newclass=.specklescartext]opacity: 0; position: relative;width:170px[/newclass][newclass=.specklescarimage]width:200px; height:300px; position: absolute; top:0; left: 0; background-image:url(https://i.imgur.com/O0EWidp.jpg?1);[/newclass][newclass=.specklescar:hover]width:300px;[/newclass][newclass= .specklescar:hover .specklescartext]opacity: 1;[/newclass][newclass= .specklescar:hover .specklescarimage]opacity:.5;[/newclass][/div]


And it comes out like this.



I'm trying to get the two on the same line. I've tried using the table tags too, but they didn't work. Any suggestions?
931written posts
gimmickearned bits
offlinecurrently
gimmick
Part of the Furniture
gimmick Avatar
All birds and men are sure to die but songs may live forever
The easiest answer: assuming you don't have plans to add more and don't need to worry about there being so many adopts that they won't all fit on one line, then the simplest solution is adding a display: inline-block to both .fawnspark and .specklescar. All divs render using display: block by default, which stacks on top of each other like in your screenshot.
[break][break]
The slightly more complicated one: if you will be adding more adopts, I would instead add display: flex; justify-content: space-around; align-items: center to .adopts, which will allow the items within to sit in a row and wrap additional cats to the next line if they can't fit on one row (display: flex); center them horizontally within the width of the blue box (justify-content: space-around); center them vertically within the height of the blue box (align-items: center). Flexbox is a super versatile layout type that I won't get into, but if you are interested in reading more about it, I recommend this csstricks article about 'em.
[break][break]
Going beyond your original question though, I might suggest a couple things that will make things easier for you in the long run, especially if you do intend to add more.
[break][break]
First up, for a layout involving any kind of nested divs (which is most of them to be honest), I highly recommend always including a [ nospaces] at the start of your post—it'll allow you to have line breaks wherever you please without it actually impacting the final post. That way you can format the code itself in a more scannable way instead of having to keep it in one dense paragraph the way you have now.
[break][break]
Second, right now you have your newclass tags interspersed between your div tags. For best practice, and for ease of keeping track of how many open divs you have, I'd recommend keeping your structural tags separate from style tags by moving all the newclasses to the bottom of the post because...
[break][break]
Third, once you do that, we come to the biggest quality of life improvement. Currently, even though you have unique classes for every single div, with the exception of the background image for each adoptee, all the classes are repeating the same width, same height, same position, same hovers, etc. The cool thing about classes though is that multiple divs can reuse the same class, and one div can also use multiple classes, meaning you can write out the styles once, and then just apply that class to everything that's supposed to look/behave the same.

[break][break]
For example, you'd go from:
[break][break]
[div][ attr="class","fawnspark]fawnspark says hi[/div]
[newclass=.fawnspark]width:200px; height:300px; color:black; position: relative; overflow: hidden; color: white; padding: 10px[/newclass]

[div][ attr="class","specklescar]specklescar says hi[/div]
[newclass=.specklescar]width:200px; height:300px; color:black; position: relative; overflow: hidden; color: white; padding: 10px[/newclass]


[break][break]
To
[break][break]
[div][ attr="class","catto]fawnspark says hi[/div]

[div][ attr="class","catto]specklescar says hi[/div]

[newclass=.catto]width:200px; height:300px; color:black; position: relative; overflow: hidden; color: white; padding: 10px[/newclass]


[break][break]That way, if you ever decide you want to make all the pictures 500px wide, rather than going in to change it in five different places, you can change it in one place and it'll affect all of them. Then, for something like the background-image, which will always be different from div to div, you can set that inside the div tag itself using div style="background-image...". When combined with a class, it'll be written out like [ div style="background-image: X"][ attr="class","catto"] [ /div]

[break][break]Put all of the above together and you get...
[break][break]
[nospaces][div][attr="class","adopts"]

[div][attr="class","cat"]
[div style="background-image:url(https://i.imgur.com/1VzXxUO.jpg?1)"][attr="class","catimage"] [/div]
[div][ attr="class","cattext"]Fawnspark. Sister. Littermate. Has a come-and-go temper, by which I mean it's as easy to rile her up as it is to calm her down.[/div]
[/div]

[div][attr="class","cat"]
[div style="background-image:url(https://i.imgur.com/O0EWidp.jpg?1);"][attr="class","catimage"] [/div]
[div][*attr="class","cattext"]Specklescar. Brother. Littermate. As competitive and rowdy as his siblings, but maybe nearly dying has tempered him. Got his scars when the trio went to fight a fox as apprentices.[/div]
[/div]

[/div]
[newclass=.adopts]background-color:#002b5c;width:500px;height:350px; display: flex; justify-content: space-around; align-items: center[/newclass]
[newclass=.cat]width:200px; height:300px; color:black; position: relative; overflow: hidden; color: white; [/newclass]
[newclass=.cattext]opacity: 0; position: relative;width:180px; padding: 10px [/newclass]
[newclass=.catimage]width:100%; height:100%; position: absolute; top: 0; left: 0; [/newclass]
[newclass= .cat:hover .cattext]opacity: 1;[/newclass]
[newclass= .cat:hover .catimage]opacity:.5;[/newclass]


[break][break]And what that looks like:[break][break]

[nospaces]
[attr="class","adopts"]

[attr="class","cat"]
[attr="class","catimage"]

[attr="class","cattext"]Fawnspark. Sister. Littermate. Has a come-and-go temper, by which I mean it's as easy to rile her up as it is to calm her down.



[attr="class","cat"]
[attr="class","catimage"]

[attr="class","cattext"]Specklescar. Brother. Littermate. As competitive and rowdy as his siblings, but maybe nearly dying has tempered him. Got his scars when the trio went to fight a fox as apprentices.




[newclass=.adopts]background-color:#002b5c;width:500px;height:350px; display: flex; justify-content: space-around; align-items: center[/newclass]
[newclass=.cat]width:200px; height:300px; color:black; position: relative; overflow: hidden; color: white; [/newclass]
[newclass=.cattext]opacity: 0; position: relative;width:180px; padding: 10px [/newclass]
[newclass=.catimage]width:100%; height:100%; position: absolute; top: 0; left: 0; [/newclass]
[newclass= .cat:hover .cattext]opacity: 1;[/newclass]
[newclass= .cat:hover .catimage]opacity:.5;[/newclass]
last edit on Sept 3, 2021 5:08:20 GMT by gimmick
pronounsshe/her
309written posts
syhrinxearned bits
offlinecurrently
syhrinx
Spring '21 Dev Completionist
syhrinx Avatar
i am unfamiliar with proboards styling, but i would try to add "display: inline-block;" to the classes fawnspark and specklescar ? the reasoning being that the images are inside divs, and divs are automatically block elements, which means they take up their own lines. display: inline-block changes it to make them feel okay with sharing lines, but they keep the fanciness that comes with being a block element in the first place.

edit: ah, gimmick explained it much better!!
last edit on Sept 3, 2021 4:56:45 GMT by syhrinx
internally screaming
pronounsshe/her
1,764written posts
Nekoearned bits
offlinecurrently
Neko
Administrator
Neko Avatar
stressed, depressed, and probably not well-dressed
[nospaces]

[attr="class","infoBG"]
[attr="class","infoBG2"]
[attr="class","infoBack"]
[attr="class","infoTitle"][attr="class","fa fa-star-o"] threadarchived
[attr="class","infoDiv"]

[attr="class","infoBody"]

This thread hasn't had any replies since a month ago - feel free to repost if you wish!