gpt4 book ai didi

html - CSS header 被推到内容之外

转载 作者:太空宇宙 更新时间:2023-11-03 18:30:37 25 4
gpt4 key购买 nike

所以我最近在我的页面上添加了一个 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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com