Help - Search - Members - Calendar
Full Version: Help with Horizontal Nav-bar image
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
snoozebtn
Hi there,
I am new to the whole css scene. I have a Navbar that I am trying to add my own image to the background. I created the image in photoshop as a .png . Below is the current code that I have typed up. What do I need to add to allow the image to be placed online? along with that what code would I need to center the nav bar on the page.....would that just be a #wrapper or is the a center input for that?


<!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>
<title>Untitled Webpage</title>
<meta name="generator" content="WebDesign" />

<style type="text/css">
ul.nav {
margin-left: 0;
list-style-type: none;
padding-left: 0;
padding-top: 6px;
padding-bottom: 5px;
border-bottom: 1px dashed #000;
}
ul.nav li {
display: inline;
}
ul.nav a {
border: 1px dashed #000;
border-bottom: none;
padding: 5px 15px 5px 15px;
margin-right: 5px;
background-color: #EAEAEA;
text-decoration: none;
color: #333;
}

</style>
</head>
<body>
<ul class="nav">
<li><a href="home.html">Home</a></li>
<li><a href="Page2.html">Page 2</a></li>
<li><a href="Page3.html">Page 3</a></li>
<li><a href="Page4.html">Page 4</a></li>
<li><a href="Page5.html">Page 5</a></li>

</body>
</html>
zgillman
i dont see anything in the code referring to the picture that you made in photoshop
Frederiek
You can set a background image to the ul.nav.

To center the list, you can set margin: 0 auto; to either the ul.nav or create a wrapper div and set it to that. Be sure to also set a width.

See :
http://css.maxdesign.com.au/ (Listamatic or Listutorial)
http://www.maxdesign.com.au/presentation/center/
http://css-discuss.incutio.com/?page=CenteringBlockElement

BTW, you need to close the UL tag.
snoozebtn
Thanks Fred for the help and links. The image is now attached along with the <ul> being closed.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.