Custom Navigation Bar (html/css) for a website [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

---

Want to improve this question? Add details and clarify the problem by editing this post.

Closed 8 years ago.

Improve this question

I am making a website and though of a cool navigation bar that is suppose to look like this:

Edit - accidentaly erased the all the css code, only had the nav fixed at the bottom - Edit

I managed to make it look like this: http://pokemasters.freeiz.com/bare.html I just ran out of ideas.... i got the images that i made seperatly, a navbar:

& buttons:

I'm looking for a full width navbar that adjusts itself to different screens, is located at the bottom of the screen, red buttons while active or hovered and white buttons while normal, with that pokeball line right on top of it and overlaying the buttons

Can someone point me in the right direction please??

Answer 1

So you want to have a full width nav bar? with elements stretching auto? or? And why are you using images to have a color? you can just use background: red; on hover or active, and background: white on normal states

Answer 2

what you want to do? it is not clear. you doesn't need to use image in #navigation li a.profile instead of it you can use background colour.

#navigation li a.profile {
    width: 240px;
    background-color:#ffffff;
    text-decoration: none;
    }
    #navigation li a.profile:hover {
    background-color:red;
    background-position: -240px;
    text-decoration: none;
    }
    #navigation li a.profile:current {
    background-color:#cccccc;
    background-position: -240px;
    background-repeat: no-repeat;
    text-decoration: none;
    }

or if you want to full width navigation bar.

#navigation ul {
    list-style: none;
    text-align: center;
    width:100%;
    }

    #navigation li {
    display: inline;
    width:16.6%;
    border-right:1px solid #ccc;
    }
    #navigation li:last-child{
    border-right:none;
    }

if you want the 'ball' image above the navigation bar. please use a <span> just above of the #navigation 'div' and set its background image 'ball' image.

property of <span class=ball_Img>

.ball_Img{
  background:url('whatever');
  position:relative;
  z-index:5;
}

#navigation{
 .......//property previous define please write here.
position:relative;
top:-50px;  // you can change according to your situation.      
}