Help With Navigation Bars... Plz

[Dreffel]

Hey...I just have a question out of interest's sake... It about the navigation bars, or I hope that's what it's called... The bars normally on the top of the page, eg; home, downloads, contact details, etc... (see attachment for pic)Like the facebook bar, that takes you between menus or pages. How is it done? Is there different ways to do this? I can think of this way, but don't think it is the way it should be done...Create the bar as you want it, with all the text, as a image and then just specify which click areas will take you to what areas...OR how should it be done?? Is there any easier ways to do it?Hope this all makes sense.... lol..

[Ingolme]

Do you know any HTML?All you need are hyperlinks. You can lay them out however you like.

[Dreffel]

Yes, I know some HTML and CSS. But I don't want to use 3 or 4 standalone hyperlinks. I want the hyperlinks to be in a picture type bar... Like those of Facebook for example...

[Synook]

They are still "standalone hyperlinks" - just within a single division with background images etc.The actual code is:

	<div class="clearfix" id="fb_menubar">	  <div id="fb_menubar_core">		<ul class="fb_menu_list">		  <li id="fb_menubar_logo" class="fb_menu">			<a title="Go to Facebook Home" href=			"http://www.facebook.com/home.php?ref=logo"></a>		  </li>		  <li id="fb_menu_home" class="fb_menu">			<div class="fb_menu_title">			  <a accesskey="1" href=			  "http://www.facebook.com/home.php?ref=home">Home</a>			</div>		  </li>		  <li id="fb_menu_profile" class="fb_menu">			<div class="fb_menu_title">			  <a accesskey="2" href=			  "http://www.facebook.com/Username?ref=profile">Profile</a>			</div>		  </li>		  <li id="fb_menu_friends" class="fb_menu">			<div class="fb_menu_title">			  <a accesskey="3" href=			  "http://www.facebook.com/friends/?ref=tn">Friends</a>			</div>			<div id="fb_menu_friends_dropdown" class=			"fb_menu_dropdown hidden_elem">			  <div class="fb_menu_item">				<a href=				"http://www.facebook.com/friends/?added&ref=tn">Recently				Added</a>			  </div>			  <div class="fb_menu_item">				<a href=				"http://www.facebook.com/friends/?filter=afp&ref=tn">All				Friends</a>			  </div>			  <div class="fb_menu_separator">			  <div class="fb_menu_item">				<a href="http://www.facebook.com/invite.php?ref=tn">Invite				Friends</a>			  </div>			  <div class="fb_menu_item">				<a href=				"http://www.facebook.com/find-friends/?ref=friends">Find				Friends</a>			  </div>			</div>		  </li>		  <li id="fb_menu_inbox" class="fb_menu">			<div class="fb_menu_title">			  <a accesskey="4" id="nav_inbox" href=			  "http://www.facebook.com/inbox/?ref=mb" name=			  "nav_inbox">Inbox<span style="display: none;" class=			  "fb_menu_count_holder" id=			  "fb_menu_inbox_unread_count_holder"><span class="tl"><span class=			  "tr"><span class="br"><span id="fb_menu_inbox_unread_count"			  class="bl">0</span></span></span></span></span></a>			</div>			<div id="fb_menu_inbox_dropdown" class=			"fb_menu_dropdown hidden_elem">			  <div class="fb_menu_item">				<a id="menu_item_goto_inbox" href=				"http://www.facebook.com/inbox/?drop&ref=mb" name=				"menu_item_goto_inbox">View Message Inbox <span style=				"display: none;" id=				"menu_item_goto_inbox_count_wrapper">(<span id=				"menu_item_goto_inbox_count">0</span>)</span></a>			  </div>			  <div class="fb_menu_item">				<a href=				"http://www.facebook.com/inbox/?compose&ref=mb">Compose New				Message</a>			  </div>			</div>		  </li>		</ul>	  </div>	  <div id="fb_menubar_aux">		<ul class="fb_menu_list">		  <li class="fb_menu fbm_last">			<div class="clearfix" id="universal_search">			  <form onsubmit=			  'return wait_for_load(this, event, function() { search_gen_sid("1549371060"); return search_validate("q"); });'			  id="universal_search_form" name="universal_search_form" action=			  "http://www.facebook.com/s.php?ref=search" method="get">				<div id="universal_search_input">				  <input type="text" onfocus=				  'return wait_for_load(this, event, function() { var typeahead_source_instance1 = new search_friend_source("1549371060-1245564106-3&u=1549371060");typeahead_source_instance1.text_nomatch;typeahead_source_instance1.udata={"u":1549371060,"src":"search_friend_source","abt":"A"};typeahead_source_instance1.search_limit=5;typeahead_source_instance1.history=new UserHistory("1549371060");new search_typeaheadpro(this, typeahead_source_instance1,{onselect:search_typeahead_onselect,onsubmit:search_typeahead_onsubmit,udata:{"u":1549371060,"src":"search_friend_source","abt":"A"},max_results:5,enableSearchResults:0});this.onfocus(); });'				  autocomplete="off" size="25" maxlength="100" class=				  "inputtext typeahead_placeholder DOMControl_placeholder"				  placeholder="Search" title="Search" value="" tabindex="1"				  results="0" name="q" id="q">				</div>				<div id="universal_search_submit">				  <a title="Search Facebook" class="qsearch_button" onclick=				  'return wait_for_load(this, event, function() { search_gen_sid("1549371060"); search_validate("q") && $("universal_search_form").submit(); return false; });'>				  </a>				</div><input type="hidden" value="q" name="init" id=				"init"><input type="hidden" value="0" name="sid" id="sid">			  </form>			</div>		  </li>		  <li id="fb_menu_logout" class="fb_menu">			<div class="fb_menu_title">			  <a href=			  "http://www.facebook.com/logout.php?h=c1c53f9041aa65df8ae04ffce8fad849&r=id_4a44aca51ff4e3f93323109&ref=mb">			  Logout</a>			</div>		  </li>		  <li id="fb_menu_settings" class="fb_menu">			<div class="fb_menu_title">			  <a href=			  "http://www.facebook.com/editaccount.php?ref=mb">Settings</a>			</div>		  </li>		  <li id="fb_menu_account" class="fb_menu">			<div class="fb_menu_title">			  <a href="http://www.facebook.com/Username?ref=name">Name</a>			</div>		  </li>		</ul>	  </div>	</div>

[Dreffel]

Nice, Thats a bit confusing.... lol. Thats why I was asking if there is any shorter and easier way to get the same effect??

[Ingolme]

To simplify it:Put them in a list:

<ul id="menu">  <li><a href="">Link</a></li>  <li><a href="">Link</a></li>  <li><a href="">Link</a></li></ul>

Display the links as a block to give them a larger clicking area and lay out the list as desired with CSS.

ul#menu {  background-color: blue;  color: white;  overflow: auto;}ul#menu li { float: left; }ul#menu a {  display: block;  padding: 5px;}

[Dreffel]

Thanx Ingolme.... That helped a lot! Just 1 last thing. When I use that exact code, what must I change so the hyperlinks are not underlined?I think the <ul> is the subject here, but to what will I change it so the results end up the same without the underline?

[Ingolme]

Thanx Ingolme.... That helped a lot! Just 1 last thing. When I use that exact code, what must I change so the hyperlinks are not underlined?I think the <ul> is the subject here, but to what will I change it so the results end up the same without the underline?

Please read the W3Schools HTML tutorial and CSS tutorial. All the answers are there.