html - CSS header 被推到内容之外-6ren

html - CSS header 被推到内容之外

转载作者：太空宇宙更新时间：2023-11-03 18:30:37

25

4

所以我最近在我的页面上添加了一个 jQuery 支持的滑动面板，我终于开始工作了......问题是当它滑出时，它会将我的标题推得比实际页面内容更远......如果你访问我的站点并单击内容区域左侧边栏中的“菜单”按钮...面板将滑出，标题移出位置。

www.brooksrealtysvc.com/privacy

我确定问题出在用于 header 的 CSS 中的某处...任何人都可以帮助我确定我可以更改哪些内容以帮助解决此问题吗？

相关 CSS

#banner-wrap
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
}

#banner-bar
{
  height: 177px;
  background-color: #c2c2c2;
}

#banner-hood
{
  position: absolute;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 60;
}

#banner-logo
{
  position: relative;
  top: 0;
  left: 0;
  margin-top: -180px;
  margin-left: 0px;
  z-index: 80;
}

#banner-text
{
  position: relative;
  top: 0;
  left: 0;
  margin-top: -33px;
  margin-left: -346px;
  z-index: 80;
}

#banner-svc
{
  position: relative;
  top: 0;
  left: 0;
  margin-top: 0px;
  margin-left: 550px;
  z-index: 80;
}

相关 HTML

<body>
<div id="banner-wrap">
    <div id="banner-bar">
        <div id="banner-hood">
            <center><img src="http://test.vtisvc.com/wp-content/themes/brk_2013/images/header_hood.png" style="float:center"></center>
            <div id="banner-logo"><center><img src="http://test.vtisvc.com/wp-content/themes/brk_2013/images/header_logo4.png" style="float:center"></center></div>
            <div id="banner-svc"><center><img src="http://test.vtisvc.com/wp-content/themes/brk_2013/images/header_svc.png"></center></div>
            <div id="banner-text"><center><a href="http://www.brooksrealtysvc.com"><font face="georgia" color="#8a0304&quot;">HOME</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.brooksrealty.idxco.com/idx/8087/featured.php"><font face="georgia" color="#8a0304">LISTINGS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.brooksrealty.idxco.com/idx/8087/roster.php"><font face="georgia" color="#8a0304">AGENTS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.brooksrealty.idxco.com/idx/8087/basicSearch.php"><font face="georgia" color="#8a0304">SEARCH MLS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.brooksrealtysvc.com/rentals"><font face="georgia" color="#8a0304">RENTALS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.brooksrealtysvc.com/history"><font face="georgia" color="#8a0304">HISTORY</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.brooksrealtysvc.com/contact"><font face="georgia" color="#8a0304">CONTACT</font></a></center></div>
            </div>
    </div>
</div>

最佳答案

将以下内容放在您网站的 head 部分:

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
    $('.open').click(function(){
        $('#banner-hood').toggleClass('displace');
    });
});
</script>

您还需要在 CSS 中添加以下行:

.displace { margin-left:120px; }

jsFiddle example

对于转换，将以下内容添加到您的 CSS:

#banner-hood {
    -webkit-transition:all .35s;
    -moz-transition:all .35s;
    transition:all .35s;
}

关于html - CSS header 被推到内容之外，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19893799/

25

4

0

文章推荐： jQuery: .animate() 不再使用 scrollLeft

文章推荐： python - 如何在 rethinkdb 中制作涉及字符串字段的映射？

文章推荐： python - 如何使用 pygame 通过单击鼠标来暂停循环？

文章推荐： python - 在 CGI 脚本中不捕获异常有什么风险

perl - 不能持续到循环 block 之外
我正在努力解决一个问题 Rahul 正在玩一个非常有趣的游戏。他有 N 个圆盘(每个圆盘的半径相等)。每个磁盘都有一个不同的数字，从 1 到 N 与之相关联。磁盘一个接一个地放在一堆中。 Rahul
java - 此请求的时间戳在 recvWindow 之外
我正在尝试使用此代码发出请求: public JsonObject account() throws BinanceApiException { return (new Request
emacs - 如何将所选区域粘贴到 emacs 之外？
我使用的是 Mac OS 和 emacs -nw (终端模式)。我不知道如何在 emacs 之外粘贴东西(已由 M-w 在 emacs -nw 中实现)。我知道emacs -ns可以做到。搜索互
html - 导航栏菜单内容溢出到父 div 之外
我试图让导航栏菜单出现在“标题容器”菜单中，但由于某种原因，导航栏链接流到外面(在修改浏览器窗口之前)。我不明白为什么，但我怀疑它与这一行有关: div class="collapse navbar-
hibernate - 如何将环境细节移到 EAR 之外
我们的项目是在 WAS 6.1/hibernate/struts 上使用 RAD 7.0 开发的中型 Web 应用程序，该应用程序已投入生产。目前我们在属性文件中硬编码了生产系统的 IP 地址，在 h
javascript - 将传单控件放置在 map 之外
我的要求是在传单中创建 N 类型的标记。该列表很大，无法容纳在 map 区域中。我想要类似的东西: http://blog.georepublic.info/2012/leaflet-example
spring - 将某些异常排除在报告给 Sentry 之外
如 docs 中所述，基于 spring-boot 的 Web 服务正在使用 Sentry .它工作正常，但不应将某些异常发送到 Sentry ，例如为了在某些请求上返回 HTTP 状态 410
ios:图层显示在其托管 View 之外
我已经阅读了 Apple Core Animation 文档。它说核心动画没有提供在窗口中实际显示图层的方法，它们必须由 View 托管。当与 View 配对时， View 必须为底层图层提供事件处理
javascript - 哪个事件来检查元素是否在滚动时位于视口(viewport)之外？
我试图在滚动时检查元素是否在我的视口(viewport)内。如果它在我的视口(viewport)之外，我会添加一个类来将元素固定到顶部。我用来确定元素是否在视口(viewport)之外的函数是: i
jQuery:如果用户点击 div 之外
我正在查询中创建一个弹出窗口。悬停时弹出窗口一切正常。当用户的鼠标离开 div 以关闭它时，我让它看到计时器启动。如果他在计时器完成之前再次进入 div，则计时器将被清除。这很好，但是如果用户点击
python - 如何防止玩家移动到给定区域 map 之外？
我使用名为 zonemap 的字典创建了一个 4x6 区域 map 。我在该字典中嵌套了多个字典；每个区域代表玩家可以访问并与之互动的区域。我希望能够将玩家的移动限制在该 4x6 区域，并重新显示他们
jQuery - 如何检测项目当前是否在视口(viewport)之外？
我正在构建一个页面，该页面将使用 ajax 来更新主要内容区域。用户将单击左侧菜单栏中的项目来更新右侧的 div 并包含搜索结果。我想检测用户是否向下滚动到目前为止导致右侧结果 div 移出视口(v
jQuery 拖放不允许我拖动到可滚动 div 之外？
好的，我在 div 中有一个带有拖放类的表格，其溢出设置为“自动”，这允许我隐藏部分时间表，只在底部放置一个滚动条。但是，我只是在可滚动 div 之外创建了一些可放置元素，并且我的可拖动元素无法离开可
c# - 如何可靠地检测项目何时滚动到 View 之外？
我有大量项目绑定(bind)到 ListBox，VirtualizingStackPanel 设置为它的 ItemsPanel。随着用户滚动和项目容器的创建，我做了一些工作来用数据填充项目(使用数据库
c# - 将类成员的范围限制在私有(private)之外
我想知道是否有一种方法可以将类成员的访问范围专门限定为在 C# 中获取/设置实现，以减少我意外直接访问它们的可能性。类似 private 的东西，但只允许 get/set 访问它，我想我可以将每个变量
swift - 如何使模态视图出现在 Controller 之外？
我正在尝试编写一个小游戏，以应用我自己在本类(class)中学到的概念。当游戏打开时，我想要一个自定义模态视图来告诉用户如何玩。同样，当他们输了时，我想呈现一个结果页面，该页面将位于 if 语句内。我
javascript - 我怎样才能让这个下拉列表总是显示在父 div 之外？
我有一个非常具体的 HTML/CSS 和/或 JS 问题。我在 this fiddle here 创建了一个示例显示问题。我有一个可滚动的 div，它是一个表的父级: ...我的表格行之一包
java - 将二进制文件复制到 jar 之外
我的 jar 文件中打包了一个 exe，我试图将它复制到一个临时位置，以便我可以使用 Desktop.browse() 运行它，为此我设置了一个使用 class.getResourceAsStream
javascript - 无法让我的变量将其值保留在 getJSON 之外
您好，我对这段代码有疑问。我的问题是第一个 console.log(smile_per_sec) 给了我需要的值，但是第二个给了我声明变量时给它的值。 $.getJSON( twitter
javascript - 传单标记弹出窗口延伸到 map 之外
我必须更改标记弹出窗口的默认大小以容纳我想放入其中的数据。我更改了一些 map 设置，因此当用户将其拖出 View 时，它总是会弹回最大范围。我遇到的问题是，对于靠近边缘的标记，当它的弹出窗口打开时，

首页

博学

6Ren·AI

商城

html - CSS header 被推到内容之外