I have attempted various methods to shift the navigation bar as a whole, but I am facing a roadblock. The container for the navigation bar needs to adjust its size based on the size of the navigation bar. Since the number of links will change periodically, I cannot use a fixed width.
No matter what I try with the parent tags, the `float: left` property in the CSS for `li` keeps the links aligned to the left. After numerous attempts, I have come to the realization that I am out of my depth.
Here is the CSS code:
#main {
margin: 0px auto;
}
#nav_bar {
height: 72px;
width: auto;
text-align:center;
}
#main_nav { list-style: none; margin: 0; padding: 0; display: inline;}
#main_nav li { float:left;}
#main_nav li a { text-indent: -999999px; overflow: hidden; display: block; height: 72px; }
#home { background: url(NavBar/home.jpg); width: 105px; }
#home:hover { background: url(NavBar/home.jpg); 0 0 !important; }
#main_nav:hover li a#home { background-position: -232px center; }
#logo { background: url(NavBar/logo.jpg); width: 116px; }
#logo:hover { background: url(NavBar/logo.jpg); 0 0 !important; }
#main_nav:hover li a#logo { background-position: -232px center; }
#photo { background: url(NavBar/photo.jpg); width: 116px; }
#photo:hover { background: url(NavBar/photo.jpg); 0 0 !important; }
#main_nav:hover li a#photo { background-position: -232px center; }
#animation { background: url(NavBar/animation.jpg); width: 116px; }
#animation:hover { background: url(NavBar/animation.jpg); 0 0 !important; }
#main_nav:hover li a#animation { background-position: -232px center; }
#print { background: url(NavBar/print.jpg); width: 116px; }
#print:hover { background: url(NavBar/print.jpg); 0 0 !important; }
#main_nav:hover li a#print { background-position: -232px center; }
#other { background: url(NavBar/other.jpg); width: 116px; }
#other:hover { background: url(NavBar/other.jpg); 0 0 !important; }
#main_nav:hover li a#other { background-position: -232px center; }
And here is the HTML code:
<body>
<div id="main">
<div id="nav_bar">
<ul id="main_nav">
<li><a href="" id="home">Home Page</a></li>
<li><a href="" id="photo">Photos</a></li>
<li><a href="" id="print">Print</a></li>
<li><a href="" id="logo">Logos</a></li>
<li><a href="" id="animations">3D</a></li>
<li><a href="" id="other">Other</a></li>
</ul>
</div>
<div id="footer">Copyright</div>
</div>
</body>