Header block?

[bloon]

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)
http://img233.imageshack.us/img233/5914/picture11dq2.th.png (http://img233.imageshack.us/my.php?image=picture11dq2.png)



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

[nicangeli]

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>


and some basic CSS


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

[Dan Schulz]

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).

[nicangeli]

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.

[Frankitude]

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 -->


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;
}


There are also 2 background images linked.