HTML Help

anchitjindal · Joined: 29 Aug 2009 Posts: 1

Please tell me how to make header of a webpage using html. Header here I mean the part where name of organisation is written (for eg. if we open website of Indian institute of technology on top of page name of institute is written along with its logo)

sticks464 · Joined: 31 Dec 2006 Posts: 2625

There are several ways to do this. One way is to set the image as a background for a text element using css.

html tag example:
Code: <div id="header">
<h1>Text to display</h1>
</div>

css:
Code: #header {
height:100px; /* set height same as image */
}
h1 {
height:100px; /* set height same as image */
background:url(imagepath.jpg) no-repeat left bottom;
padding-left:120px; /*set to width of image plus 20px for margin between image and text */
}

The background image position may be set to left bottom,
left top or left center. Each one will determine where the text is displayed in relation to the image.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 4287 Location: MS

There are several ways to do a header. If you just have the logo and want to add a text title to it, the logo can be edited with any good graphics editor. Just set the canvas size to size header you want, insert a layer, chose the text tool, then chose font family, size, color, etc. and type the title text. Position text next to logo as you like.

If you don't want to go the graphics way, then you can achieve the same effect using the logo as a background image of a div. Then put another div inside the logo's div and style it with CSS to set up the text title with font family, size, color, positioning as needed. With CSS you also can set letter spacing if needed and whatever else you need to make it look good.

Standard Banner/Header Dimensions

Ah, Sticks. You were doing yours while I was still typing and didn't see your post until I submitted. :P