HTML/CSS: Horizontal bar/design on sites like jQuery

Question

I'm sure it's just simple html/css but I don't know what to call the bar (googling horizontal bar html always results in a horizontal rule).

http://jquery.com/ has one - the grayish bar the runs across the top separating the menu from the content of the page. I'd love to make one of my own.

Answer 1

There is a number of ways to do this.

On jquery.com it is part of background image applied the body tag.

You can have a header section which has background aligned to the bottom as an image and bottom padding that prevents text/content from overlaying that part. Finally you could use thick border if you want to just have plain color. I am sure there are numerous other ways to do this as well.

Answer 2

Its a BG image that's applied to the body tag. http://static.jquery.com/files/rocker/images/bg_home_tile_sml.jpg

body { background: #2a3139 url(../images/bg_home_tile_sml.jpg) repeat-x 50% 0; }

IMO its the best way to achieve this effect.

Answer 3

The best way (in my opinion) is the page background image method, if your design is static enough. Otherwise, create a div with the correct height, set its background image to a very thin (1 or 2 pixel) image with the correct height/color/gradient properties, and tile it across the x axis.

I would avoid the thick border method, as that might render differently on different browsers.

Answer 4

Easiest solution:

<!-- content above bar goes here -->
<div style="height:30px;background-color:lightgray;clear:both;" ></div>
<!-- content below bar goes here -->

You do the clear:both just in case you're floating elements that you want to keep above the bar.