Can't figure out navigation bar w/ rounded edges

Hello,
So, I’m really not very good at coding and trying to get better at this. So I apologize in advance for a dumb question I can’t figure out. I’m trying to make a rounded bar for a few pages. I’m not sure what I should put in between the images in my html code for the content of the bar. I used the <ul> tag and it filled it out how I wanted, but the rightround.jpg is on the next line. Also, would I position the entire bar using .location in my .css? I want to have it a little more to the right of the page and an inch or so from the top and not quite sure if this would be the correct way to go about it. Thanks.[/I]


<div class="location">
<img src="leftround.jpg" id='leftroundedimage'/>
<ul>
<img src='rightround.jpg' id='rightroundedimage'/>
</div>

</body>
</html>

.leftroundedimage {
float:left;
}

.rightroundedimage {
float:right;
}

.location {
	background-color:#72b9d5;
	height:35px;
	width:637px
	
}

Can you post a link to a page that we can look at?

First of all your ul is not properly closed, second it also needs to be floated left, and third why are you using a ul if you are not going to put any list items in it? You’re better off using a div

I noticed I didn’t close that tag right after I posted this. Yeah, l wasn’t sure what tag to use for that. I’ve got this now, but same results with the right image. How would I float my div that’s in between the images? With a new css rule or in my html? It’s still going over to other line, possibly because of that then? I’m wasn’t sure what to put in between images. Sorry, like I said I am fairly new to this. Thanks again.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <link type="text/css" rel="stylesheet" href="practice2.css" media="screen" />
<title>Pratice</title>
</head>

<body>
<div class="location">
<img src="leftroundedth.jpg" id='leftroundedimage'/>
<div></div>
<img src="rightroundedth.jpg" id='rightroundedimage'/>
</div>

</body>
</html>

/* CSS Document */



.leftroundedimage {
float:left;
}

.rightroundedimage {
float:right;
}

.location {
	background-color:#72b9d5;
	height:35px;
	width:637px;
	margin-top: 90px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}

Your markup is bad. The use of img tag for presentation is wrong.

You need to look for the sliding doors technique. There are many examples. Here’s one from [B]deathshadow60[/B]. Here’s [URL=“http://battletech.hopto.org/html_tutorials/hoverMenuBackground/template.html”]another one from him.