1
我最近编辑了为MyBB设计模板的方式。幸运的是,我完全按照我期望的方式制作了它,但是,导航栏似乎打破了。尝试导航后,我意识到我只能点击导航的下半部分。 http://gyazo.com/99337bd5252b37e118ce119d5168bcf3 正如您所看到的,我在哪里绘制红色框是唯一激活链接的地方。大约2个小时后,我发现我的问题是由于“位置:亲戚”造成的。当我删除它时,导航工作正常,但我的面板div一直移动到右侧和不在位置。与位置相冲突的问题:相对;
<div class="main-bg">
<div class="main-width">
<a name="top" id="top"></a>
<div class="top-bar blue-texture"></div>
<div id="header">
<div id="panel">
{$welcomeblock}
</div>
<div class="logo" >
<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb- >settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
</div>
<hr class="hidden" />
</div>
</div>
</div>
<div id="container">
<div class="bg-img">
</div>
<hr class="hidden" />
<div class="menu blue-texture">
<span class="search">
<form action="search.php" method="post">
<input type="hidden" name="action" value="do_search" />
<input type="hidden" name="postthread" value="1" />
<input type="hidden" name="forums" value="all" />
<input type="hidden" name="showresults" value="threads" />
<input type="text" name="keywords" value="search..." onfocus="if(this.value == 'search...') { this.value = ''; }" onblur="if(this.value=='') { this.value='search...'; }" size="22" />
<input type="submit" value="Go" class="search-button" title="Search the forums" />
</form>
</span>
<ul>
<li><a href="{$mybb->settings['bburl']}/index.php">Home</a></li>
<li><a href="{$mybb->settings['bburl']}/page.php?page=tournaments">Tournaments</a></li>
</ul>
</div>
有关于我如何开发这个完整的代码。但是,问题主要在于CSS。
#header {
padding: 60px 0 85px;
height: 56px;
text-align: left;
position: relative;
}
#panel {
background: rgba(0,0,0,0.4);
color: #fff;
border: 1px solid #07090b;
border-radius: 6px;
position: absolute;
top:0;
margin-top: 0px;
right: 0;
padding-top: 4px;
font-size: 12px;
padding-right: 12px;
padding-left: 12px;
height: 130px;
}
.menu {
border-radius: 6px;
-webkit-border-radius: 6px;
border: 1px solid #174d7b!important;
height: 50px;
}
我找不到解决问题的方法,因为没有办法添加位置:relative;并使导航链接仍然按照他们的意图工作。
我想'DIV# header'已经超过'ul',但我需要查看它是否真实或更完整的html/css来测试它。您可以使用Chrome开发人员工具(F12)进行检查,然后检查'div#header'以查看它结束的位置。 – OxyDesign 2014-09-26 21:24:17
更多CSS将有帮助 – Oberst 2014-09-26 21:34:37
小提琴会帮助。 – 2014-09-26 21:36:37