Add fixed bar to HTML page

georgiana_e

I need to create a HTML page that is composed of two main parts: a fixed header part (a selection bar) and a second part that displays some text. I have tryed the code below, but as I am new to CSS this doesn't work as I wanted to:

9 <style type=\"text/css\">
 10 #header {
 11     position:fixed;
 12     top:0px;
 13     margin:auto;
 14     width: 100%;
 15     background:#F0F0F0;
 16 }
 17 #content {
 18     position:absolute;
 19     top:90px;
 20 }
 21 </style>
 22 </head>
 23
 24 <body>
 25 <div id=header>
 26 <h1> HEADER: Long header................................................................... </h1>
 27 </div>
 28 <div id=content>
 29 <p> Content...</p>
 30 </div>
 31 </body>

The "content" part goes under "header" but I am having two issues with this code:

  1. when scrolling, the "content" text goes over the "header" text. I need to hide the scrolled "content" text under the header.

  2. when resizing, if the header contains a long text, after resizing that text goes on the next line and this affects the "content" part, which starts at 90px from the top. How can I position my content part so taht it is displayed below the "header" when resizing, but when scrolling goes under.

Thanks in advance for your help!

Vedant Terkar

Try Following:

#header {
      position:fixed;
      top:0px;
      left:0px;
      margin:auto;
      width: 100%;
      height:90px; /* To make Underlying #Content visible */
      overflow:hidden; /* This will hide extra content after resizing */
      z-index:10; /* This is Important */
      background:#F0F0F0;
  }
#content {
     position:absolute;
     top:90px;
     left:0px;
     z-index:1; /* Any value <10 */
 }

Adding z-index and overflow will solve your problem.


DEMO


Z-index:

The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you.


Overflow:

Every single element on a page is a rectangular box. The sizing, positioning, and behavior of these boxes can all be controlled via CSS. By behavior, I mean how the box handles it when the content inside and around it changes. For example, if you don't set the height of a box, the height of that box will grow as large as it needs to be to accommodate the content. But what happens when you do set a specific height or width on a box, and the content inside cannot fit? That is where the CSS overflow property comes in, allowing you to specify how you would like that handled.

There are four values for the overflow property: visible (default), hidden, scroll, and auto. There are also sister properties overflow-y and overflow-x, which enjoy less widespread adoption.


CSS positioning:

Static.: This is the default for every single page element. Different elements don't have different default values for positioning, they all start out as static. Static doesn't mean much, it just means that the element will flow into the page as it normally would. The only reason you would ever set an element to position: static is to forcefully-remove some positioning that got applied to an element outside of your control. This is fairly rare, as positioning doesn't cascade.

Relative.: This type of positioning is probably the most confusing and misused. What it really means is "relative to itself". If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will no effect on it's positioning at all, it will be exactly as it would be if you left it as position: static; But if you DO give it some other positioning attribute, say, top: 10px;, it will shift it's position 10 pixels DOWN from where it would NORMALLY be. I'm sure you can imagine, the ability to shift an element around based on it's regular position is pretty useful. I find myself using this to line up form elements many times that have a tendency to not want to line up how I want them to. There are two other things that happen when you set position: relative; on an element that you should be aware of. One is that it introduces the ability to use z-index on that element, which doesn't really work with statically positioned elements. Even if you don't set a z-index value, this element will now appear on top of any other statically positioned element. You can't fight it by setting a higher z-index value on a statically positioned element. The other thing that happens is it limits the scope of absolutely positioned child elements. Any element that is a child of the relatively positioned element can be absolutely positioned within that block. This brings up some powerful opportunities which I talk about here.

Absolute.: This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left bottom and right to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the element itself meaning it will be placed relatively to the page itself. The trade-off, and most important thing to remember, about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn't affect other elements. This is a serious thing to consider every time you use absolute positioning. It's overuse or improper use can limit the flexibility of your site.

Fixed.: This type of positioning is fairly rare but certainly has its uses. A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn't change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled, creating an effect a bit like the old school "frames" days. Take a look at this site (update: dead link, sorry), where the left sidebar is fixed. This site is a perfect example for since it exhibits both good and bad traits of fixed positioning. The good is that it keeps the navigation present at all times on the page and it creates and interested effect on the page. The bad is that there are some usability concerns. On my smallish laptop, the content in the sidebar is cut off and there is no way from me to scroll down to see the rest of that content. Also if I scroll all the way down to the footer, it overlaps the footer content not allowing me to see all of that. Cool effect, can be useful, but needs to be thoroughly tested.


Dont Only Write The Code. Understand It before writing.

By courtesy of: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Hope it helps.


For More: http://css-tricks.com

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Add fixed bar to HTML page

From Dev

Fixed and Centered navigation bar, with html

From Dev

Fixed side bar is not scrolling with page contents

From Dev

in ionic how to add a fixed logo bar at top

From Dev

How to add a fixed bar on the mapView on iOS

From Dev

HTML fixed header bar when scroll

From Dev

How to add fixed button to the bottom right of page

From Java

Hiding the scroll bar on an HTML page

From Dev

Progress bar not working on HTML page

From Dev

Get all elements with `position:fixed` in an HTML page?

From Dev

HTML table to fill page, some columns fixed

From Dev

Links/hover effect not working on certain part of page in fixed navigation bar

From Dev

how to make the nav-bar fixed and on top of the page and not overlapable

From Dev

Add HTML page in Laravel

From Dev

How to add a page indicator inside the navigation bar?

From Dev

Android: Add a single page title strip bar

From Dev

Android: Add a single page title strip bar

From Dev

HTML prevent space bar from scrolling page

From Dev

HTML nav bar will not touch the top of the page

From Dev

Only first page opens up after the nav bar on one-page fixed nav website

From Dev

How can I add a fixed sidebar to a web page?

From Dev

add html page to codeigniter project

From Dev

How to add javascript to HTML Page?

From Dev

add html page to codeigniter project

From Dev

How to add video to html page ?

From Dev

How to add an image in the title bar using html?

From Dev

How to add label to percentage bar in css and html?

From Dev

html - change number of columns and rows with a fixed size as the size of page changes

From Dev

HTML / CSS Display fixed ratio images based on the height of the page

Related Related

HotTag

Archive