Note that there are some explanatory texts on larger screens.

plurals
  1. POCreate fixed header using html and css
    primarykey
    data
    text
    <p>This is the html for the header-bar:</p> <pre><code>&lt;div class="header-container"&gt; &lt;img class="logo" src="/images/logo.png" width="102" height="31" alt="Logo" /&gt; &lt;input type="text" id="header-search-input" placeholder="Search" /&gt; &lt;div class="right-container"&gt; &lt;a href="/logout/" class="right"&gt;Logout&lt;/a&gt; &lt;a href="/" class="right"&gt;Home&lt;/a&gt; &lt;/div&gt;&lt;!-- .right-container ends --&gt; &lt;/div&gt;&lt;!-- .header-container ends --&gt; </code></pre> <p>And this is the css:</p> <pre><code> .header-container { position: fixed; top: 0; background-color: #FFFFFF; width: 100%; z-index: 2000; height: 57px; } .right-container { float: right; margin-right: 200px; position: fixed; } .right { float: right; text-decoration: none; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #516475; display: block; font-weight: bold; padding-top: 19px; padding-right: 10px; padding-bottom: 19px; padding-left: 10px; } .right:hover { float: right; border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: #21964F; color: #FFF; background-color: #21A559; } .logo{ margin-top: 12px; margin-left: 200px; } #header-search-input{ color: #424A61; border: thin solid #CCCCCC; font-size: 14px; height: 26px; padding-right: 7px; padding-left: 7px; margin: 0px; position: fixed; } </code></pre> <p>Here is <a href="http://jsfiddle.net/ninjaagnes/4KMDf/" rel="nofollow">jsFiddle</a></p> <p>The tags move out of it whe a window is made smaller. I want them inside the header fixed.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload