elite311 Posted August 1, 2011 Share Posted August 1, 2011 I'm pretty new to the world of CSS but love how it works, I have been doing a lot of reading about it and how to implement it into my site. I think I'm getting pretty good at at it.... and then I can't figure this problem out which seems so simple. I'm trying to use CSS to make 3 buttons with rollovers. This is my code: /*==== BUTTONS =====*/ #applyonline { display: block; width: 144px; height: 57.5px; background: url("../images/applyonline.gif") no-repeat 0 0; } #applyonline:hover { background-position: 0 -58px; } #applyonline span { position: absolute; top: -999em; } #reloadcard { display: block; width: 136px; height: 58px; background: url("../images/reloadcard.gif") no-repeat 0 0; } #reloadcard:hover { background-position: 0 -58px; } #reloadcard span { position: absolute; top: -999em; } #checkbalance { display: block; width: 138px; height: 57.5px; background: url("../images/checkbalance.gif") no-repeat 0 0; } #checkbalance:hover { background-position: 0 -58px; } #checkbalance span { position: absolute; top: -999em; } The weird part is the apply online button works great but the other 2 buttons don't. When I rollover the re-load card and check balance button they disappear. Here's the link to my site http://s262833979.onlinehome.us/AR2011/washcard.html The other problem is I can't figure out how to line the 2 images up side by side. Here's the code on my HTML page: <div class="colum"> <div align="left"><img src="images/outline-1.png" width="299" height="11"></div> <div align="left"><img src="images/washcard.jpg" alt="" width="298" height="141" class="p2"></div> <div align="center"> <div align="center"><a id="applyonline" href="wcardorder.html" title="Apply Online"><span>Apply Online</span></a> </div> <div align="center"><a id="reloadcard" href="wcardreload.php" title="Re-load Card"><span>Re-load Card</span></a> <a id="checkbalance" href="wcardbalance.php" title="Check Balance"><span>Check Balance</span></a> </div> </p> </div> </div> Can anyone help me fix this? I would really appreciate it because I just cant seem to figure out what is going wrong. Link to comment https://forums.phpfreaks.com/topic/243449-rollover-image-and-alignment-problem/ Share on other sites More sharing options...
elite311 Posted August 1, 2011 Author Share Posted August 1, 2011 Ok so I feel stupid now! I fixed the image rollover problem. Turns out you need to upload the correct image for it to work...WOW I feel dumb. I still haven't figured out how to align the 2 buttom images but I'll keep playing with it. Link to comment https://forums.phpfreaks.com/topic/243449-rollover-image-and-alignment-problem/#findComment-1250086 Share on other sites More sharing options...
elite311 Posted August 1, 2011 Author Share Posted August 1, 2011 Looks like I didn't even need to ask this question, sorry. After doing some more reading I found that adding in: float:left; To my code and then a few margins I got everything to line up perfectly. So for anyone else that might have this same problem of get things to line up properly my code ended up like this: #reloadcard { display: block; width: 136px; height: 57.5px; float:left; margin-left: 13px; margin-top: 20px; margin-bottom: 20px; background: url("../images/reloadcard.gif") no-repeat 0 0; } #reloadcard:hover { background-position: 0 -58px; } #reloadcard span { position: absolute; top: -999em; } #checkbalance { display: block; width: 138px; height: 57.5px; float:left; margin-top: 20px; margin-bottom: 20px; background: url("../images/checkbalance.gif") no-repeat 0 0; } #checkbalance:hover { background-position: 0 -58px; } #checkbalance span { position: absolute; top: -999em; } Link to comment https://forums.phpfreaks.com/topic/243449-rollover-image-and-alignment-problem/#findComment-1250097 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.