Question

我有一个多页网站，每页都使用相同的标题。我的PHP包括标题。在除一个页面之外的所有页面上，标题位于同一位置，但是，仅在其中一个页面上，标题向右移动大约5px。我一直在对它进行故障排除，我发现如果我将div标签设置在它下面的最小高度为500px，那么菜单就会移回原位。然而，一旦高度低于500px，它再次向右移动5px。我已经确定了我的问题，但我不知道是什么导致它或如何解决它。

我没有看到很多关于stackoverflow的帖子特定于我的问题，但是一对似乎有分歧的帖子是Blueprint CSS: Page moves to left side if the content is long和My Header is moving但是没有一个答案似乎可行为我工作。第一个链接建议：

html {
overflow-y: scroll;
}

然而，这对我不起作用。

第二个链接涉及它发生在不同的浏览器上，但是，这发生在同一个浏览器中。

我也读过Why am I getting shift around header regions in two HTML pages built using almost same code，但它也没有为我的问题提供解决方案。

这是我的基本代码结构。这几乎是所有页面上的相同代码，但每个页面在标题下的内容量不同。

<div class="body2">
<?php include('includes/header.php'); ?>
<div style="text-align: center;">
<a href="view-design-portfolio"><div>
<h2>Design</h2><br><img src="images/designheader.jpg">
</div></a>
<a href="construction-gallery"><div>
<h2>Construction Management</h2><br><img src="images/constructionheader.jpg">
</div></a>
<a href="home-staging-gallery"><div>
<h2>Home Staging</h2><br><img src="images/stagingheader.jpg">
</div></a>
</div>
<?php include('includes/footer.php'); ?>
</div>

我的标题和菜单css如下。我没有使用标准的html <nav>元素构建菜单，因为菜单首先被拆分不同而且我从未返回过，但是，除了一页之外，它仍然可以正常工作。 css包含在外部文件中，不会将页面更改为页面。

.header_wrap {
height:100%;
max-height: 155px;

}

.menuli {
display: inline-block;
padding-right: 49.33px;
float: left;
}

.logo {

margin-top: 10px;
margin-bottom: 10px;
height: 132px;
width: 400px;
}

.menui {

margin-top: 104px;

}

a:link {
text-decoration: none;
color: black;
font-size: 1.17em;
}

这是我的标题html：

<div class="header_wrap" style="margin-bottom: 40px;">
<div class="menu-wrap">
<nav class="menu">

<!---- Menu Options Here ----->

<ul class="gmenu" style="max-width: 1088px; width: 100%; margin-top: -5px; padding-left: 0px; margin-left: 55px; color: black;">
    <li class="menuli menui"><a href="index">HOME</a></li>
    <li class="menuli menui"><a href="design">DESIGN</a></li>
    <li class="menuli menui" style="padding-right: 44.33pox;"><a href="staging">STAGING</a></li>

    <li class="menuli logo"><a href="index"><img src="images/logo.png" style="max-width: 400px !important; width: 400px; margin-bottom: 24px;"></a>   </li>  

    <li class="menuli menui"><a href="gallery">GALLERY</a></li>    
    <li class="menuli menui"><a href="shop">SHOP</a></li>
    <li class="menuli menui" style="padding-right: 0px !important;"><a href="blog">BLOG</a></li>
</ul>
</nav>
</div>
</div>

我想就可能导致此问题的原因提出一些建议，以及如何解决这个问题。

以下是该网站的链接：http://davisdesignandhost.com/ginger

如果内容低于500px的高度，如果下面的内容我的标题正在移动

0 个答案: