如何製作一個類似於Facebook的標題？

我想一個讓頭酷似對於Facebook，但是當我把它修好它裏面的內容開始在窗口大小調整改變位置。喜歡這裏http://www.housetostay.co.za/ 我怎麼能解決這個問題下面是我的代碼如何製作一個類似於Facebook的標題？

<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>

來源

2013-02-24 humphrey

所以做你的代碼的工作？你有問題嗎？ – 2013-02-24 11:58:56

標題div內的內容移動調整大小 – humphrey 2013-02-24 12:01:21

嘗試添加頁邊距：0px auto; – 2013-02-24 12:04:53

你可以嘗試通過jQuery的做到這一點。

這裏有一個簡單的Demo

在這裏你有調整頁面當Tutorial

此示例wroks罰款。

來源

2013-02-24 12:09:44

讚賞，但沒有工作4我 – humphrey 2013-02-24 12:15:38

使用<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-24 12:18:50 ASGM

OK偉大的想法，但我想它不工作，反正我會繼續努力 – humphrey 2013-02-25 15:37:52

@humphrey我編輯的示例文本，解決什麼，我認爲是你的問題;讓我知道這是否有效。 – ASGM 2013-02-26 09:59:58

你是一個明星，我想問我是否想現在把內容和側邊欄潛水，我應該pu他們在這些div下？並請邀請我在谷歌的Gmail在點com – humphrey 2013-02-26 14:44:35

如何製作一個類似於Facebook的標題？

回答

相關問題