【问题标题】:css inherit is getting me downCSS继承让我失望
【发布时间】:2011-03-19 21:07:23
【问题描述】:

我目前正在制作一个使用超级鱼的菜单。它可以通过 css 完全自定义,但我遇到了一个非常非常令人沮丧的问题。

第二层菜单不知何故继承了我不知道在哪里的值,而我所做的任何改变都会完全破坏整个布局。看起来好像文本在某种程度上是一整行,然后应该是。但是,鼠标悬停样式正在正常工作。

另一个令人沮丧的事情是我需要将文本从 tier1 菜单项移动到栏的底部 - 到目前为止,我没有尝试过仅移动文本而不是整个项目。如果有人对此有解决方案,也将不胜感激。

你可以明白我的意思:http://redaxo.witconsult.de/ 它涉及菜单项 2 和 5 (Leistungen & Kontakt) 上的 2 级菜单

这是我认为导致问题的代码: 完整代码在这里:http://redaxo.witconsult.de/files/superfish.css

非常感谢!!!

.sf-menu {
    float:          left;
    margin-bottom:  1em;

}

.sf-menu a {
    text-indent: 7px;
}


.sf-menu a, .sf-menu a:visited  {
    /* visited pseudo selector so IE6 applies text colour*/
    color: #333;
}

.sf-menu li {       /*///////////// menu lvl 1 /////////////*/
    color:          #333;
    width:          118px;
    line-height:    85px;
    font-weight:    normal;
    font-size:      14px;
    text-decoration:none;
    background:     url(../images/menu/menuitem.png);
}

.sf-menu li a:focus, .sf-menu li a:hover, .sf-menu li a:active {
    color:          #DDD;
    line-height:    85px;
    background:     url(../images/menu/menuitem-mo.png);
}

.sf-menu li li {    /*///////////// submenu lvl 2 ///////////////////*/
    color:      #ddd;
    font-size:  12px;
    top:        50px;
    height:     26px;
    background:     url(../images/png_black40per.png);
}

.sf-menu li li a:focus, .sf-menu li li a:hover, .sf-menu li li a:active {
    color: #333;
    line-height: 26px;
    background: url(../images/png_white40per.png);

【问题讨论】:

  • Firefox 的 Firebug 扩展应该可以让你看到继承样式的来源。
  • line-height: 85px; 这将防止菜单中的文本位于底部。
  • 非常感谢! line-height 属性是我问题的根源......我通过将它们替换为“line =”来解决它。但是现在我遇到的问题是所有文本总是在元素的顶部对齐。 valign 不起作用,我看不到任何其他将文本移动到底部/中间的方法。不应该垂直对齐:底部;实现这个?不知何故,文本根本不响应垂直对齐。 :(

标签: css parent-child superfish inheritance


【解决方案1】:

针对您的新问题 - 文本现在位于顶部而不是底部 - 更改锚元素的高度 <a> 并添加一些 padding-top:

/* superfish.css line 59 */
.sf-menu a {
    color:#DDDDDD;
    text-indent:7px;
    height:         50px; /* ADDED */
    padding-top:            35px; /* ADDED */
}
/* superfish.css line 78 */
.sf-menu li a:focus, .sf-menu li a:hover, .sf-menu li a:active {
    color:          #DDD;
    height:         50px; /* CHANGED */
    background:     url(../images/menu/menuitem-mo.png);
    padding-top:            35px; /* ADDED */
}

...如果您无法编辑superfish.css,请在其他地方添加类似这样的规则:

#site-content .sf-menu li a {
    height:         50px;
    padding-top:            35px;
}

PS 请更新问题正文以反映您问题的变化;)

【讨论】:

  • 谢谢,我马上试试! :) 关于你的 PS :这里删除旧问题并用新问题替换它是否常见,还是我应该在上面添加新问题?抱歉,我真的很喜欢这个网站的运作方式,但我是新来的,仍然需要弄清楚最佳使用标准是什么。
  • @j00ls - 通常,提出一个新问题是更传统的处理方式。但既然我回答了你的“新”问题……我不确定。
  • 谢谢,我不能只是复制粘贴,还需要进行一些更改,但我明白了总体思路。我得到了高度和填充现在以他们应该的方式工作。 :)
  • @j00ls - 嘿,我很欣赏被接受的答案,我问这个有点粗鲁,但你能给我一个 +1 吗?我有足够的代表感到满意,但我希望得到bronze CSS badge - 我需要+1,而不是接受的答案。不过这是你的电话:)
猜你喜欢
  • 2017-04-01
  • 1970-01-01
  • 1970-01-01
  • 2019-12-28
  • 2011-07-25
  • 2018-06-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多