Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  Add ReplyNew TopicNew Poll

 Image get inherited between three codes
#
Okay, so I've gotten a custom staff code for a sidebar on one of the skins. The board. The code is individual per user (lists also subaccount when hovered over. The problem is I need three of them so when I added others, the newly added image showed on the previous one. So once three were dne, I had them all three with the last image and I can't seem to find a way to get to it. The coder isn't quite able to sort through.

user posted image

CODE

<center>
<style>
#lofstframe { width: 100px;  height: 150px; background: url(http://i159.photobucket.com/albums/t130/liz_firestarter3/The%20Arrow/eb80e088-e80f-4824-bb72-359a3b4e15bd_zpsjqddt6yb.jpg); position: relative; overflow: hidden; }

#lofstframe .lofsthold { width: 90px; height: 140px; background: #000; padding: 5px; position: absolute; top: 0px; left: -100px; -webkit-transition: .8S all ease-in; -moz-transition: 0.8S all ease-in; o-transition: 0.8S all ease-in; }
#lofstframe:hover .lofsthold { left: 0px; -webkit-transition: .8S all ease-out; -moz-transition: 0.8S all ease-out; o-transition: 0.8S all ease-out; }

.lofsthold h1 { width: 90px; height: 25px; line-height: 25px; color: #080; font-size: 19px; text-align: center;  text-transform: uppercase; margin: 0px; text-decoration: underline; }

.lofstlinks { width: 90px; height: 110px; margin-top: 5px; overflow: auto; font-size: 11px; line-height: 11px; text-align: center; }
.lofstlinks a:link, .lofstlinks a:visited, .lofstlinks a:active { color: #fff; }
.lofstlinks::-webkit-scrollbar { width: 2px; }
.lofstlinks::-webkit-scrollbar-thumb { background: #000; }
.lofstlinks a:hover { font-style: italic; }

</style>

<div id="lofstframe">

<div class="lofsthold">

<h1>Felicity</h1>
<div class="lofstlinks">
<a href="http://thearrow.jcink.net/index.php?showuser=1">Felicity</a><p>
<a href="http://thearrow.jcink.net/index.php?showuser=22">Niamh</a><p>
<a href="http://thearrow.jcink.net/index.php?showuser=35">Tara</a><p>
<a href="http://thearrow.jcink.net/index.php?showuser=110">Felony</a><p>
</div></div></div>

<style>
#lofstframe { width: 100px;  height: 150px; background: url(http://i159.photobucket.com/albums/t130/liz_firestarter3/The%20Arrow/1865a506-5746-4d60-9066-1d8f18f717ce_zpsp7m3nztk.jpg); position: relative; overflow: hidden; }

#lofstframe .lofsthold { width: 90px; height: 140px; background: #000; padding: 5px; position: absolute; top: 0px; left: -100px; -webkit-transition: .8S all ease-in; -moz-transition: 0.8S all ease-in; o-transition: 0.8S all ease-in; }
#lofstframe:hover .lofsthold { left: 0px; -webkit-transition: .8S all ease-out; -moz-transition: 0.8S all ease-out; o-transition: 0.8S all ease-out; }

.lofsthold h1 { width: 90px; height: 25px; line-height: 25px; color: #080; font-size: 19px; text-align: center;  text-transform: uppercase; margin: 0px; text-decoration: underline; }

.lofstlinks { width: 90px; height: 110px; margin-top: 5px; overflow: auto; font-size: 11px; line-height: 11px; text-align: center; }
.lofstlinks a:link, .lofstlinks a:visited, .lofstlinks a:active { color: #fff; }
.lofstlinks::-webkit-scrollbar { width: 2px; }
.lofstlinks::-webkit-scrollbar-thumb { background: #000; }
.lofstlinks a:hover { font-style: italic; }

</style>

<div id="lofstframe">

<div class="lofsthold">

<h1>Oliver</h1>
<div class="lofstlinks">
<a href="http://thearrow.jcink.net/index.php?showuser=200">Oliver</a><p>
<a href="http://thearrow.jcink.net/index.php?showuser=223">Amit Ibn</a><p>
<a href="http://thearrow.jcink.net/index.php?showuser=220">Jack</a><p>
</div></div></div>

<style>
#lofstframe { width: 100px;  height: 150px; background: url(http://i159.photobucket.com/albums/t130/liz_firestarter3/The%20Arrow/37a8d7d4-74ba-4054-9d34-d016523395dd_zpsfoum3sjn.jpg); position: relative; overflow: hidden; }

#lofstframe .lofsthold { width: 90px; height: 140px; background: #000; padding: 5px; position: absolute; top: 0px; left: -100px; -webkit-transition: .8S all ease-in; -moz-transition: 0.8S all ease-in; o-transition: 0.8S all ease-in; }
#lofstframe:hover .lofsthold { left: 0px; -webkit-transition: .8S all ease-out; -moz-transition: 0.8S all ease-out; o-transition: 0.8S all ease-out; }

.lofsthold h1 { width: 90px; height: 25px; line-height: 25px; color: #080; font-size: 19px; text-align: center;  text-transform: uppercase; margin: 0px; text-decoration: underline; }

.lofstlinks { width: 90px; height: 110px; margin-top: 5px; overflow: auto; font-size: 11px; line-height: 11px; text-align: center; }
.lofstlinks a:link, .lofstlinks a:visited, .lofstlinks a:active { color: #fff; }
.lofstlinks::-webkit-scrollbar { width: 2px; }
.lofstlinks::-webkit-scrollbar-thumb { background: #000; }
.lofstlinks a:hover { font-style: italic; }

</style>

<div id="lofstframe">

<div class="lofsthold">

<h1>Liz</h1>
<div class="lofstlinks">
<a href="http://thearrow.jcink.net/index.php?showuser=207">Felicity K.</a><p>
<a href="http://thearrow.jcink.net/index.php?showuser=208">Melisandre</a><p>
<a href="http://thearrow.jcink.net/index.php?showuser=228">Melek</a><p>
</div></div></div>
</center>


This post has been edited by LizFirestarter: Jul 10 2016, 04:28 AM
PM
#
Do I need to be logged in to see this? Sorry, just trying to see the issue in action on the forum itself.

signature
email: admin@jcink.com :: blog: John C.
#
Sorry. It's meant to be on another skin but since it wasn't working properly, removed it.

I was gonna do it in dohtml here but you don't seem to have it activated.

Here

John
PM
#
Its because you're using IDs as classes, and how CSS works. IDs are supposed to be unique as in they only appear once on the page. The ID in question is <div id="lofstframe">

If you changed it to like, <div id="lofstframe">"> <div id="lofstframe-2"> <div id="lofstframe-3">

Then you can assign a different background for #lofstframe-1, #lofstframe-2, and #lofstframe-3.

Otherwise, the CSS will take the last used (or more specific) style to apply to all the matched elements, which is why they're all using the same background image (because you've assigned it to the same ID and it matches 3 because you've used an ID three times instead of once.)

This post has been edited by disco before the breakdown: Jul 10 2016, 04:33 PM
PM
#
Worked beautifully. Went ahead and changed the first one to have -1 to keep the count going.

Thank you!

disco before the breakdown
PM
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll