Пользовательские панели навигации (HTML/CSS) для веба-сайта

Question

Я делаю сайт и хотя прохладной панель навигации, которые предполагают, чтобы выглядеть следующим образом:

Edit - accidentaly стерли весь код CSS, только имел СЧА фиксируется в нижней части - Редактирование

мне удалось сделать это выглядеть следующим образом: http://pokemasters.freeiz.com/bare.html я просто выбежала из идей .... я получил изображения, которые я сделал seperatly, а Navbar:

& кнопки:

Я ищу навигатор на всю ширину, который настраивается на разные экраны, расположен в нижней части экрана, красные кнопки, когда они активны или парят, и белые кнопки, в то время как обычные, с этой линией pokeball прямо поверх нее и накладывая кнопки

Может кто-нибудь указать мне в правильном направлении, пожалуйста?

Answer 1

Итак, вы хотите иметь полную навигационную панель ширины? с элементами растяжения авто? или? И почему вы используете изображения, чтобы иметь цвет? вы можете просто использовать фон: красный; на зависании или активном, а фон: белый в нормальных состояниях

Answer 2

что вы хотите сделать? это не понятно. вам не нужно использовать изображение в #navigation li a.profile, вместо него вы можете использовать цвет фона.

#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; 
    } 

или если вы хотите на всю ширину навигационную панель.

#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; 
    } 

Если вы хотите получить изображение «шара» над навигационной панелью. используйте <span> чуть выше #navigation 'div' и установите его образ «шара» на фоновом изображении.

свойства <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.  
}