Скользящие двери CSS не работают

Question

Это, вероятно, немой вопрос, но не может найти ответ с помощью Google. Левая сторона изображения отображается хорошо, не может для меня жизнь получить правильный образ, чтобы показать.

HTML/CSS Newb, просто изучая основы.

http://bungle.ca/ http://bungle.ca/images/

<ul id="nav"> 
    <li><a href="#">Link One</a></li> 
    <li><a href="#">Link Two</a></li> 
    <li><a href="#">Link Three</a></li> 
    <li><a href="#">Link Four</a></li> 
    <li><a href="#">Link Five</a></li> 
    <li><a href="#">Link Six</a></li> 
</ul> 

#nav{ 
min-width: 1024px; 
height: 30px; 
padding: 0px; 
margin: 0px; 
color: #eeeeee; 
white-space: nowrap; 
list-style-type: none; 
} 

#nav li{ 
display: inline; 
background: url('../images/tabRight.png') no-repeat right top; 
} 

#nav li a{ 
padding: .2em 1em; 
height: 30px; 
width: 100px; 
text-decoration: none; 
float: left; 
text-align: center; 
background: url('../images/tabLeft.png') no-repeat left top; 
} 

Answer 1

просто добавить display:inline-block; к #nav LI

Answer 2

Заполнитель в #nav li a это позволяет фоновое изображение tabLeft для наложения на верхней части tabRight фонового изображения в #nav li.

Попробуйте добавить margin-right: 10px; в элемент #nav li a, где 10px - фактическая ширина изображения tabRight.png. В качестве альтернативы вы можете добавить padding-right: 10px; в элемент #nav li. Вам нужно будет отрегулировать правильное заполнение для #nav li a соответственно, чтобы кнопка соответствовала размерам.

Вот раздвижные двери код, который я всегда использовал:

<li><a href="#" class="oneup">See Our Breads</a></li> 

li { 
    background: url(img/button_gold_right.gif) top right no-repeat; 
    padding: 0 10px 0 0; /* 10px is width of _right.gif image) 
    display: block; 
    height: 23px; /* height & line-height the same so text centered vertically */ 
    line-height: 23px; 
    float: left; 
} 

li a { 
    display: block; 
    background: url(img/button_gold_left.gif) top left no-repeat; 
    padding: 0 0 0 10px; /* 10px on left so text is centered horizontally */ 
} 

Answer 3

стороне: Хороший метод для отладки CSS является использование firebug или элемент Inspect в Mozilla или Chrome. Чтобы запустить элемент проверки, щелкните правой кнопкой мыши на своем браузере и нажмите элемент проверки. Справа вы можете изменить css, изменив атрибуты, и вы можете просмотреть определенные атрибуты css для каждого элемента, щелкнув этот элемент в консоли элемента проверки.

Глядя на ваши нав ли, это размеры в настоящее время 0 на 0, так что нет места для изображения, чтобы показать

Если вы измените код

 

    #nav li{ 
    display: block; 
    width: 250px; 
    height: 30px; 
    background: url('../images/tabRight.png') no-repeat right top; 
    } 

теперь вы можете видеть ваши tabRight image.