Header block?

I need help,
I want to add header block on my website..OK, this is what I mean with header block (image with blue color)




How do make header block like that? anyone will help me out?

 

Go away and learn some HTML and CSS. To make the navigation bar from sitepoint shouldnt be that hard.

Here is a small starter

The HTML

<div id="nav">
<ul>
<li>
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
Articles
</a>
</li>
</ul>
</div>

Code (markup):

and some basic CSS

div#nav
{
width: 100%;
background-image: URL('link here to image');
}
li
{
list-style-type: none;
display: inline;
}

Code (markup):

 

You don't need the DIV. Just put the ID on the menu (and give it an equal height and line-height), then set the list items' display to inline and use white-space: nowrap; to force them to render properly. The float the anchors (and give them a height equal to the list).

 

Agreed, the <div> is not required, it's just something i do.

 

Taking a look at the Sitepoint.com source code.

There is the XHTML

  <div id="navcontainer">

	<ul id="navlist">
		<li><a id="tabz" class="active" href="/" title="The best place to begin your SitePoint session">Home</a></li>
		<li><a id="taba"  href="/recentarticles/" title="One of the Web&rsquo;s largest repositories of web know-how">Articles</a></li>

		<li><a id="tabb"  href="/books/" title="SitePoint&rsquo;s renowned web development books">Books</a></li>
		<li><a id="tabc"  href="/kits/" title="SitePoint&rsquo;s renowned web development kits">Kits</a></li>
		<li><a id="tabd"  href="/videos/" title="SitePoint&rsquo;s renowned web development training videos">Videos</a></li>
		<li><a id="tabe"  href="/blogs/" title="Daily comment across a range of web subjects by some of the top experts in their field">Blogs</a></li>
		<li><a id="tabf"  href="/contests/" title="Let designers compete for your business in SitePoint&rsquo;s Design Contests">Contests</a></li>
		<li><a id="tabg"  href="/marketplace/" title="Buy and sell goods and services in one of the world&rsquo;s largest web communities">Marketplace</a></li>

		 <li><a accesskey="6" id="tabh"  href="/forums/" title="Our friendly, vibrant and well-informed community">Forums</a></li>
	</ul>
	</div>
<!-- /nav  -->

Code (markup):

and CSS

/* --- tabs-v5.css --- */
/* nav bar */

div#navcontainer
{
	background: #012e5c url(/images/new/navbar1.png) right top no-repeat;
}

div#navcontainer, div#tertiary
{
	overflow: hidden;
	margin: 0 1% 10px;
}

ul#navlist
{
	display: block;
	padding: 0;
	margin: 0;
	float: left;
}

ul#navlist li
{
	display: block;
	float: left;
}

ul#navlist li a
{
	display: block;
	float: left;
	padding: 8px 8px;
	text-decoration: none;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-size: 114%;
	color: #CCDDEE;
	border: 1px solid #446688;
	border-width: 0 1px 1px 0;
	white-space: nowrap;
}

ul#navlist li a:hover
{
	background: #446688 url(/images/new/navbarhighlight1.png);
	color: #FFFFFF;
}

ul#navlist li a.active
{
	color: #fff;
	font-weight: bold;
}

div#navcontainer form
{
	display: block;
	float: right;
	margin: 0;
}


div#navcontainer form input
{
	border-width: 1px;
	vertical-align: middle;
	font-size: small;
	padding: 0;
	font-family: Tahoma, sans-serif;
}

Code (markup):

There are also 2 background images linked.