inherit
150437
0
Mar 26, 2024 17:05:09 GMT -8
shiningheart
34
December 2009
shiningheart
|
Post by shiningheart on Sept 2, 2021 18:16:27 GMT -8
Not sure if this goes in here or in templates cuz it's supposed to be coding for adoptions.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. Any suggestions?
|
|
inherit
Official Code Helper
65613
0
1
Sept 28, 2022 13:12:14 GMT -8
Chris
"'Oops' is the sound we make when we improve"
8,835
December 2005
horace
|
Post by Chris on Sept 5, 2021 8:09:20 GMT -8
Try this... [newclass=.adopts]background-color:#002b5c;display:flex;flex-flow:row wrap;justify-content:space-evenly;width:500px;height:100%;padding:1.5em;[/newclass] [div][attr="class","adopts"][nospaces] [newclass=.fawnspark]color:black; position: relative; overflow: hidden;color: white;padding: 10px;width:200px;height:300px;[/newclass] [newclass=.fawnsparktext]opacity: 0; position: relative; width:180px;[/newclass] [newclass=.fawnsparkimage]position:absolute; top:0; left: 0; background-image:url(https://i.imgur.com/1VzXxUO.jpg?1); width:200px;height:300px;[/newclass] [newclass= .fawnspark:hover .fawnsparktext]opacity: 1;[/newclass] [newclass= .fawnspark:hover .fawnsparkimage]opacity:.5;[/newclass] [div][attr="class","fawnspark"] [div][attr="class","fawnsparkimage"][/div] [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=.specklescar]color:black; position: relative; overflow: hidden;color:white;padding: 10px;width:200px;height:300px;[/newclass] [newclass=.specklescartext]opacity: 0; position: relative; width:180px;[/newclass] [newclass=.specklescarimage]position: absolute; top:0; left: 0; background-image:url(https://i.imgur.com/O0EWidp.jpg?1); width:200px;height:300px;[/newclass] [newclass= .specklescar:hover .specklescartext]opacity: 1;[/newclass] [newclass= .specklescar:hover .specklescarimage]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] [/div]
Edit:
[newclass=.adopts]background-color:#002b5c;display:flex;flex-flow:row wrap;justify-content:space-between;align-items:center;[/newclass] [newclass=.pet-list]width:500px;height:auto;padding:1.5em[/newclass] [newclass=.pet-card]width:200px;min-height:300px;padding: 10px;overflow: hidden;position: relative;color:black; background:white;[/newclass] [newclass=.pet-content] max-width:calc(100% - 20px);margin:auto;[/newclass] [newclass=.rounded]border:1px solid; border-radius:8px;[/newclass] [newclass=.pet-text]opacity:0; position:absolute; top:10px; left:10px; padding:1em;[/newclass] [newclass=.pet-image]height:270px; background-image:url(https://i.imgur.com/1VzXxUO.jpg?1);[/newclass] [newclass=.pet-data]color:black;background:white;margin:1em 0;[/newclass] [newclass= .pet-card:hover .pet-text]opacity: 1;[/newclass] [newclass= .pet-card:hover .pet-image]opacity:.5;[/newclass] [div][attr="class","adopts pet-list"][nospaces] [div][attr="class","pet-card rounded"] [div][attr="class","pet-image rounded"][attr="style","height:270px"][/div] [div][attr="class","pet-text pet-content"] 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 align="center"][attr="class","pet-data pet-content"] [h1]Fawnspark[/h1] [i]Adult female[/i] [/div] [/div]
[newclass=.specklescar]color:black; position: relative; overflow: hidden;color:white;padding: 10px;width:200px;height:300px;[/newclass] [newclass=.specklescartext]opacity: 0; position: relative; width:180px;[/newclass] [newclass=.specklescarimage]position: absolute; top:0; left: 0; background-image:url(https://i.imgur.com/O0EWidp.jpg?1); width:200px;height:300px;[/newclass] [newclass= .specklescar:hover .specklescartext]opacity: 1;[/newclass] [newclass= .specklescar:hover .specklescarimage]opacity:.5;[/newclass] [div][attr="class","specklescar"] [div][attr="class","specklescarimage orphan"][/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] [/div]
|
|