2012-05-08 3 views
0

привет я новичок в css и php тоже я пытался использовать его на моем сайте php, у меня есть css, как показано ниже, в котором я пытаюсь изменить изображение при наведении, но я получаю ошибку, а мои половинные изображения меняются только ...Ошибка при использовании CSS при использовании php?

enter image description here

в то время как изображения я использую являются,

enter image description here

enter image description here

мой CSS код,

#header #nav a { 
    float:left; 
    margin-left:7px; 
    padding-left:17px; 
    background:url("../design/nav-l.png") 0 -35px no-repeat; 
    text-decoration:none; 
} 
#header #nav a span { 
    float:left; 
    display:block; 
    padding-right:17px; 
    background:url("../design/nav-r.png") 100% -35px no-repeat; 
    line-height:35px; 
} 
#header #nav a:hover { background-position:0 -100px; } 
#header #nav a:hover span { background-position:100% -70px; } 

надеется на ваш ответ заранее!

С наилучшими пожеланиями,

+0

использование firebug, большой инструмент. – Grunf

+1

Этот вопрос не имеет ничего общего с PHP. Вам будет намного лучше, если вы разместите URL-адрес, который иллюстрирует проблему. Тоже на плагинах firebug и веб-разработчиков. – gview

+0

Нельзя помечать этот вопрос с помощью "PHP" – xCander

ответ

0

Вы не можете смешивать% и точки на то же значение CSS.

background:url("../design/nav-r.png") 100% -35px no-repeat; 
#header #nav a:hover span { background-position:100% -70px; }

Эти две строки являются недействительными CSS и, вероятно, заставляют парсер выходить из себя. Начните, установив их, используя либо% , либо px, но не указанную комбинацию.

background-position: 100px -35px; <--- OK 
background-position: 100% 50% <--- OK 
background-position: 100% 100px <--- Invalid

Если интерфейс не ведет себя правильно после этого, вы должны использовать веб-инспектор, как Firebug или инспектор, встроенный в вашем браузере, чтобы увидеть, что происходит под капотом. Это часто дает вам большие подсказки относительно того, что не так с вашими стилями.

Если вы все еще пытаетесь решить проблему самостоятельно с помощью веб-инспектора, уточните вопрос более подробно (что вы пробовали, каким был результат), и мы будем лучше стрелять в помощь вам исправить это :)

0

В коде ниже нав-р ваше маленькое изображение, где нав-BG ваш большой Б.Г. изображение

#header #nav a { 
    color: #fff; 
    float:left; 
    margin-left:7px; 
    padding-left:17px; 
    background:url("nav-r.png") 0 -35px no-repeat; 
    text-decoration:none; 
} 
#header #nav a span { 
    float:left; 
    display:block; 
    padding-right:17px; 
    background:url("nav-bg.png") 100% -35px no-repeat; 
    line-height:35px; 
} 
#header #nav a:hover { background-position:0 -70px; } 
#header #nav a:hover span { background-position:100% -70px; } 
</style> 
</head> 
<body> 
<div id='header'> 
    <div id='nav'> 
     <a href='#'><span>Rajan Rawal</span></a> 
    </div> 
</div> 
</body> 
</html> 

После того, как вы проверить это правильно, то вы просто измените ниже css и посмотреть магию

#header #nav a { 
    color: #fff; 
    float:left; 
    margin-left:7px; 
    padding-left:17px; 
    background:url("nav-r.png") 0 0 no-repeat; 
    text-decoration:none; 
} 
#header #nav a span { 
    float:left; 
    display:block; 
    padding-right:17px; 
    background:url("nav-bg.png") 100% 0 no-repeat; 
    line-height:35px; 
} 
Смежные вопросы