How to make a navbar like at the top of DigitalPoint?

I'm looking to make a navbar and would like to make it like at the top of DigitalPoint. How can I do this?

 

Find the theme with the top navigation bar .;-}

 

I don't know DP's theme. Also, I imagine the bar is custom..

 

Can be done with HTML and CSS only. Pretty simple really.

 

Right, that's exactly what I'm wondering what the HTML/CSS code is.

Making a navbar is easy. But I like separation between the navbar buttons, the little white/black separate. How can that be achieved?

 

list-item with a side border, block link with a side border. varying the colors can create the illusion of a button interface.

 

Not sure I understand that. If I look that up on google, can I find something similar?

 

I was trying to find a perfect tutorial, but I can't.

Take a look at this http://www.cssnewbie.com/super-simple-horizontal-navigation-bar/

What you are looking for is a "Pure CSS Horizontal Navigation Design Tutorial" or along those lines.

 

i am just trying to add this, if you can help?

 

Try This

<span style="float:left">
    <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</span>
<span style="float:left">
    <iframe src="http://www.facebook.com/plugins/like.php?href&amp;layout=button_count&amp;show_faces=true&amp;width=100&amp;action=like&amp;font&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
</span>

Code (markup):

 

Thanks for this tips. I was also looking for this

 

Do we get any wordpress plugin for this?

 

thanks for the code WC Rocket, but

I have tried almost all template edits, I cant get it to appear between the navbar and forumbody.. ? any ideas? thanks

EDIT: Look Below

 

Just got it working, with the below code placed after <!-- closing div for above_body -->

my one looks Like this


how do I make the expand thingy and the alternating texts to appear ?

<!-- custom block start -->
<div class="body_wrapper">
<div id="breadcrumb" class="breadcrumb">
	<ul class="floatcontainer">
<span style="float:left">
    <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</span>
<span style="float:left">
    <iframe src="http://www.facebook.com/plugins/like.php?href&amp;layout=button_count&amp;show_faces=true&amp;width=100&amp;action=like&amp;font&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
</span>

</div>
</div>
</li>
</ol>
<!-- custom block end -->
<br />

Code (markup):

 

any code gurus plz help me out