Как настроить фон элемента <ul>для большой вертикальной раздвижной двери? - PullRequest
Новая
       30

Как настроить фон элемента <ul>для большой вертикальной раздвижной двери?

0 голосов
/ 26 июля 2011

Я создаю округлую рамку для списка навигации на боковой панели. У меня проблема в том, что я создал очень длинное частично прозрачное изображение, которое будет действовать в качестве нижней части раздвижной двери, но независимо от того, какой элемент я установил в качестве фона - оно, похоже, не хочет расширяться правильно по всему списку, начиная и останавливаясь на первой ссылке, когда используется в качестве фона для тега. Я предоставил код ниже:

CSS: 

#sidebar{float:left;
        width: 200px;
        text-align: center;
        margin: 0 0 0 0;
        }

    .nav {
    } /*Attempting to display it here leads to evil. As you might expect from the code below*/



    ul.nav {font-family: arial, san serif;

        margin-left:auto;

        margin-right: auto;

        margin-top:0;

        margin-bottom: 0;

        text-align: left ;  

        width: 200px;

        padding: 0;

        height: 1.35em;

        list-style: none;

                background-image:url(headbutt2.png); /*Here, it only exists as background for the first link*/
            background-repeat:none;
        background-position:top;


        }

    #navwid{background-image:url(head2.png); /*This is the extra long image. Here, it does not display at all*/

background-repeat:none;
        background-position:bottom;}



ul.nav li {

    overflow: hidden;

    }



ul.nav a {

    text-align: center;

    font-weight: bold;

    font-size: 1em;

    padding: 0 1em 0 1em;

    height: 1.35em;

    text-decoration: none;

    color: black;

    }

.sidetop {margin:0 auto 0 auto;
    background-image:url(head3.png); /*Caption background. Displays fine with no issues.*/
    background-repeat: no-repeat;
    display:block;
    width:200px;}

HTML: 

 <div id=sidebar>
    <div class="navwid">
 <!--Nav widget container-->
        <div class="sidetop">
 <!--Caption-->
        </div>      
        <div class="nav">


            <ul class="nav">

            <li><a href="#" class="nav">Dummylink</a></li>
            <li><a href="#" class="nav">Dummylink</a></li>

            <li><a href="#" class="nav">Dummylink</a></li>

            <li><a href="#" class="nav">Dummylink</a></li>

            <li><a href="#" class="nav">Dummylink</a></li> 
            <li><a href="#" class="nav">Dummylink</a></li></ul>

        </div> <!--nav end-->


    </div><!--navwid end-->
</div> <!--sidebar end-->

Ответы [ 2 ]

1 голос
/ 26 июля 2011

Это потому, что у вас есть класс nav как для ul, так и для всех li с. Дублируйте CSS для ul.nav и измените один из них на ul li.nav. Для того же самого, удалите все атрибуты фона.

(То, что вы делаете, говорит: «Примените этот CSS к любому ul с классом nav, а также к его потомкам с классом nav.»)

0 голосов
/ 27 июля 2011

Ответ на вопрос, как я только что понял, заключается в том, что я установил высоту 1.35em для тега ul.Он сидел передо мной все время, пока я провел несколько часов, стуча по клавиатуре.Это просто говорит о том, что вы не можете упускать из виду мелочи, когда что-то глючит.

...