Help Coding a Fixed Toolbar in HTML/CSS

[SimpliSpiritu]

I've got the code down to this so far:

<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<link rel="stylesheet" href="jquery.mobile.fixedToolbar.polyfill.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
<script src="jquery.mobile.fixedToolbar.polyfill.js"></script>
<div data-role="page">
<div data-role="header" data-position="fixed">

<a href="http://www.simplispiritu.blogspot.com"><img src="http://i1357.photobucket.com/albums/q755/SimpliSpiritu/HOMELOG_zps175b5c18.jpg" border="0" aligin="left" alt=" photo HOMELOG_zps175b5c18.jpg" /></a>


<a href="mailto:simpli.spiritu@gmail.com?subject=Contact: Simpli Spiritu"><img src="http://i1357.photobucket.com/albums/q755/SimpliSpiritu/MAILLOGcopy_zps853ee6dd.jpg" border="0" aligin="right" alt=" photo MAILLOGcopy_zps853ee6dd.jpg"/></a>



<h1>

<a href="https://www.facebook.com/SimpliSpiritu"><img src="http://i1357.photobucket.com/albums/q755/SimpliSpiritu/FACELOG_zpse8d6db3c.jpg" border="0" aligin="middle" alt=" photo FACELOG_zpse8d6db3c.jpg"/>

<a href="https://plus.google.com/102700982276145549137/posts"><img src="http://i1357.photobucket.com/albums/q755/SimpliSpiritu/GOOGLOG_zpsfbf126c6.jpg" border="0" aligin="right" alt=" photo GOOGLOG_zpsfbf126c6.jpg"/>

<a href="https://twitter.com/SimpliSpiritu"><img src="http://i1357.photobucket.com/albums/q755/SimpliSpiritu/TWITLOG_zps61919940.jpg" border="0" aligin="right" alt=" photo TWITLOG_zps61919940.jpg"/>




</a></a></a></h1>
</div><!--/header -->
<div data-role="content">
<pre><code>
</code></pre>
</div><!-- /page --></div>

The only problem is that it doesn't work correctly in Internet Explorer.

Also, I am trying to make the "buttons" after the <h1> tag align with the Mail image (right above the tag). It keeps glitching and messing up the whole bar every time I try and realigin them.

Any help would be greatly appreciated! This is the first time I've done something like this (posting on a forum) so any feedback is helpful at this point!

[mzpresto]

You have your 3 </a></a></a> tags bunched together, they should each follow your links like this:

<a href="https://www.facebook.com/SimpliSpiritu"><img src="http://i1357.photobucket.com/albums/q755/SimpliSpiritu/FACELOG_zpse8d6db3c.jpg" border="0" aligin="middle" alt=" photo FACELOG_zpse8d6db3c.jpg"/>
</a>

<a href="https://plus.google.com/102700982276145549137/posts"><img src="http://i1357.photobucket.com/albums/q755/SimpliSpiritu/GOOGLOG_zpsfbf126c6.jpg" border="0" aligin="right" alt=" photo GOOGLOG_zpsfbf126c6.jpg"/>
</a>

<a href="https://twitter.com/SimpliSpiritu"><img src="http://i1357.photobucket.com/albums/q755/SimpliSpiritu/TWITLOG_zps61919940.jpg" border="0" aligin="right" alt=" photo TWITLOG_zps61919940.jpg"/>
</a>

[greg_baugher]

This is what I use for a fixed bar at the top of the page for links, a logo, or something else. I wrote the code and worked on it until I got it right. The words are from one of my web pages so I can remember how to do it.

Using a fixed background and links at the top of the page. The logo stays at the top of the page and the links stay at the top of the page. If the page scrolls up the page contents scroll under the header.

The CSS code for a fixed page header.

.fixed_header
{
position:fixed;
left:0px;
top:0px;
width:100%;
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
background-color:#999999;
background-image:url("backgrounds/wood5.jpg");
background-repeat:repeat-x;
background-size:contain;
}

Use a background picture for the fixed page header that is about the height of the bar that you want at the top. The background-size:contain; will let the background picture grow or get smaller if the text size of the page is made bigger or smaller.



The HTML code that has the fixed_header class has to be at the bottom of the HTML code, before the </BODY> tag, or instead of scrolling under the page header the page will scroll over the page header. It used to, but now I don't know, put the fixed header at the bottom of the <BODY> to be sure.

The background-color and background-image you can make what you need. Take the <H1> tag off and use a table.

Greg Baugher

[greg_baugher]

The <H1> tag could be what internet explorer is making different. I remember using <H1> tags with Internet Explorer and it always put a margin at the top, even if the style of the H! tag didn't have a margin.

I use <TABLE class = "fixed_header"> and then put what you want in the table.

Greg Baugher

[SimpliSpiritu]

Wow! Thanks for all of the tips!

Let me rework the coding, and see how it turns out.