All geek questions in one place

Twitter as a fixed header

How to create a fixed title, for example, Twitter / Facebook at the top of the page?

I am testing this, but when I resize my browser, the full design is 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
source share
3 answers

The #head element must have fixed positioning so that it floats at the top. This will make him stay upstairs all the time. Try using

 #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; }
+5
source

Take a look at the Twitter boot tray:

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

You might be better off reusing it.

+5
source

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>

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;}
+1
source

Source: https://habr.com/ru/post/1479420/

More articles:


All Articles