【问题标题】:Resolutions causing CSS menu issue导致 CSS 菜单问题的解决方案
【发布时间】:2014-09-19 14:28:03
【问题描述】:

我已经尝试解决这个问题大约一个星期了,但没有运气。我不明白是什么导致菜单在 a) 不同的分辨率和 b) 不同的缩放级别下改变长度。

http://www.aplustutoring.com.au/JoomlaInstall/index.php/about

您可以清楚地看到菜单不等于应有的正文长度(如果不尝试不同级别的缩放)。我已经对菜单进行了很多更改,并且我开始认为这是导致问题的原因。

关于我应该更改哪些 css 属性的任何想法?谢谢。

【问题讨论】:

    标签: php html css joomla


    【解决方案1】:

    我将删除“rt-container”上的 padding-left 和 padding-right,同时删除“rt-containerInner”上的所有填充并删除 margin-left。基本上有很多容器,有些容器的左右填充值不同。我会通过删除任何左右填充和边距并仅添加到需要它的单个项目(如果有)来简化一切。

    此外,菜单容器未完全填满菜单项,因此存在差异。 如果你有完整的 .css 文件,我可以帮忙整理一下

    希望这会有所帮助。

    【讨论】:

    • 你好。感谢您的帮助,但问题仍然存在。您能否详细说明菜单容器以及我如何解决此问题?谢谢。
    • 在 Chrome 中,您可以右键单击菜单项 -> 检查元素 -> 从将出现在新窗口或页面底部的元素中选择“rt-menubar”。因此,当您将鼠标悬停在每个项目上时,您将看到它是否对齐或需要调整,您也可以在其中进行更改以预览将发生的情况。在这个视图中,很明显菜单没有填满整个菜单容器。应该考虑到这一点。
    【解决方案2】:

    这是使用百分比作为边距的原因。我不知道为什么要使用这些。要解决此问题,请打开模板文件夹中的 template.css 文件。

    第 8 行,更改:

    margin: -0.2% 0 0;
    

    到这里

    margin: 0;
    

    第 114 行,更改此内容

    margin-top: -1.9%;
    

    到这里:

    margin-top: 0;
    

    在第 114 行,您可以将 0 更改为适合您需要的值,但请坚持使用像素作为度量单位。

    希望对你有帮助

    【讨论】:

    • 您好,感谢您的帮助。然而;我试过这个,仍然是同样的问题。菜单在缩放时仍然向左/向右移动,或者在不同的屏幕分辨率下具有不同的位置。我还应该清除浏览器缓存以查看更改吗?
    • 并非总是必要的,但还是请尝试清除浏览器缓存。如果您打开了全局配置,也请尝试清除全局配置中的 Joomla 缓存。
    • 啊抱歉,我完全误读了这个问题。我的回答解决了菜单根据浏览器宽度上下移动的问题
    • 别担心,你能看看向右移动的菜单吗?具体来说,它看起来“固定”在左侧,但右侧确实略有移动。再次感谢
    • 如果我正确地关注了您的问题,那么这是非响应元素的典型行为。您是否希望菜单宽度根据浏览器的宽度进行调整?
    猜你喜欢
    • 2012-02-07
    • 2018-09-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-07-21
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多