Hello experts.
I have created a horizontal image menu with different images for each li tag.
The problem is that i must use transparent images to keep the background.
So i did delete the text inside the a tags for the links and now the links don't work.
Any help to solve this?
<style type="text/css">.loadnavbar {margin: 0;padding: 0;list-style: none;background: transparent;}.loadnavbar li {padding: 0;margin: 0;height: 21px;margin-right: 1em;list-style: none;background-repeat: no-repeat;}.loadnavbar li a, .loadnavbar li a:visited {display: inline;text-decoration: none;text-indent: -9999px;height: 39px;background-repeat: no-repeat;}.home {background-image: url(style/images/menu/home.png);width: 83px;}.home a {background-image: url(style/images/menu/home.png);}.loginmenu {background-image: url(style/images/menu/login.png); width: 99px;}.loginmenu a {background-image: url(style/images/menu/login.png);}.shopcart {background-image: url(style/images/menu/shopcard.png); width: 173px;}.shopcart a {background-image: url(style/images/menu/shopcard.png);}.logout {background-image: url(style/images/menu/logout.png); width: 93px;}.logout a {background-image: url(style/images/menu/logout.png);}.myaccount {background-image: url(style/images/menu/myaccount.png); width: 202px;}.myaccount a {background-image: url(style/images/menu/myaccount.png);}ul.loadnavbar li a:hover {background: none;}.loadnavbar li {float: left;}.loadnavbar:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}</style><ul class="loadnavbar"><li class="home"><a href="#"></a></li><li class="shopcart"><a href="#"></a></li><li class="loginmenu"><a href="#"></a></li></ul>
Can you show a screenshot of what happens when you put the link text back in? not <a href=# but put the proper links back in so they work and show the result.
0
There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.
Ok try this. Remove the links alltogether and just set some javascript to do your navigation.
<li class="home"><a href="#">Home</a></li>
change to
<li class="home" onclick="nav('home')"></li>
Now you should have the image for home displayed correct? Here's the javascript.
<script language="javascript">
function nav(loc)
{
var page = loc + '.php';
if(loc != ''){
window.location = page;
}else{
exit();
}
}
</script>
Now when they click the div or li element it should navigate to your page. Change the function to suit your pages (.php or .html) etc... Do you follow?
The original problem is that without any content in the link, there is nothing to click on. CSS can't fix that except as @elvin66 has suggested. The common solution to this is to put a transparent gif in the link to give it some size that you can click on. The problem of course is that the image has to be the right size for the background and link spacing.
OK i got it.
I add a heigth to the a tag and no-repeat and it is working:
.home {background-image: url("style/images/menu/testhome.png"); width: 40px; }
.home a {background-image: url("style/images/menu/testhome.png")no-repeat;height:11px;}
There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.