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.

  ClosedNew TopicNew Poll

 positioning userlinks [SOLVED]
#
We've done custom userlinks on this site, and we'd really love to get them to center themselves over the banner, but so far nothing I try really seems to work.

Right now they look like this, as if they default to aligning to the left:

user posted image

But ideally they'd look like this, where they're kind of centered over the banner:

user posted image

Here's a link to the board, but you won't be able to really see all of the userlinks without registering an account. Feel free to do so if that could help you help us!

Here's the relevant coding!

HTML
CODE
<div class="um-av-back">
<div class="um-av">
<div style="width: 100px; height: 100px; background: url(<!-- |field_16| -->); background-size: cover; background-position: <!-- |field_11| -->;">&nbsp;</div>
</div></div>


<div class="um-back">



<Table><tr>

<Td><div id="n-toggle"><i class="fa fa-weixin" title="toggle cbox" style="font-size: 50px;"></i></div></td>


<td><div style="margin-left: 130px;"><div class="m-<!-- |g_id| -->" align='center'><span id='sub_bar_2' style="display:none; margin: 0px 15px 0px 130px;">
<% SUBACCOUNTS %>
</span>
<span id='subacct_link_2'><a href='javascript:void(0);'  onclick="document.getElementById('subacct_link_2').innerHTML=document.getElementById('sub_bar_2').innerHTML;" style="font-size: 15px;">SWITCH ACCOUNT</a></span></div></div></td>


<Td><div class="um-name"><a href='index.php?showuser=<!-- |id| -->'><!-- |name| --></a></div></td>




<td><div class="m-<!-- |g_id| -->" align='center'><center><div style="margin: 0px 10px;"><a href='index.php?act=UserCP'><i class="fa fa-sliders" title="user settings"></i>
<br>settings</a></div></center></div></td>

<td><div class="m-<!-- |g_id| -->" align='center'><center><div style="margin: 0px 10px;"><a href='index.php?act=Msg&CODE=01'><i class="fa fa-envelope" title="inbox"></i> <br>inbox (<!-- |new_msg| -->)</a></div></center></div></td>

<td><div class="m-<!-- |g_id| -->" align='center'><center><div style="margin: 0px 10px;"><a href="index.php?act=UserCP&CODE=alerts"><i class="fa fa-exclamation-circle" title="alerts"></i> <br> alerts (<!-- |new_alerts| -->)</a> </div></center></div></td>

<td><div class="m-<!-- |g_id| -->" align='center'><center><div style="margin: 0px 10px;"><a href="index.php?act=Login&CODE=03&key=<!-- |auth_key| -->"><i class="fa fa-power-off" title="log out"></i> <Br> Log Out</a></div></center></div></td>




<td><div class="g-<!-- |g_id| -->" style="display: none;" align='center'> <center><div style="margin: 0px 10px;"><a href='/index.php?act=Login&CODE=00'><i class="fa fa-sign-in" title="log out"></i><Br> LOG IN</a> </div></center></div></td>

<td><div class="g-<!-- |g_id| -->" style="display: none;" align='center'> <center><div style="margin: 0px 10px;"><a href='/index.php?act=Reg&CODE=00'><i class="fa fa-magic" title="log out"></i> <br>REGISTER</a></div></center></div></td>




<td><center><div style="margin: 0px 10px 0px 50px;"><a href="admin.php" target="_blank" class="acp-<!-- |g_access_cp| -->"><i class="fa fa-cogs" title="acp"></i> <br>Admin CP</a></div></center></td>


<td><center><div style="margin: 0px 10px"><a href="index.php?act=modcp" class="mcp-<!-- |g_is_supmod| -->"><i class="fa fa-cog" title="mod cp"></i> <br>Mod CP</a></div></center></td>



</tR></table>




</div>


CSS
CODE
/* CUSTOM USER MENU */


.um-back {
width: 100%;
position: fixed;
top: 0px;
background: url(http://files.jcink.net/uploads/priorirp/SKIN_4/back4.png);
padding: 15px 25px 2px;
font-family: ubuntu mono;
font-size: 12px;
text-align: center;
font-style: italic;
text-transform: uppercase;
color: #8c2028!important;
line-height: 103%;
border-bottom: 15px solid #8c2028;
z-index: 1000;
}

.um-back a {
color: #d2c6cc!important;
font-family: ubuntu mono;
font-size: 10px;
text-align: center;
font-stywle: italic;
text-transform: uppercase;
}

.um-back i {
text-align: center;
font-size: 37px;
color: #8e777e;
padding-bottom: 3px;
}

.um-name {
width: 300px;
font-family: oleo script;
font-size: 34px;
font-stywle: italic;
text-transform: lowercase;
color: #d2c6cc;
font-align: center;
padding-right: 20px;
margin-left: 15px;
}

.um-name a {
font-family: inherit!important;
font-size: inherit!important;
font-style: inherit!important;
text-transform: inherit!important;
color: inherit!important;
letter-spacing: -1px;
}

.um-av-back {
width: 100px;
height: 100px;
position: fixed;
top: 25px;
left: 90px;
padding: 10px;
border: 1px solid #8e777e;
z-index: 1001;
border-radius: 100%;
}

.um-av {
width: 100px;
height: 100px;
overflow: hidden;
background: url(http://placehold.it/100);
border-radius: 100%;
}

.um-av img {
width: 100px;
height: 100px;
}


Thanks for any and all help! <3
PM
#
this is a super hacky solution, but you can just make the container that contains the username wider until the buttons are situated where you want them. not perfect but effective!
PM
#
QUOTE (anna karenina @ Jul 5 2017, 09:40 PM)
this is a super hacky solution, but you can just make the container that contains the username wider until the buttons are situated where you want them. not perfect but effective!


My worry with this method is that it'll cut off the links for people with smaller screens? For instance, my co-admin (who made the skin) doesn't really encounter the issue I'm having, because her screen is smaller than mine.
PM
#
Unfortunately, I don't think there's a super easy answer here because you're using a table. You might try adding margin: 0 auto to your table, but that's going to make everything centered and jostle some of the elements on the left out of place. You might want to simply pop those into divs and then used fixed positioning and a z-index to put them off.

That being said, as someone with a slightly larger screen the (guest, at least) links don't look off to me. Might I ask why you're using a table here? No offense - as I mentioned it looks good, but there might be a different way to accomplish this and get it exactly the way you'd like.

EDIT: You can try the hacky method suggested, but instead of adding a width try adding a max-width which shouldn't cause issues on a smaller screen. It's not working for me, at least, I think cause of the table.

This post has been edited by owl: Jul 5 2017, 10:28 PM

signature
Kindly do not contact me on Discord or PM me for support.

user posted image
#
I'd love to hear if there's a different way to code this without using a table! I didn't create the code so I can't really say why it was coded that way, but if there's a way to code it so I can make things closer to what I'm wanting, that would be great.
PM
#
This can be marked as solved!
PM
#
This topic has been solved. If you need anymore help please post a new thread. Thanks for choosing Jcink services.

signature
email: admin@jcink.com :: blog: John C.
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 ClosedNew TopicNew Poll