Twitter like fixed header

2019-04-02 09:53发布

站内文章 / HTML/CSS
12 0 0

问题:

How to create a fixed header like Twitter/Facebook on the top of the page ?

I am testing with this but when I am resizing my browser, complete design distorted

  <div id="head">
   <div id="logo">
    <a href="#"></a>
   </div>
   <div style="display:inline;">
    <input style="margin-top:3px;" class="searchbox" type="text"/>
   </div>
 <ul>
  <li>
   <a href="#" title="Home">Home</a> 
  <li>
  <li>
   <a href="#" title="Profile">Profile</a> 
  </li>
  <li>
   <a href="#" title="Profile">Actions</a> 
  </li>
  <li>
   <a href="#" title="Profile">Invite Friends</a> 
  </li>
 </ul>


</div>
<div id="content">
      </div>

Style

     html {
         height:100%; /* fix height to 100% for IE */
         max-height:100%; /* fix height for other browsers */
         padding:0; /*remove padding */
         margin:0; /* remove margins */

         background:#fff; /*color background - only works in IE */
         /* hide overflow:hidden from IE5/Mac */
         /* \*/
         overflow:hidden; /*get rid of scroll bars in IE */
         /* */
}
body {
         height:100%;
         max-height:100%;
         min-width:960px;
         overflow:hidden;
         padding:0;
         margin:0;
         font: 13px/1.5 Helvetica Neue,Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif;
}
#content {
         display:block;
         height:100%;
         max-height:100%;
         overflow:auto;
         position:relative;
         z-index:3;
         word-wrap:break-word;
         top:45px;
}
#head {
         position:absolute;
         margin:0;
         top:0;
         display:block;
         width:100%;
         height:40px;
            -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
         background:#333333;
            background: -moz-linear-gradient(center top , #736F6E, #111111) repeat scroll 0 0 transparent;

}
#logo a {
            background: url("2.gif") no-repeat scroll 6px 2px transparent;
            color: #FFFFFF;
            display: block;
            height: 100%;
            margin-right: 5px;
            outline: medium none;
            text-indent: -9999px;
            width: 140px;
           float:left;
}
.searchbox{
            -moz-border-radius: 4px 4px 4px 4px;
            -moz-box-shadow: 0 1px 0 #444444;
            background: none repeat scroll 0 0 #666666;
            border: 1px solid black;
            color: #CCCCCC;
            font: 13px Arial,sans-serif;
            padding: 6px 5px 4px 26px;
            width: 215px;
         float:right;
}

.searchbox:focus {
            background: none repeat scroll 0 0 #eeeeee;
            border: 1px solid #999999;
        }
#head ul {
          margin:0;
          padding:0;
          background:transparent;
          height:100%;
          margin-left:60px;
          padding-left:660px;
          padding-top:10px;
}
#head ul li {  display:inline;}
#head ul li a { padding-left:10px;  color:#BABABA; text-decoration:none;}
#head ul li a:hover { color:#FFFFFF;  }

Edit Sample http://jsfiddle.net/zerotoinfinite2006/tTmSH/embedded/result/

回答1:

Your #head element needs to have fixed positioning to make it float at the top. This will make it stay at the top all of the time. Try using this

#head {
     position:fixed;
     margin:0px;
     top:0px;
     left:0px;
     display:block;
     width:100%;
     height:40px;
     -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
     background:#333333;
     background: -moz-linear-gradient(center top , #736F6E, #111111) repeat scroll 0 0 transparent;
}


回答2:

Take a look at Twitter's bootstrap:

http://twitter.github.com/bootstrap/#navigation

You might be better just reusing it.



回答3:

The HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebSpeaks.in</title>
</head>
<body>
<div id="head">
   <div id="logo">
    <a href="#"></a>
   </div>
   <form style="display:inline;">
    <input style="margin-top:3px;" class="searchbox" type="text"/>
   </form>
 <ul>
  <li>
   <a href="#" title="Home">Home</a> 
  <li>
  <li>
   <a href="#" title="Profile">Profile</a> 
  </li>
  <li>
   <a href="#" title="Profile">Messages</a> 
  </li>
  <li>
   <a href="#" title="Profile">Who To Follow</a> 
  </li>
 </ul>


