Participated not working? (Solved)

[clemie]

thewildside.boards.net/

I have these little links


prntscr.com/elphkq

and for some reason it interferes with the Participated button. If I move the links way up it works again but I kinda like them there so if any way possible.. is there a way to fix this problem?



#mw_quicklinks {

width: 1350px; text-align: center; position: absolute; bottom: 50px; right: 0px;

}

#mw_quicklinks a {

   display: inline-flex; width: 18px; height: 100px;  

   color: #fff!important; margin: 0 10px;

   font-size: 18px; position: relative;

   text-shadow: 0 0 10px #000;

}

#mw_quicklinks a div {

  font: 9px Arial; width: 60px; text-align: center; letter-spacing: 1px;

   color: #fff; position: absolute; top: 30px;

   left: -21px; display: none; text-shadow: 0 0 10px #000;  

}

#mw_quicklinks a:hover div { display: inline; }


^ the links that mess it up.

[Kami]

Since I cannot see this in action (guests do not see the 'participated' button, it's really hard to diagnose. I would hazard a guess that the 'inline flex' and / or the absolute positioning (since all I see is a code snippet, I cannot see if the parent container is set to relative) would be the culprit.

However, it looks like you removed all the divs and replaced it with a table instead, so do you need help with this...?

[clemie]

Well the coding came with the skin and the person who made the skin deleted their account from the coding site so I have no way to get in touch with them. Some help would be nice ^^ as I'm not really sure how it's interfering with it, mainly know only a few basics of coding and everything I have tried hasn't worked at all.

^^ thank you for your time by the way.

[Kami]

Okay, first, try removing "position: absolute;" as well as "bottom: 50px; right: 0px;".

Now, where would you *like* the links to appear?

[clemie]

ok ^^

I'd like them to appear right above the wrapper with just enough space for the text to hang down. Centered.

prntscr.com/elpq2i

[Kami]

Okay so first, take the <div class="mw_links"> and all content, including the closing tag, and move it above <div id="wrapper">.

Next, I really recommend you delete all those <br> tags. If you did this yourself, then I mean no offense, but that's a really bad habit and margins and/or padding should be used instead of this. If this messes something up, we'll get to that later (my suspicion is it's used to create space in order to display the background as a banner, so you'll likely see that space shrink).

Let me know if that's the general vicinity you want the links to be in. (:

[clemie]

Yes that's about right just down a bit lower but general vicinity yes ^_^

[Kami]

Okay, next, remove the "width..." declaration from the links box. There's really no need to define a set width for this unless you start exceeding the max width of your forum. This way, the width of the div will automatically adjust based on the amount of content it has.

In its place, add margin-top: 20%;. That should give you back some of the space you lost when you removed the linebreak tags. Note that I used a percentage, so that amount of space should fluctuate depending on the size of a user's screen. If you don't like that behaviour, then you can set it to a set pixel amount (though be aware that may have some unintended visual consequences when viewing at a smaller screen size, such as content being cut off). Either way, adjust that value in % or px to whatever you desire.

Similarly, add margin-bottom: 2%; after that. The same conditions apply regarding a % vs px amount.

Next, from the mw_quicklinks a CSS, remove: display: inline-flex;

Let me know if this accomplishes what you're looking for!

[clemie]

If I remove the display: inline-flex; then the words disappear when you hover over the icon. So i left it and it seemed to be working fine with everything else you told me to do, however if the inline causes issues else where or may in the future I can live without that and just put an alt in. ^_^ Thank you for all of your help thus far.

[Kami]

Mar 18, 2017 19:28:38 GMT -8 clemie said:

If I remove the display: inline-flex; then the words disappear when you hover over the icon. So i left it and it seemed to be working fine with everything else you told me to do, however if the inline causes issues else where or may in the future I can live without that and just put an alt in. ^_^ Thank you for all of your help thus far.

What browser are you using? When I removed display: inline-flex from the class in the console there was no issue. It could be though just a delayed thing since I'm not actually making the change to the site itself -- the main reason I suggested it is because when I originally took it out via console, it made the alignment of your icons just off-centre.

Now, is the participated button functioning correctly after these changes?

[clemie]

Oh yes it works fine in the preview of the style sheet but on the actual site when I save it and refresh it doesn't seem to work. I am using Google Chrome.

Yes the participated button is working right ^^

[Kami]

Mar 18, 2017 20:49:46 GMT -8 clemie said:

Oh yes it works fine in the preview of the style sheet but on the actual site when I save it and refresh it doesn't seem to work. I am using Google Chrome.

Yes the participated button is working right ^^

Huh, bizarre o_O I admit flex displays are a tad bit out of my wheelhouse right now so I wouldn't know off the top of my head if that is normal behaviour or not. I wouldn't think it would be but I could be wrong.

And great! Is there anything else I can do for you tonight?

[clemie]

No that's it thank you so much for your time and help ^_^