Blogger custom Code

Thx for the reply.
I applied a nav bar to my blog. Problem is not working right. I am 99,9% it;s the HTML code.

The nav bar is composed out of CSS and html body.
I tested the css on a different website also made by me and it works great. Also you can go here https://jigsaw.w3.org/css-validator/#validate_by_uri and validate it. It works.

My problem is with the html. You can go here and validate it. Free Online HTML Validator - FreeFormatter.com Thing is what that shows me ,makes no sense. Cuz doing what they tell you, just makes things worse.

Maybe,you can take a look. It's this very simple code...simple if you know what your doing.

/* The CSS Code for the menu */
#btrix-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}


#btrix-nav li {float: left;}


#btrix-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}


#btrix-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}


#btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;}


#btrix-nav li a:hover {cursor: pointer;}


#btrix-nav li a:hover img {top: -85px;}


#btrix-nav li a:hover .aname {top: 85px;}


#btrix-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}


#btrix-nav li:nth-child(2) a {background: #9bc704;}


#btrix-nav li:nth-child(3) a {background: #0dc3ff;}


#btrix-nav li:nth-child(4) a {background: #51a2ec;}


#btrix-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;}
------------------------------
And this is the HTML

<div id="btrix-nav">


<li>
<a href="#"><span class="aname">Homes</span>
<img src="http://2.bp.blogspot.com/-vcR6lUGsroY/Ug5ATZk8oZI/AAAAAAAAA00/XENkFMaBgv0/s1600/btrix-home.png" />
</a>
</li>

<li>
<a href="#">
<span class="aname">Download</span>
<img src="http://2.bp.blogspot.com/-TcXder58ssQ/Ug5ASx8pT0I/AAAAAAAAA0o/5UdA4_gLnV8/s1600/btrix-download.png" />
</a>
</li>

<li>
<a href="#">
<span class="aname"> MySql</span>
<img src="http://2.bp.blogspot.com/-umlQ7fKXobk/Ug5AT2bLnnI/AAAAAAAAA08/yrQHl6qPMH8/s1600/btrix-mysql.png" />
</a>
</li>

<li>
<a href="#">
<span class="aname"> Html</span>
<img src="http://2.bp.blogspot.com/-2-iy8RJ92V8/Ug5ASDCru-I/AAAAAAAAA0c/GOBCPpZlA04/s1600/Btrix-html.png" />
</a>
</li>

<li>
<a href="#">
<span class="aname">Contact</span>
<img src="http://4.bp.blogspot.com/-vsm9s0yQr9I/Ug5ASjqawnI/AAAAAAAAA0k/rqb01AbGaFw/s1600/btrix-contact.png" />
</a>
</li>
</div>

I started a new Blog just for this. So you won't have to work to figure it out so hard,considering that i have like 5 more blogs that i work (test) on constantly. Different,templates, different widgets , different eveything, trying to find the right combination. Some thing work,some don't. I have a perfect finished template idea in mind, but because it's hard to put it in code...i often have to compromise.

Just giving up on a entire simple thing as a "menu bar" can mess up the whole website design.

Test Template As you can see their only 4 instead of 5 tabs.Contact tab missing.

Here is the template file of the website. http://1drv.ms/1TqV4AG You can scan it .No virus,i uploaded it from my onedrive account. Wanted to use the file attachments here,but it tells me that the xml is invalid file and doesn't wanna upload it
So you are looking at a clean template just with the menu bar installed.