CODEWITHSUNDEEP
htmlheaderpositionfixed
Adam Boustead
Adam Boustead

Reputation: 35

How do I make a header that remains in the top at all times?

I want to make a header like http://www.chacha.com (doesn't move, is about that wide and that height, and able to fit divs inside it and also has to be an image)

I am starting off with a blank html document and a blank css page, so there I haven't currently written any code.

I've been trying two days straight to do this now so I would really appreciate any help anyone can provide.

I have gimp so if anyone could also give me image dimensions for a perfect header and perfect background size I would appreciate it even more.

Upvotes: 0

Views: 6994

Answers (3)

panos
panos

Reputation: 1

FOR FULL WIDTH FIXED HEADER

 header { 
    width:100%;
    background:green;
    height:60px;
    margin:-8px;
    position:fixed;
}

FOR NONFULL WIDTH FIXED HEADER
Create a div and set width and height (you can also set it left or right by float:left, float:right) then in this div put the code above but without margin:-8px; and change the width to the width that your div has. Here is a test

Upvotes: 0

Michael Schuller
Michael Schuller

Reputation: 494

The CSS property you're looking for is position: fixed which will position the element relative to the viewport. This is good breakdown of positioning: https://developer.mozilla.org/en-US/docs/CSS/position

In this specific case, what you've got is an element with styles roughly along these lines:

#header_id {
    position: fixed;
    width: 100%;
    height: 35px;
}

You don't have to set the height, but unless there is content in the fixed element, it will collapse if there is no height specified. They also appear to have put a drop-shadow on the element toget the neat floating effect.

If you want to have an image inside, you can just put the <img> inside the header element, or use it as the background-image url in the CSS and position it with background-position (see also: https://developer.mozilla.org/en-US/docs/CSS/background-position although the compatability table at the bottom is important if you want to do anything too specific with this property).

You can do this with any block-level element (or any element with display:block set on it). In your example they are using the HTML5 <header> tag; a <div> would work, too, if <header> wasn't appropriate for your page.

I would recommend using the Firebug addon with Firefox (or similar developer consoles with other modern browsers) -- you can right click on an element on the page and select 'Inspect element' from the dropdown menu and get a breakdown of both the markup and styling to see how other websites are constructed. Very useful for when you're browsing the internet and you see something and think, 'that's a neat trick, how does it work?'

Upvotes: 1

Sean Thompson
Sean Thompson

Reputation: 902

CSS:

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: url(yourimage.png) repeat-x;
}

<!--html -->
<div id="header"></div>

That should give you a starting place, I can't tell you more without seeing exactly what the layout's supposed to be.

Upvotes: 6

Related Questions