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? Link to comment https://forums.phpfreaks.com/topic/230978-getting-these-images-to-be-next-to-each-other/ 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. Link to comment https://forums.phpfreaks.com/topic/230978-getting-these-images-to-be-next-to-each-other/#findComment-1189035 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.