Customizing SMF > Graphics and Templates

Fixed bottom navigation.

<< < (4/4)

Antechinus:
Jesus, what a mess. You don't have to use position: fixed; and z-index for stuff inside the bottom bar. Having the bar set will automatically take care of all content.

Exactly what result are you trying to get? You had a div labelled "serverjoin" which had no content at all, and text saying "Join Server" inside another div. I'd suggest just having one link that says "Join Chat". Having a link that says "Chat" and non-linked text that says "Join Server" is a bit confusing. People might be inclined to click on the latter if they aren't familiar with the setup.

As a first guess at what you want, I'd suggest using this for the markup. Using a ul for the main bottom bar container makes more sense than a div. Both are block level elements and behave the same way, but a ul is more suitable for what you want to put inside it (namely a list of links).


--- Code: --- // Show the load time?
if ($context['show_load_time'])
echo '<span class="smalltext">'. $txt['page_created'], $context['load_time'], $txt['seconds_with'], $context['load_queries'], $txt['queries'], '</span>';

echo '
</div>';

// This is where the ul for the bottom bar is going.
echo '
<ul id="bottombar">
<li id="steamlink"><a href="http://steamcommunity.com/groups/beerheadspub/">Steam Group</a></li>
<li id="joinchat"><a href="steam://friends/joinchat/103582791431124790">Join Chat</a></li>
<li id="bottomserver">
<a href="http://www.gametracker.com/server_info/68.232.181.76:27015/" target="_blank">
<img src="http://cache.www.gametracker.com/server_info/68.232.181.76:27015/b_350_20_537AA7_000000_FFFFFF_000000.png" border="0" width="350" height="20" alt=""/>
</a>
</li>
</ul>
</div>';
}
--- End code ---

Putting it here in the template makes more sense than putting it in the header. Either will work with the fixed positioning, but I prefer to keep markup in roughly the right order as I find it makes things easier to follow.

For the css, this should be close for a first guess:


--- Code: ---#bottombar
{
background: url(../images/custom/floatbarbg.png) repeat-x;
position: fixed;
bottom: 0px;
left: 0px;
height: 21px;
width: 100%;
z-index:9999;
        list-style: none;
}
#bottombar li
{
font-size: 16px;
text-transform: uppercase;
font-family: 'Allerta Stencil', sans-serif;
line-height: 20px;
height: 21px;
        float: left;
}
--- End code ---

It will still need paddings and margins sorted on the li's.

Surf3rDud3:
It doesnt work they way i want it. I just removed it... too much of a hassle thanks anyways.

Antechinus:
What doesn't work about it?

Navigation

[0] Message Index

[*] Previous page