thisisme_vbulletin3_import13805
New Member
This is my first time using this site, I am stuck trying to make some rollover navigation. All of the images will do the hover over effect but they are stacking on top of each other instead of next to each other. How do I get them to layout horizontally instead of vertically? Any help is greatly appreciated! My code is below.CSS:\[code\]html, body{margin: 0; padding: 0; background-color: #c0c0c0;}p{width:900px; position: relative; left: 30px;}h2{width:900px; position: relative; left: 30px;}.container{width:960px; margin: auto;} .header{height: 124px;} .navigation{height: 59px; width: 960px;}.navigation1{ display: block; width: 136px; height: 59px; background-image: url('http://fakehost:8888/TheWorksPlumbing/images/navigationImages/nav_01.jpg'); background-position:0px -59px; text-indent: -99999px;}.navigation1:hover{background-position:0px 0px;}.navigation2{ display: block; width: 138px; height: 59px; background-image: url('http://fakehost:8888/TheWorksPlumbing/images/navigationImages/nav_02.jpg'); background-position:0px -59px; text-indent: -99999px;}.navigation2:hover{background-position: 0 0;}.navigation3{ display: block; width: 170px; height: 59px; background-image: url('http://fakehost:8888/TheWorksPlumbing/images/navigationImages/nav_03.jpg'); background-position:0px -59px; text-indent: -99999px;}.navigation3:hover{background-position: 0 0;}.navigation4{ display: block; width: 138px; height: 59px; background-image: url('http://fakehost:8888/TheWorksPlumbing/images/navigationImages/nav_04.jpg'); background-position:0px -59px; text-indent: -99999px;}.navigation4:hover{background-position: 0 0;}.navigation5{ display: block; width: 168px; height: 59px; background-image: url('http://fakehost:8888/TheWorksPlumbing/images/navigationImages/nav_05.jpg'); background-position:0px -59px; text-indent: -99999px;}.navigation5:hover{background-position: 0 0;}.navigation6{ display: block; width: 210px; height: 59px; background-image: url('http://fakehost:8888/TheWorksPlumbing/images/navigationImages/nav_06.jpg'); background-position:0px -59px; text-indent: -99999px;}.navigation6:hover{background-position: 0 0;}.mainAd{height: 271px;} .mainbody{background-color: white;}.map{position: relative; left: 30px;}.footer{height: 197px;} \[/code\]HTML:\[code\] <div class="container"> <div class="header"><img src="http://localhost:8888/TheWorksPlumbing/images/Layout_01.jpg"></div> <div class="navigation" > <div class="navigation1"><a href="http://stackoverflow.com/questions/15467905/home">Home</a></div> <div class="navigation2"><a href="http://stackoverflow.com/questions/15467905/about">About</a></div> <div class="navigation3"><a href="http://stackoverflow.com/questions/15467905/services">Services</a></div> <div class="navigation4"><a href="http://stackoverflow.com/questions/15467905/rates">Rates</a></div> <div class="navigation5"><a href="http://stackoverflow.com/questions/15467905/specials">Specials</a></div> <div class="navigation6"><a href="http://stackoverflow.com/questions/15467905/contact">Contact</a></div> </div></div>\[/code\]