CSS菜单突出显示问题 [英] CSS Menu Highlighting Problem
问题描述
您好，
我正在使用CSS突出显示'suckerfish菜单'中的主要导航项目
当前加载的页面，即在主页上，应该突出显示''home''
导航项目。
我几乎得到了这个工作，除了由于某种原因，突出显示的
背景块并未完全涵盖菜单项的整个区域。
例如，请参阅此测试版页面（通过TinyURL）： http://tinyurl.com/2bk78a
您可以看到Home导航项以红色突出显示。这个
乍看之下看起来不错，但如果你将鼠标悬停在它上面，你会看到一个
白色悬停颜色''背后''红色背景显示完全
宽度，菜单项应以红色突出显示 - 所以
不应该是菜单项之间的任何差距。
有谁能告诉我为什么会这样，我该如何解决？
感谢您的任何建议，
Ste
" Ste" < 23 *** @ 23232.com在留言中写道
news：46 *********************** @ news.zen .co.uk ...
你好，
我正在使用CSS突出显示主导航项目对于当前加载的页面，一个''suckerfish菜单''
，即在主页上，应该突出显示''home''
导航项。 />
我几乎得到了这个工作，除了某些原因，突出显示的
背景块并没有完全涵盖菜单项的整个区域。
例如，请参阅此测试版页面（通过TinyURL）： http://tinyurl.com/2bk78a
您可以看到主页导航项以红色突出显示。这个
乍一看看起来不错，但是如果你将鼠标悬停在它上面，你会看到一个白色的
悬停颜色''后面''红色背景显示全长，
菜单项应以红色突出显示 - 所以不应该是菜单项之间的任何间隙。
请注意IE6不支持：将鼠标悬停在< a href =>
元素以外的任何内容上。您的悬停在IE6中不起作用并导致文本变暗。
灰色空白，这是不可读的。
标准方法是使< aelements block（＃nav2 a：{display：
block}）并将你的：hover等应用到< a> ;.
-
Richard。
文章< 46 ******************** ***@news.zen.co.uk>，
Ste< 23 *** @ 23232.comwrote：
嗨那里，
我正在使用CSS突出显示suckerfish菜单中的主要导航项目'
当前加载的页面，即打开时主页，''home''
导航项目应该突出显示。
我几乎得到了这个工作，除了某些原因，突出显示的
背景块并不完全涵盖菜单项的整个区域。
例如，请参阅此测试版页面（通过TinyURL）： http://tinyurl.com/2bk78a
你可以看到主页导航项以红色突出显示。这个
乍看之下看起来不错，但如果你将鼠标悬停在它上面，你会看到一个
白色悬停颜色''背后''红色背景显示完全
宽度，菜单项应以红色突出显示 - 所以
不应该是菜单项之间的任何差距。
任何人都可以告诉我为什么会发生这种情况以及如何解决这个问题吗？
您可以尝试将您的当前设置为列表项目上的样式
而不是？
li #homenav {color：＃444444;背景：红色; }
并将id移动到相关列表项内。在主页的情况下，
将是：
< li id =" homenav" style =" font-size：37.4px; line-height：
37.4px;">< a style =" font-size：37.4px; line-height：37.4px;"
href =" http://www.beta.zestimages.com/"> HOME< / a>
这让我想起来说这个设计都是绝望的
杂技。这是一个很好的例子，试图做好事情
粒度像素。一个噩梦！首先，看看点击几下浏览器文字放大了什么。
__________________
[任何一点点的人有兴趣知道我是否成功地取代了我的福特XY中的功率助推器_without_
断开主缸？任何人都可以闻到任何制动器
流量超过我的话吗？]
-
dorayme
Ste写道：
感谢您的建议，
怎么样 ：
body {margin：0;填充：0; font-size：71％; font-family：verdana，
arial，helvetica，sans-serif;
71％......和Verdana ......我必须增加文字大小阅读你的
内容，小于我喜欢的尺寸的3/4。
参见本页：
http://k75s.home.att.net/fontsize.html
另外，你的页面不适合我的浏览器窗口没有水平
滚动。
-
-bts
-Motorcycles无视重力;汽车只是吮吸
Hi there,
I''m using CSS to highlight main navigation items in a ''suckerfish menu''
for the currently loaded page, i.e. when on the home page, the ''home''
navigation item should be highlighted.
I''ve almost got this working, except for some reason, the highlighted
background block isn''t quite covering the full area of the menu item.
For example, see this beta page (via TinyURL): http://tinyurl.com/2bk78a
You can see that the Home navigation item is highlighted in red. This
looks fine upon first glance, but if you hover over it, you''ll see a
white hover colour ''behind'' the red background which shows the full
width that the menu item should be highlighted in red up to - so there
shouldn''t be any gaps between menu items.
Can anyone tell me why this is happening and how I can fix it please?
Thanks for any advice,
Ste
"Ste" <23***@23232.comwrote in message
news:46***********************@news.zen.co.uk...Hi there,
I''m using CSS to highlight main navigation items in a ''suckerfish menu''
for the currently loaded page, i.e. when on the home page, the ''home''
navigation item should be highlighted.
I''ve almost got this working, except for some reason, the highlighted
background block isn''t quite covering the full area of the menu item.
For example, see this beta page (via TinyURL): http://tinyurl.com/2bk78a
You can see that the Home navigation item is highlighted in red. This
looks fine upon first glance, but if you hover over it, you''ll see a white
hover colour ''behind'' the red background which shows the full width that
the menu item should be highlighted in red up to - so there shouldn''t be
any gaps between menu items.Be aware that IE6 does not support :hover on anything other than <a href=>
elements. Your hover does not work in IE6 and causes the the text to be dark
grey on blank, that is unreadable.
The standard way is to make the <aelements block (#nav2 a: {display:
block}) and apply your :hover etc to the <a>.
--
Richard.
In article <46***********************@news.zen.co.uk>,
Ste <23***@23232.comwrote:
Hi there,
I''m using CSS to highlight main navigation items in a ''suckerfish menu''
for the currently loaded page, i.e. when on the home page, the ''home''
navigation item should be highlighted.
I''ve almost got this working, except for some reason, the highlighted
background block isn''t quite covering the full area of the menu item.
For example, see this beta page (via TinyURL): http://tinyurl.com/2bk78a
You can see that the Home navigation item is highlighted in red. This
looks fine upon first glance, but if you hover over it, you''ll see a
white hover colour ''behind'' the red background which shows the full
width that the menu item should be highlighted in red up to - so there
shouldn''t be any gaps between menu items.
Can anyone tell me why this is happening and how I can fix it please?
You could try putting your "current" style on the list item
instead?
li#homenav { color:#444444; background: red; }
and moving the id to inside the relevant list item. In the case
of the home page it would be:
<li id="homenav" style="font-size: 37.4px; line-height:
37.4px;"><a style="font-size: 37.4px; line-height: 37.4px;"
href="http://www.beta.zestimages.com/">HOME</a>
Which very much reminds me to say this design is all hopeless
acrobatics. It is a nice example of an attempt to do things fine
grained in pixels. A nightmare! For a start, see what breaks at a
few clicks of browser text enlargement.
__________________
[Anyone the slightest bit interested to know if I succeeded in
replacing the power booster in my Ford XY yesterday _without_
disconnecting the master cylinder? Can anyone smell any brake
fluid over my words here?]
--
dorayme
Ste wrote:
Thanks for any advice,How about:
body { margin: 0; padding: 0; font-size: 71%; font-family: verdana,
arial, helvetica, sans-serif;
71% ... and Verdana ... I have to increase text size to read your
content, which is less than 3/4 of my preferred size.
See this page:
http://k75s.home.att.net/fontsize.html
Also, your page doesn''t fit in my browser window without horizontal
scrolling.
--
-bts
-Motorcycles defy gravity; cars just suck
这篇关于CSS菜单突出显示问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
