Jump to content

css menu


lamogios
 Share

Recommended Posts

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...