DyellherHuh
New Member
I've tried several things to move the nav bar over as a whole, but I'm stuck. The container for the nav bar needs get its size based on the size of the nav bar. The amount of links will be changing periodically so i can't used a fixed width. Regardless of what i do in parent tags, the float: left in the css for li keeps it to the left. I've tried numerous things but i finally to decided to admit that im just in over my head. Heres 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; }\[/code\]and heres 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>\[/code\]