</div>
<div id="content">
 <div>
  <table>
   <tr>
    <td><a href="http://www.webspeaks.in/2011/02/how-to-hide-add-item-button-magento.html">How to hide 'Add Item' button in Magento Backend Grid</a></td>
   </tr>
   <tr>
    <td><a href="http://www.webspeaks.in/2011/02/learn-method-chaining-with-advanced.html">Learn Simple Method Chaining in PHP </a></td>
   </tr>
   <tr>
    <td><a href="http://www.webspeaks.in/2011/02/create-simple-paint-canvas-using.html">Create Simple Paint Canvas using JavaScript</a></td>
   </tr>
   <tr>
    <td><a href="http://www.webspeaks.in/2011/01/quickview-my-first-magento-extension.html">Quickview: My First Magento Extension</a></td>
   </tr>
   <tr>
    <td><a href="http://www.webspeaks.in/2011/01/disabling-right-click-on-web-pagediv.html">Disabling Right Click on Web Page/DIV, Disabling Text Copy From a Web Page</a></td>
   </tr>
   <tr>
    <td><a href="http://www.webspeaks.in/2011/01/google-like-instant-preview-using.html">Google like Instant Preview using jQuery & base64 Image Encoding in PHP</a></td>
   </tr>
   <tr>
    <td><a href="http://www.webspeaks.in/2011/01/bubbly-image-gallery-with-jquery.html">Stylish Bubbly Image Gallery with jQuery</a></td>
   </tr>
   <tr>
    <td><a href="http://www.webspeaks.in/2011/01/here-is-simple-script-showing-image.html">Image Zoom Effect with jQuery</a></td>
   </tr>
  </table>
 </div>
</div>
</body>

</html>

The CSS:

html {
 height:100%; /* fix height to 100% for IE */
 max-height:100%; /* fix height for other browsers */
 padding:0; /*remove padding */
 margin:0; /* remove margins */
 border:0; /* remove borders */
 background:#fff; /*color background - only works in IE */
 /* hide overflow:hidden from IE5/Mac */
 /* \*/
 overflow:hidden; /*get rid of scroll bars in IE */
 /* */
}
body {
 height:100%;
 max-height:100%;
 overflow:hidden;
 padding:0;
 margin:0;
 border:0;
    font: 13px/1.5 Helvetica Neue,Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif;
}
#content {
 display:block;
 height:100%;
 max-height:100%;
 overflow:auto;
 padding-left:100px;
 position:relative;
 z-index:3;
 word-wrap:break-word;
 top:45px;
}
#head {
 position:absolute;
 margin:0;
 top:0;
 display:block;
 width:100%;
 height:40px;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 background:#333333;
    background: -moz-linear-gradient(center top , #333333, #111111) repeat scroll 0 0 transparent;
}
#logo a {
    background: url("twitter_logo_right.png") no-repeat scroll 20px 9px transparent;
    color: #FFFFFF;
    display: block;
    height: 40px;
    margin-right: 5px;
    outline: medium none;
    text-indent: -9999px;
    width: 140px;
 float:left;
}
.searchbox{
    -moz-border-radius: 4px 4px 4px 4px;
    -moz-box-shadow: 0 1px 0 #444444;
    background: none repeat scroll 0 0 #666666;
    border: 1px solid black;
    color: #CCCCCC;
    font: 13px Arial,sans-serif;
    padding: 6px 25px 4px 6px;
    width: 215px;
 float:left;
}

.searchbox:focus {
    background: none repeat scroll 0 0 #eeeeee;
    border: 1px solid #999999;
}
#head ul {
  margin:0;
  padding:0;
  background:transparent;
  height:100%;
  margin-left:60px;
  padding-left:60px;
  padding-top:10px;
}
#head ul li {  display:inline;}
#head ul li a { padding-left:20px;  color:#BABABA; text-decoration:none;}
#head ul li a:hover { color:#FFFFFF;  }

table tr td{height:100px; width:300px; -moz-border-radius:12px; background-color:#C6C6C6; margin:botton:30px;}
table tr td a{color: #007B9F; font-size:1.5em; text-decoration:none;}


标签： html css menu header
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~