Hi all, I'm having a couple issues using a custom header in my forum, both related to the fact that I have a pretty tall (~200 pixel) header. I'm pretty novice at html/css, so I may be missing some fixes that would be obvious to most web developers -- please forgive me. ?
Issue #1
The widget on the right-hand side (the one with the share/reply/following buttons and post timeline) starts about halfway down the screen (on my monitor) due to the amount of space the header takes up. (See this post and scroll down for an example.) And since the widget doesn't move as you scroll, that leaves very little room for the timeline. Is there any way to make this widget expand to fill the available vertical space when scrolling?
Issue #2
When highlighting text in a post, that awesome little quote button shows up, but it shows up offset by the height of the header. This both looks weird and sometimes makes it impossible to click on. There's another post on here where someone has the same issue as me, but their header is very different than mine. I've tried to apply the same fix to my forum, but with no success. (I probably just don't understand CSS well enough.)
Here is my custom HTML and CSS. Feel free to rip it apart. ?
<div class="cosmoheader" width="100%">
<table border="0" max-width="100%" align=center>
<tr><td align=center><!-- Header -->
<a href="https://cosmoteer.net">
<img class="logo" src="https://cosmoteer.net/Images/logo_med.png" alt="" title="Cosmoteer" border="0" align="center"/><p>
</a>
</td></tr>
<tr><td class="linky" align=center><!-- Links -->
<a class="linky" href="https://cosmoteer.net/about.html">About</a> |
<a class="linky" href="https://cosmoteer.net/media.html">Media</a> |
<a class="linky" href="https://forum.cosmoteer.net">Forum</a> |
<a class="linky" href="http://slack.cosmoteer.net">Chat</a> |
<a class="linky" href="http://blog.cosmoteer.net">Blog</a> |
<a class="linky" href="https://cosmoteer.net/history.html">Version History</a>
</td></tr>
<tr height="15"></tr>
<tr><td align=center>
<a href="http://www.indiedb.com/games/cosmoteer" title="View Cosmoteer on Indie DB" target="_blank"><img src="https://button.indiedb.com/popularity/medium/games/59919.png" alt="Cosmoteer" /></a>
</td></tr>
<tr height="15"></tr>
</table>
</div>
@import url('https://fonts.googleapis.com/css?family=Play');
.cosmoheader
{
background-image: url("https://cosmoteer.net/Images/bg.jpg");
}
td.linky
{
color: rgb(220, 220, 255);
}
a.linky
{
text-decoration: none;
color: rgb(150, 150, 255);
font-family: 'Play', sans-serif;
font-size: 16px;
}
img.logo
{
max-width:100%;
}
Thanks for your help! I really appreciate it!
