Text on navigation bar

Dear All,
I have already design a navigation bar by the size of 1577 X 68. So the problem now I would like to put dynamic text on top of it as menu links. How can I achieve that? Thank you.

Dear All,
I have attached both my css and html codes. Now the results is that in IE there is a big space between my <div id=“logo”> and the <div id=“nav”> and both li appear on separate line with no bullets and also the <div class=“form_description”> appear on separate line. On firefox there is a quite a space between my <div id=“logo”> and the <div id=“nav”> but the li appear on horizontal but there is bullets and <div class=“form_description”> appear just after both the li.Unfortunately my bar image never appear in both the web browser. So what I want to achieve is that at the top is my log and the followed by my menu and below is will form description and last the details. I want the menu items to be colored as black.

.css codes.

body
{
background:#ffffff;
font-family:“Lucida Grande”, Tahoma, Arial, Verdana, sans-serif;
font-size:small;
margin:8px 0 16px;
text-align:center;
}

#form_container
{
background:#ffffff;

margin:0 auto;
text-align:left;
width:1024px;

}

#nav {
width: 768px overflow: hidden; background:url(images/bar1.jpg) repeat=x;
}

#nav li {
float: left; position: relative;
}

#nav a {
height: 68px; line-height: 68px; display: block; padding: 0 12px; font: Arial, Helvetica, sans-serif 12px; text-decoration:none;
}

#nav a:hover,
#nav a:focus {
text-decoration:underline;
}

ul.svnav {background-image: url(“images/bar1.jpg”);}

.html codes.

<html>
<head>
<title>Add Item Form (Draft)</title>
<link rel=“stylesheet” type=“text/css” href=“my.css” media=“all”>

</head>
<body>
<div id=“form_container”>
<div id=“logo”>
<img src=“images/logo.jpg” width=350 height=200>
</div>
<div id=“nav”>
<ul class=“svnav”>
<li><a href=“t2.html” target=“_self”>Test 1</a></li>
<li><a href=“t3.html” target=“_self”>Test 2</a></li>

</ul>
</div>

<form action=“<?=$_SERVER[‘PHP_SELF’]?>” method=post name=“form_1” enctype=“multipart/form-data” >

<div class=“form_description”>
<h2>ADD ITEM(Draft)<?=$status?></h2>
</div>
<div id=details
<table>
<tr>
<td valign=“top”>
<table>

	&lt;tr&gt;
		&lt;td&gt;				
		  &lt;label class=description for=element_1&gt;Name&lt;span 
		  class=required id=required_2&gt;&lt;/span&gt;&lt;/label&gt; 
		&lt;/td&gt;
		&lt;td width="90%"&gt;
		  &lt;input class="element text large" id="driverName" name="itemName" value=""&gt; 
		  		  
		&lt;/td&gt;
	&lt;/tr&gt;
	
		
	

&lt;/table&gt;

</td>

</tr>

</table>
</div>
</form>
</div>
</body>
</html>

I am not sure what you are using to develop your navigation. Nor do I know your level of HTML skills.

The <ul> tag is used to create an unordered list. That would be a way to create a multilevel menu.

If you are creating a single line, you can use anchor tags <a> to create what you want.

It is really difficult to know how to answer your questions without an example of what you are trying to accomplish. If you could even produce a graphic of what you have in mind, it would be a great help in understanding. (I tend to be a visual person.)

One way to have the background and put text over it, is to use CSS and html.

Your CSS could look like this:

#navigation {background-image:url(‘background.png’);

Then for your HTML, you could do something like:

<div id=“navigation”>
use a UL here or just a series of anchors. It all depends on how elaborate you menu needs to be.
</div>

You can use additional CSS to style any of the specific items in your menu.

I hope I understood what you are trying to accomplish.

Dear Csu,
I want to have text on the graphic as a background. So can you please guide me which way can I achieve it? Thank you.

Dear Csu,
I dont get you when you say use UL what is that ya? My texts will be horizontal on the graphics. It will be menu item where I can press and take me to other links. Thank you once again.

Do you maybe have an example of what you really want to accomplish. Maybe you saw it somewhere else?

The manu in question is <ul class=“svnav”>.
So in your CSS, you need to add
ul.svnav {background-image: url([i][color="red"]URL of image here[/color][/i]);}

Dear All,
Ok this is a sample link http://www.nst.com.my/ you can look either the menu which consists of “Newsletter,Rss etc” or the “Home,Local etc”. Thank you.

Reading your first post suggest that you want a navigation. In your reply to Stevie D you said that you have cut the background image to 768px. In that case your menu could look something like:


#nav {
    width: 768px overflow: hidden; background:url(images/menu_bg.gif)  repeat=x; 
}

#nav li {
    float: left; position: relative;
}

#nav a {
    height: 68px; line-height: 68px; display: block; padding: 0 12px; font: Arial, Helvetica, sans-serif 12px;  text-decoration:none;  
}

#nav a:hover,
#nav a:focus {
    text-decoration:underline;
}

hope this is what you mean

Are you wanting to put text directly on the graphic? For that, you would need a graphic program such as PhotoShop or GIMP.

If you are just wanting the text to have your graphic as a background, there are many ways. You can use JavaScript (some people have it turned off), you can use HTML, you can use graphics and shift them around.

If you can explain what you are trying to accomplish, or point to an example, there are many experts here that are willing to help.

Dear Steve,
Yes I have a image bar as backround an will cut the length to 768. I want to write text on this bar that all. How can I do it?

OK, first of all, your navigation is about twice the width it should be. 1577px is off the side of my monitor and bouncing off the wall. You can’t reliably expect people to have more than about 780px available width.

Second, what do you mean you’ve done? Have you just designed a graphic to use as a background for the menu bar? If so, that’s kind of the wrong way round. Start by designing your menu in HTML, and then draw up a design to work with it once you’ve got the actual menu sorted out.

There are some great resources for designing navigation menus on Listamatic.