Tandino Posted September 22, 2007 Share Posted September 22, 2007 Hi everyone, this is my first post in these forums, I hope I can get some help with a little nagging issue I've been having the past couple days.I am trying to create a set of four boxes on a site I am making for a friend. I wanted to have the images change with a mouse over. I have the images set as backgrounds on anchors in a larger div, with background-position moving the first image out of view and another one into view. I hope this makes sense, I attached some files to clarify.the problem is that the only way it works is if #menu a {display: block; height: 200px; width: 200px;} has display:block. display:inline will not show the images. If I add a float: left, the images show up, but do not fit into a neat 2x2 box. does anyone have any tips or insights as to how I can get it to work? or should I change my method? thanks in advance.here is the page: http://www.acasa5terre.it/axa/forum.htmlhere is what i would like it to look like: http://www.acasa5terre.it/axa/goal.jpg Link to comment Share on other sites More sharing options...
ste Posted September 24, 2007 Share Posted September 24, 2007 this should do it <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">body {background-color: gray;}#menu {width: 400px;}#menu a {display: block;}#menu a.topleft {height: 200px; width: 200px; background: url("upperleft.jpg") 0 0 no-repeat;}#menu a.topright {height: 200px; width: 200px;background: url("upperright.jpg") 0 0 no-repeat;}#menu a.bottomleft {height: 200px; width: 200px;background: url("bottomleft.jpg") 0 0 no-repeat;}#menu a.bottomright {height: 200px; width: 200px;background: url("bottomright.jpg") 0 0 no-repeat;}#menu a:hover {background-position: -200px 0;}#menu a:active {background-position: -200px 0;}.box {float: left; width: 200px;}</style></head><body> <div id="menu"> <div class="box"><a class="topleft" href="#"></a></div> <div class="box"><a class="topright" href="#"></a></div> <div class="box"><a class="bottomleft" href="#"></a></div> <div class="box"><a class="bottomright" href="#"></a></div> </div></body></html> Link to comment Share on other sites More sharing options...
Guest FirefoxRocks Posted September 24, 2007 Share Posted September 24, 2007 Something that you could try is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmls="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>YOUR TITLE HERE</title><style type="text/css">body {background-color: gray}#menu {width: 400px}#menu a {display:block; height:200px; width:200px; background-position:0 0;background-repeat:no-repeat}#menu a.topleft {background-image: url("upperleft.jpg")}#menu a.topright {background-image: url("upperright.jpg")}#menu a.bottomleft {background-image: url("bottomleft.jpg")}#menu a.bottomright {background-image: url("bottomright.jpg")}#menu a:hover,#menu a:active {background-position: -200px 0}.box {float: left; width: 200px}</style></head><body> <div id="menu"> <div class="box"><a class="topleft" href="#"></a></div> <div class="box"><a class="topright" href="#"></a></div> <div class="box"><a class="bottomleft" href="#"></a></div> <div class="box"><a class="bottomright" href="#"></a></div> </div></body></html> Try that and see if it works. If not, try modifying the CSS a little bit. Link to comment Share on other sites More sharing options...
Tandino Posted September 26, 2007 Author Share Posted September 26, 2007 Thanks a lot people, both of these suggestions worked like a charm. Thanks for the input. I see now what the problem was. I appreciate your help.T Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.