0

Facebookの場合とまったく同じようにヘッダーを作成しようとしていますが、それを修正すると、内部のコンテンツがウィンドウのサイズ変更で位置を変更し始めます。ここのように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で試すことができます。

ここに簡単なデモがあります

ここにチュートリアルがあります

このサンプルは、ページのサイズを変更するときに問題なく動作します。

于 2013-02-24T12:09:44.903 に答える
1

レイアウトに使用<table>することは一般的に眉をひそめ、この場合、あなたがやろうとしていることを達成するのが難しくなります。ベースのレイアウトをより標準的なHTML要素に置き換えて<table>（たとえば、メニューをリストに入れ、<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 に答える