0

我正在尝试制作一个与 facebook 完全相同的标题，但是当我将其固定在里面时，它的内容开始改变 window resize 上的位置。像这里http://www.housetostay.co.za/ 我该如何解决这个问题下面是我的代码

<html>
<head>
  <style>
    .heading { 
      display:block;
      top:0px;
      left:0px;
      right:0px;
      height:20px;
      position:fixed;
      border:1px solid #888;
      padding:0px;
      text-align:center;
      font-weight:bold;
      color:#000;
      background: #ccc;
      width: 100%;
      height: 100px;
      z-index:3;
    }
  </style>
</head>
<body>
  <div class = "heading">
    <table id ="headertable" align="left">
      <tr>
        <td>
          <a href="http://www.housetostay.co.za">
            <h2 class= "logo">HouseToStay</h2>
            <td>&nbsp;</td>
          </a>
        </td>
        <td><a href="http://www.housetostay.co.za" class="button middle">How it works</a></td>
        <td><a href="http://www.housetostay.co.za" class="button middle">Contact us</a></td>
        <td><a href="register.php" class="button middle">PostAd</a></td>
        <td><a href="jobs.php" class="button middle">Jobs</a></td>
        <td><a href="http://www.housetostay.co.za" class="button middle">Buy it</a></td>
        <td>
        </td>
    </table>
    <table class ="profile">
    <tr>
      <td>
        <h2>user</h2>
      </td>
      <td>
        <img src="bhubezi/images/logos/nopic.png" width="50" height="40">
      </td>
    </tr>
  </table>
</div>
4

2 回答 2

2

您可以尝试通过 jQuery 执行此操作。

这里有一个简单的Demo

在这里你有一个教程

此示例在调整页面大小时运行良好。

于 2013-02-24T12:09:44.903 回答
1

使用<table>for 布局通常不受欢迎，在这种情况下，您更难实现您想要做的事情。我建议用<table>更标准的 HTML 元素替换基于 - 的布局（例如，通过将菜单放入列表<ul>并将用户配置文件放入其自己的<div>），然后绝对定位这些元素并为它们提供明确的像素位置。然后，当您调整窗口大小时，它们不应该四处移动。

这是一个示例（使用您自己的代码，尽可能少地进行修改）：

<html>
<head>
<style>
.heading { 
    display:block;top:0px;left:0px;right:0px;height:20px;position:fixed;border:1px solid #888;padding:0px;text-align:center;font-weight:bold;color:#000;background: #ccc;width: 100%;height: 100px;z-index:3;
}

#logo {
    position:absolute; /* This will keep it one place */
    left:200px; /* This specifies what place */
}

#menu {
    position:absolute; /* This will keep it one place */
    left:320px; /* This specifies what place */
    width:400px; /* This makes sure the menu doesn't shrink if the window is made smaller */
    list-style-type:none;
}

#menu li {
    float:left;
    margin-right:10px;
}

#profile {
    position:absolute; /* This will keep it one place */
    left:750px; /* This specifies what place */
    width:100px; /* This makes sure the profile doesn't shrink if the window is made smaller */
}

#profile h2 {
    display:inline;
}
</style>
</head>
<body>
<div class="heading">
    <a href="http://www.housetostay.co.za" id="logo">
        <h2>HouseToStay</h2>
    </a>
    <ul id="menu">
        <li><a href="http://www.housetostay.co.za" class="button middle">How it works</a>    </li>
        <li><a href="http://www.housetostay.co.za" class="button middle">Contact us</a></li>
        <li><a href="register.php" class="button middle">PostAd</a></li>
        <li><a href="jobs.php" class="button middle">Jobs</a></li>
        <li><a href="http://www.housetostay.co.za" class="button middle">Buy it</a></li>
    </ul>
    <div id="profile">
        <h2>user</h2>
        <img src="bhubezi/images/logos/nopic.png" width="50" height="40">
    </div>
</div>

编辑：向标题元素添加了明确的像素位置。

于 2013-02-24T12:18:50.597 回答