How do I make a nav menu go although across the page?

HTML & CSS
1

How do I make a nav menu go although across the page horizontally? I have an image 1px by 36x that I want to repeat across the page. Like google.com has at the top of the page the menu goes to both sides of the browser.

2

Floats and a repeated background image?

ul {
  overflow: hidden;
  background: url(nav_bg.jpg) repeat-x 0 0;
}
li {
  float: left;
  height: 36px;
  line-height: 36px;
  padding: 0 20px;
}
3

Static (non positioned) elements will automatically stretch to the width of their container so in effect you don’t really have to do anything special. Just apply a background image as Mark suggests above and it will stretch the width of the container and if the container is the viewport it will stretch all the way across.

(Remember to remove the default margin and padding from the ul though)

4

Thanks guys

5

I just tried it and here is what happened.
For some reason it is not going to each side all the way.

HTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“html://www.w3.org/TR/xhtm1/DTD/xhtml-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type”
content=“text/html; charset=utf-8”/>
<link href=“navstyle.css” rel=“stylesheet” type=“text/css”/>

</head>
<body>
<div id=“wrapper”>
<div id=“header”>
</div> <!-- end of header div –>
<div id=“navmenu”>
<ul>
<li><a href=“index.html”>Home</a></li>
<li><a href=“about.html”>About Us</a></li>
<li><a href=“services.html”>Services</a></li>
<li><a href=“contact.html”>Contact Us</a></li>
<li><a href=“testimonies.html”>Testimonies</a></li>
<li><a href=“faq.html”>FAQ</a></li>
</div> <!-- end of navmenu div –>
<div id=“bodycontent”>

</div> <!-- end of wrapper div –>
</body>
</html>

CSS

#navmenu ul {
overflow: hidden;
background: url(images/nav11.psd) repeat-x 0 0;
}

#navmenu li {
list-style-type: none;
float: left;
height: 36px;
line-height: 36px;
padding: 0 15px;
display: inline;
}

7

You won’t be able to load a photoshop file directly in the browser, you’ll need to export it to png / jpg /gif.

It’s also a good idea to make the links themselves have the padding so they have a bigger click target.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#navmenu ul {
  overflow: hidden;
  background: url(images/nav11.png) repeat-x 0 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
#navmenu li {
  float: left;
  margin: 0;
  padding: 0;
}
#navmenu a {
  float: left;
  height: 36px;
  line-height: 36px;
  padding: 0 15px;
}
</style>
</head>
<body>
<div id="wrapper">
  <div id="header"></div>
  <div id="navmenu">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About Us</a></li>
      <li><a href="services.html">Services</a></li>
      <li><a href="contact.html">Contact Us</a></li>
      <li><a href="testimonies.html">Testimonies</a></li>
      <li><a href="faq.html">FAQ</a></li>
    </ul>
  </div>
  <div id="bodycontent"></div>
</div>
</body>
</html>
8

I converted the image to .png and copied the code you posted (I changed nothing) and it is still looking like the picture I post earlier.

9

Are you sure the path to the image is correct?
Trying adding a background color so that you can see how much space it occupies.

background: black url(images/nav11.png) repeat-x 0 0;