Im trying to make a fixed bottom navigation on SMF.
Example is http://forum.tf2gods.com/
Is it hard to do this?
Not hard at all. A little CSS love:
.navdiv
{
position: fixed;
bottom: 0px;
right: 0px;
width: 100%;
z-index:9999;
}Include the content/stuff for it in index.template.php.
Ok. I got the CSS part but what about the template? I'm a bit of a newbie.
Others should correct me if I'm wrong, but due to the positioning, it can go pretty much anywhere. In the example site you provided, the div with that class is near the top of the template. Personally, I would use a div ID in this case, but it doesn't really matter all that much
CSS:
#bottombar
{
position: fixed;
bottom: 0px;
right: 0px;
width: 100%;
z-index:9999;
}
You may also want to adjust some of the display stuff in there. The example site made a table with one cell which is a little unnecessary.
Code for index.template.php:
<div id="bottombar">
This is the HTML part for said div. You likely know what you want here.
</div>
Does that help a little?
One more question the
<div id="bottombar">
This is the HTML part for said div. You likely know what you want here.
</div>
Here is my template...
I understand the CSS part but the php im not so sure. Can you just add in there and upload it? Then ill look at it and learn from it?
Lines 204 through 208. I would recommend editing the content before uploading it. Not tested either. :)
Thank you Sir :]
One last issue and i'll leave you alone.
When i add links to the bar... (I made separate div-ids for the text/links) I have to click above the link. (I have a picture below) I have to click the top of the background bottom bar. I can't actually click the link itself... Is this due to a line in code not needed or hasn't been added?
This is the CSS for the bottombar (It's messy but I'm still trying to get it the way I want it.)
#bottombar
{
background: url(../images/custom/floatbarbg.png) repeat-x;
position: fixed;
bottom: 0px;
left: 0px;
height: 21px;
width: 100%;
z-index:9999;
}
#bottombartext
{
font-size: 16px;
text-transform: uppercase;
font-family: 'Allerta Stencil', sans-serif;
line-height: 20px;
height: 21px;
bottom: 0px;
left: 0px;
position: fixed;
bottom: 0px;
width: 100%;
z-index:9999;
}
#serverjoin
{
background: url(../images/custom/joindaserver.png) no-repeat;
text-align: right;
position: fixed;
bottom: 20px;
right: 0px;
height: 96;
width: 127;
z-index: 1000;
}
#bottomserver
{
text-align: right;
position: fixed;
bottom: 0px;
right: 0px;
height: 20px;
width: 100%;
z-index:9999;
}
The white line is where i have to click to use the link.
I'll plead 50% ignorance and 50% I would love to see this in action. Might be able to figure it out in real-time rather than static images :)
Where's the css for the links? Meh and bollocks. Gimme the index.template.php you're actually running now. I want it exactly as it is on your site.
Sorry :[
http://beerspub.com/index.php
Bump.
File? Yes? Somewhere?
My index.template.php is below.
K will check it out tonight my time. Got stuff to do during the day. :)
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).
// 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>';
}
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:
#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;
}
It will still need paddings and margins sorted on the li's.
It doesnt work they way i want it. I just removed it... too much of a hassle thanks anyways.
What doesn't work about it?