0

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??

2 Answers 2

1

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.      
}
2
  • I want to make a full width navbar that is located at the bottom of the screen and looks like the bottom side of a pokeball. White buttons, with red while hoovered or active and with that black line that has elipses on the center right on top of those buttons, just like on the picture:i.imgur.com/iB7r0Ar.png
    – Miguel
    Nov 1, 2013 at 9:49
  • I have edit my answer @MikeStardust,may be its help you.
    – jitender
    Nov 1, 2013 at 10:19
0

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

12
  • I'm kinda new at html, but a lot friendly with photoshop so i just did what i knew:) yes i do want a full widthnav bar that adjusts itself to the different screen sizes:) oh let me change then:)
    – Miguel
    Nov 1, 2013 at 9:05
  • oh and that roung thing above the nav bar will be include into the nav bar?
    – RGLSV
    Nov 1, 2013 at 9:15
  • Yes:) i'm trying to make it look like the bottom part of a pokeball;) i tried it using background-color: #xxxxx; and it is the exact same thing, the colors are not being set properly:S there has to be a way to do this... thank you for your inputs:)
    – Miguel
    Nov 1, 2013 at 9:16
  • I'd also like the buttons to be under the round center of the pokeball like in the picture (i.imgur.com/iB7r0Ar.png) but right now i just want to get the design right:)
    – Miguel
    Nov 1, 2013 at 9:25
  • here you go mike: your nav bar
    – RGLSV
    Nov 1, 2013 at 9:40

Not the answer you're looking for? Browse other questions tagged or ask your own question.