Нижний край не работает - PullRequest
Новая
       4

Нижний край не работает

2 голосов
/ 12 августа 2010

Что мешает работе нижнего поля?http://jsfiddle.net/cq8VC/1/

Я просто хочу, чтобы активный подпрыгнул в воздухе примерно на 10 пикселей.

Ответы [ 4 ]

3 голосов
/ 12 августа 2010

Хорошо, добавив диапазон вокруг внутренних элементов элементов списка следующим образом: 

<div id="navigation"> 
    <ul id="links"> 
        <li><a href="index.html"><span>Home</span></a></li> 
        <li><a class="active" href="projects.html"><span>Projects</span></a></li> 
        <li><a href="whyme.html"><span>Why Me?</span></a></li> 
        <li><a href="contact.html"><span>Contact</span></a></li> 
    </ul> 
</div>

И изменив свой CSS на следующий, вы должны получить желаемый результат: 

#navigation ul#links li a.active{color:#1161A5; }
#navigation ul#links li a.active span { position: relative; top: -10px; }
#navigation ul#links li a{ font-family:LeagueGothicRegular;color:#ADC060;text-decoration:none;padding-left:10px;border-left:2px solid #1161A5;}
#navigation ul#links li a:hover,#navigation li:active{color:#1161A5;}
#navigation ul#links li:first-child a{border-left:none;}
#navigation ul#links li{float:left;font-size:1.5em;margin-left:10px;}
2 голосов
/ 12 августа 2010

Как насчет этого: http://jsfiddle.net/vXaeP/1/

CSS 

#navigation ul#links li{
    padding-left:10px;
    border-left:2px solid #1161A5;
    float:left;
    font-size:1.5em;
    margin-left:10px;
}

#navigation ul#links li a{
    font-family:LeagueGothicRegular;
    color:#ADC060;
    text-decoration:none;
}

#navigation ul#links li a.active{
    color:#1161A5;
    position: relative;
    bottom: 10px;
}

#navigation ul#links li a:hover {
    color:#1161A5;
}

#navigation ul#links li:first-child {
    border-left: 0px;
}

HTML 

<div id="navigation">
    <ul id="links">
        <li><a href="index.html">Home</a></li>
        <li><a class="active" href="projects.html">Projects</a></li>
        <li><a href="whyme.html">Why Me?</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div>
0 голосов
/ 12 августа 2010

Я могу себе представить, что поле margin-bottom не будет подталкивать контент вверх, а просто отталкивает все остальное.

Вы пробовали возиться с позициями? Попробуйте добавить позицию: относительно

и позицию: абсолютную по отношению к тегу, но только по активной ссылке. Затем вы можете ссылаться на него в CSS таким образом:

li {позиция: относительная; } a: hover {позиция: абсолютная; верх: -10px; }

Я еще ничего не тестировал, так что не держи меня за это !! Ха!

0 голосов
/ 12 августа 2010

возможно использовать: 

#navigation ul#links li a.active{color:#1161A5;position:relative;top:-10px;}

(так как для встроенных элементов)

...