zachatk1 Posted March 18, 2011 Share Posted March 18, 2011 Hi. I'm trying to make a horizontal navigation bar on my site. I want it to be centered on the page and all the buttons to be next to each other. So here's my CSS: .home { display: block; width: 86px; height: 34px; background: url('/img/nav/home.gif') bottom; } .home:hover { background: url('/img/nav/home-lit.gif') bottom; text-align: right; } I have a total of 5 of these that I want lined up next to each other horizontally and centered. My HTML is this: <body> <div class="main"> <div class="navigation"> <center> <a class="home" href="/index.php"></a> <a class="database" href="/database.php"></a> <a class="rankings" href="/rankings.php"></a> <a class="contact" href="/contact.php"></a> <a class="submit" href="/submit.php"></a> </center> </div> </div> </body> For some reason the images are vertically stacked and to the left. Any remedy to this? Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 18, 2011 Share Posted March 18, 2011 Well there a few thing wrong with the logic of your code and also something are just wrong. first don't use <center> it's not cross browser proof, INstead to center something you can wrap it in a container, a div fir instance and use margin:0 auto; second, you are using classes for each link, while i am pretty sure you they only exist ones.. so an ID would be a better choice. but than again. why assign id's if you can target the inner elements of div with class navigation by just using div.navigation a{ some property here; } Also a horizontal menu can be made much cleaner by using an unordered list displayed inline. tutorial can be found here. and if you want to stick to images have a look here instead of an unordered list have a look here. the same logic/technique can be used. Hope this helps. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.