lamogios Posted February 29, 2012 Share Posted February 29, 2012 Hi i am trying to make pure css menu/navigation bar. But i am having some difficulties. first of is: i i would like to know how stop #tool from over lapping #script image when i hover over first link in navigation bar. second i would like to know how can i make #tool:hover image to appear under #script image. here is my css code: #leftnav{border:0px solid #888888;width:180px;height:200px;padding:0px;margin:0 0 0 0px;}#leftnav ul {list-style-type:none;margin:0px 0 0 0px;border:0px solid #888888;width:auto;height:auto;}#leftnav ul li {color:transparent;width:auto;height:50px;border:0 solid transparent;margin:0 0 0 -40px;padding:0;}#script {background-image:url('scriptbutton01.png');background-position:absolute;background-repeat:no-repeat;display:block;width:175px;height:50px;padding:0;border:0px solid #888888;margin:0 0 0 0;float:none;}#script:hover {background-image:url('scriptbutton02.png');background-position:absolute;background-repeat:no-repeat;display:block;width:200px;height:80px;padding:0;border:0px solid #888888;margin:-18px 0 0 0;float:none;}#tool{background-image:url('toolbutton01.png');background-position:absolute;background-repeat:no-repeat;display:block;width:200px;height:50px;padding:0;border:0px solid transparent;margin:0px 0 0 0px;float:none;}#tool:hover {background-image:url('toolbutton02.png');background-position:center;background-repeat:no-repeat;display:block;width:200px;height:79px;padding:0;border:0px solid transparent;margin:-18px 0 0 0;float:none;} cheers Link to comment Share on other sites More sharing options...
knystrom18 Posted March 1, 2012 Share Posted March 1, 2012 Do you have a link to an example? Can you paste your HTML? Link to comment Share on other sites More sharing options...
lamogios Posted March 1, 2012 Author Share Posted March 1, 2012 here is my css code: html {width;800px;}body {font-family:;margin:1px auto;width:800px;height:500px;padding:0;border: 1px solid #888888;background-image:url('body-background.png');background-repeat:repeat;background-attachment:inherit;}.heading {height:160px;width:100%;background-position:0px 0px;background-image:url('head-background.png');background-attachment:inherit;background-repeat:no-repeat;border:0px solid #888888;margin:0px;}.twhublogo {background-image:url('tw-hub.png');background-position:0px 28px;background-repeat:no-repeat;width:273px;height:100px;float:left;z-index:3;top:100px;left:30px;margin:0px;}.rightimage {Position:left;float:right;width:174px;height:160px;top:0px;right:10px;margin:0px;}#ram {position:relative;top:71px;left:-275px;width:100px;height:97px;z-index:1;}.mainframe {background-color:transparent;padding:0px;margin:25px 0 0 0;width:800px;height:auto;border:0px solid #888888;}#textarea {border:0 solid #888888;margin:0px 0 0 200px;width:600px;height:auto;}#leftnav{border:0px solid #888888;width:180px;height:200px;padding:0px;margin:0 0 0 0px;}#leftnav ul {list-style-type:none;margin:0px 0 0 0px;border:0px solid #888888;width:auto;height:auto;}#leftnav ul li {color:transparent;width:auto;height:50px;border:0 solid transparent;margin:0 0 0 -40px;padding:0;}#script {background-image:url('scriptbutton01.png');background-position:absolute;background-repeat:no-repeat;display:block;width:175px;height:50px;padding:0;border:0px solid #888888;margin:0 0 0 0;float:none;}#script:hover {background-image:url('scriptbutton02.png');background-position:absolute;background-repeat:no-repeat;display:block;width:200px;height:80px;padding:0;border:0px solid #888888;margin:-18px 0 0 0;float:none;}#tool{background-image:url('toolbutton01.png');background-position:absolute;background-repeat:no-repeat;display:block;width:200px;height:50px;padding:0;border:0px solid transparent;margin:0px 0 0 0px;float:none;}#tool:hover {background-image:url('toolbutton02.png');background-position:center;background-repeat:no-repeat;display:block;width:200px;height:79px;padding:0;border:0px solid transparent;margin:-18px 0 0 0;float:none;} here is my html code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>Tw-Hub.com</title><link rel="stylesheet" type="text/css" href="Stylecss.css" /></head><body><div class="heading"><a class="twhublogo" href="#"></a><img class="rightimage" src="right-image.png" alt="Tw-Hub.net" /><img id="ram" src="ram.png" alt="Tw-Hub.net" /></div><div class="mainframe"><div id="textarea"></div><div id="leftnav"><ul ><li><a id="script" href="#"></a></li><li><a id="tool" href="#"></a></li></ul></div></div></body></html> Link to comment Share on other sites More sharing options...
knystrom18 Posted March 1, 2012 Share Posted March 1, 2012 I'll take a look. In the meantime, try making the #tool and #script values for width and height the same. Try the same for their :hovers as well. Link to comment Share on other sites More sharing options...
lamogios Posted March 2, 2012 Author Share Posted March 2, 2012 Sorry for late reply. First problem is solved . image doesn't move when i hover my mouse over it. now only i need help with; how to get hovering image to appear behind top/first image. Link to comment Share on other sites More sharing options...
lamogios Posted March 2, 2012 Author Share Posted March 2, 2012 Second problem is solved as-well Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.