Ссылки в вопросе дизайна заголовка

Question

Эй, ребята, я планировал добавить ссылки в свой заголовок, и разработка их вызывает у меня небольшую проблему. Я стремлюсь сделать такой же, как в твиттере, но я сталкиваюсь с двумя проблемами. Во-первых, когда я изменяю цвет фона одной ссылки, он меняет цвет фона только вокруг ссылки, но я хочу, чтобы он изменил фон ссылки с верхней части заголовка до нижней части заголовка (см. в твиттер, чтобы понять лучше) а также, как я могу изменить цвет фона только ссылки, которая активна? Под активным я подразумеваю, что если ссылка ссылается на homepage.php, а пользователь находится в homepage.php, я хочу, чтобы ссылка имела другой цвет фона. Вот код, который я придумал до сих пор:

<div class="littleheader"><div class="logo"><a HREF="index.php"><img class="fleft" src="graphics/little-logo.png" alt="Cliproid" ></a></div>

<div class="navbuttons">
<div class="navigations">
<a class="nav">test</a>
</div>
<br/><br/>
</div>
</div>

и стили:

    div.littleheader
    {
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#aadbba), to(#009933)); 
        background: -moz-linear-gradient(top, #aadbba, #009933); 
        padding: 0.5em;
        color: white;
        clear: left;
        z-index: 1;
        height: 30px;
        }   
     .logo
     {
        margin-left: 100px;
        vertical-align: middle;
        }
       div.navbuttons{
        float: left;
        text-align: left;
        margin-left: 50px;
        }
.fleft
{
    float: left;
    }
.navigations
{
    float: left;
    vertical-align: middle;
    margin-left: 10px;
    }   
a.nav
{
    vertical-align: middle;
    color: white;
    }

Answer 1

Моей первой мыслью было бы изменить a.nav:

a.nav {
  display: block;
  float: right;
  line-height: 120px;      /* just an example, line-height causes vertically aligned */
}

и взять его оттуда.

Вам придется перемещать всю панель навигации вправо, а остальные элементы - влево, но это базовое начало.