Advertisement:

Author Topic: Fixed bottom navigation.  (Read 4959 times)

Offline Surf3rDud3

  • Jr. Member
  • **
  • Posts: 201
  • Gender: Male
  • Gamer
Fixed bottom navigation.
« on: April 27, 2012, 06:00:52 AM »
Im trying to make a fixed bottom navigation on SMF.

Example is http://forum.tf2gods.com/

Is it hard to do this?

Offline mashby

  • Support Specialist
  • SMF Hero
  • *
  • Posts: 8,380
  • Gender: Male
  • badass beer hound
    • Choppix
Re: Fixed bottom navigation.
« Reply #1 on: April 27, 2012, 02:33:53 PM »
Not hard at all. A little CSS love:
Code: [Select]
.navdiv
{
position: fixed;
bottom: 0px;
right: 0px;
width: 100%;
z-index:9999;
}
Include the content/stuff for it in index.template.php.
Always be a little kinder than necessary.
- James M. Barrie

Offline Surf3rDud3

  • Jr. Member
  • **
  • Posts: 201
  • Gender: Male
  • Gamer
Re: Fixed bottom navigation.
« Reply #2 on: April 27, 2012, 11:29:34 PM »
Ok. I got the CSS part but what about the template? I'm a bit of a newbie.

Offline mashby

  • Support Specialist
  • SMF Hero
  • *
  • Posts: 8,380
  • Gender: Male
  • badass beer hound
    • Choppix
Re: Fixed bottom navigation.
« Reply #3 on: April 28, 2012, 08:39:12 AM »
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:
Code: [Select]
#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:
Code: [Select]
<div id="bottombar">
This is the HTML part for said div. You likely know what you want here.
</div>
Does that help a little?
Always be a little kinder than necessary.
- James M. Barrie

Offline Surf3rDud3

  • Jr. Member
  • **
  • Posts: 201
  • Gender: Male
  • Gamer
Re: Fixed bottom navigation.
« Reply #4 on: May 01, 2012, 09:13:35 AM »
One more question the

Code: [Select]
<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?
« Last Edit: May 01, 2012, 09:23:36 AM by Surf3rDud3 »

Offline mashby

  • Support Specialist
  • SMF Hero
  • *
  • Posts: 8,380
  • Gender: Male
  • badass beer hound
    • Choppix
Re: Fixed bottom navigation.
« Reply #5 on: May 01, 2012, 06:42:55 PM »
Lines 204 through 208. I would recommend editing the content before uploading it. Not tested either. :)
Always be a little kinder than necessary.
- James M. Barrie

Offline Surf3rDud3

  • Jr. Member
  • **
  • Posts: 201
  • Gender: Male
  • Gamer
Re: Fixed bottom navigation.
« Reply #6 on: May 02, 2012, 08:32:22 AM »
Thank you Sir :]

Offline Surf3rDud3

  • Jr. Member
  • **
  • Posts: 201
  • Gender: Male
  • Gamer
Re: Fixed bottom navigation.
« Reply #7 on: May 02, 2012, 10:42:56 AM »
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.)

Code: [Select]
#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.

Offline mashby

  • Support Specialist
  • SMF Hero
  • *
  • Posts: 8,380
  • Gender: Male
  • badass beer hound
    • Choppix
Re: Fixed bottom navigation.
« Reply #8 on: May 02, 2012, 10:19:24 PM »
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 :)
Always be a little kinder than necessary.
- James M. Barrie

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 22,995
  • Master of BBC Abuse
Re: Fixed bottom navigation.
« Reply #9 on: May 03, 2012, 02:27:17 AM »
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.
Mods - Manky Old Themes - Apocalypse theme (WIP)

Quote
(11:43:45 AM) Antechinus: of course, it's also possible that I'm an arrogant know it all bastard
(11:43:59 AM) Eliana Tamerin: you are :P
(11:44:21 AM) Antechinus: hmmph

Offline Surf3rDud3

  • Jr. Member
  • **
  • Posts: 201
  • Gender: Male
  • Gamer
Re: Fixed bottom navigation.
« Reply #10 on: May 03, 2012, 02:34:12 PM »

Offline Surf3rDud3

  • Jr. Member
  • **
  • Posts: 201
  • Gender: Male
  • Gamer
Re: Fixed bottom navigation.
« Reply #11 on: May 07, 2012, 07:16:27 PM »
Bump.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 22,995
  • Master of BBC Abuse
Re: Fixed bottom navigation.
« Reply #12 on: May 07, 2012, 08:06:27 PM »
File? Yes? Somewhere?
Mods - Manky Old Themes - Apocalypse theme (WIP)

Quote
(11:43:45 AM) Antechinus: of course, it's also possible that I'm an arrogant know it all bastard
(11:43:59 AM) Eliana Tamerin: you are :P
(11:44:21 AM) Antechinus: hmmph

Offline Surf3rDud3

  • Jr. Member
  • **
  • Posts: 201
  • Gender: Male
  • Gamer
Re: Fixed bottom navigation.
« Reply #13 on: May 09, 2012, 06:06:53 PM »
My index.template.php is below.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 22,995
  • Master of BBC Abuse
Re: Fixed bottom navigation.
« Reply #14 on: May 09, 2012, 06:20:32 PM »
K will check it out tonight my time. Got stuff to do during the day. :)
Mods - Manky Old Themes - Apocalypse theme (WIP)

Quote
(11:43:45 AM) Antechinus: of course, it's also possible that I'm an arrogant know it all bastard
(11:43:59 AM) Eliana Tamerin: you are :P
(11:44:21 AM) Antechinus: hmmph

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 22,995
  • Master of BBC Abuse
Re: Fixed bottom navigation.
« Reply #15 on: May 11, 2012, 05:40:25 PM »
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: [Select]
// 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:

Code: [Select]
#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.
Mods - Manky Old Themes - Apocalypse theme (WIP)

Quote
(11:43:45 AM) Antechinus: of course, it's also possible that I'm an arrogant know it all bastard
(11:43:59 AM) Eliana Tamerin: you are :P
(11:44:21 AM) Antechinus: hmmph

Offline Surf3rDud3

  • Jr. Member
  • **
  • Posts: 201
  • Gender: Male
  • Gamer
Re: Fixed bottom navigation.
« Reply #16 on: May 13, 2012, 10:06:23 PM »
It doesnt work they way i want it. I just removed it... too much of a hassle thanks anyways.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 22,995
  • Master of BBC Abuse
Re: Fixed bottom navigation.
« Reply #17 on: May 14, 2012, 05:24:50 PM »
What doesn't work about it?
Mods - Manky Old Themes - Apocalypse theme (WIP)

Quote
(11:43:45 AM) Antechinus: of course, it's also possible that I'm an arrogant know it all bastard
(11:43:59 AM) Eliana Tamerin: you are :P
(11:44:21 AM) Antechinus: hmmph