Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.
See why 2/3 of Plesk servers use it.
Solved
CSS Horizontal image menu with transparent images
Posted on 2011-03-14
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?
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>
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
-
7
5
- +1
16 Comments
You could try background-color:transpare
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.
Also, put quotes arounf the background image names like this
.home a {
background-image: url("style/images/menu/hom
}
.home a {
background-image: url("style/images/menu/hom
}
Active 2 days ago
Below code and screenshot
<style type="text/css">
.loadnavbar {margin: 0;padding: 0;list-style: none;background-color: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_new.png);width: 65px;}
.home a {background-image: url(style/images/menu/home_new.png);}
.loginmenu {background-image: url(style/images/menu/login_new.png); width: 66px;}
.loginmenu a {background-image: url(style/images/menu/login_new.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="#">Home</a></li>
<li class="loginmenu"><a href="#">LogIn</a></li>
</ul>
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?
<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?
Active 2 days ago
Well it is working but i prefer a css solution elvin66.
I will wait a little more.Thank you so far.
I will wait a little more.Thank you so far.
Active today
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.
<li class="home"><a href="#"><img src="transparent.gif" width="44" height="20" /></a></li>
Active 1 day ago
What you have to do is set text-indent to get the text off the screen. Here's how I do mine:
<div id="navigation">
<ul id="menu">
<li class="home"><a href="index.php">Home</a></li>
<li class="about"><a href="aboutus.php">About</a></li>
<li class="contact"><a href="contact.php">Contact</a></li>
<li class="advertise"><a href="advertise.php">Advertise</a></li>
<li class="terms"><a href="termsofuse.php">Terms</a></li>
<li class="sitemap"><a href="sitemap.php">sitemap</a></li>
<li class="login"><a href="#" id="login_btn">login</a></li>
<li class="signup"><a href="register.php">Signup</a></li>
</ul>
</div>
ul#menu{margin:0; padding:0; list-style:none;}
#menu li{overflow:hidden; text-indent:-9999px; display:inline; float:left; margin-right:4px;}
#menu li a{background:url('../images/nav_btns.png') no-repeat; width:100%; height:100%; display:block;}
/*
I use a "sprite" consisting of all my buttons in one image.
Home: 0
About: 72
Contact:163
Advertise:265
Terms:358
Sitemap:471
Login:555
Signup:642
*/
/* Home Button */
#menu li.home{width:66px; height:25px;}
#menu li.home a{background-position:0px 0px;}
#menu li.home a:hover{background-position:0px -28px;}
/* About Button */
#menu li.about{width:85px; height:25px;}
#menu li.about a{background-position:-72px 0px;}
#menu li.about a:hover{background-position:-72px -28px;}
/* Contact Button */
#menu li.contact{width:96px; height:25px;}
#menu li.contact a{background-position:-162px 0px;}
#menu li.contact a:hover{background-position:-162px -28px;}
/* Advertise Button */
#menu li.advertise{width:87px; height:25px;}
#menu li.advertise a{background-position:-264px 0px;}
#menu li.advertise a:hover{background-position:-264px -28px;}
/* Terms Button */
#menu li.terms{width:107px; height:25px;}
#menu li.terms a{background-position:-357px 0px;}
#menu li.terms a:hover{background-position:-357px -28px;}
/* Sitemap Button */
#menu li.sitemap{width:79px; height:25px;}
#menu li.sitemap a{background-position:-470px 0px;}
#menu li.sitemap a:hover{background-position:-470px -28px;}
/* Login Button */
#menu li.login{width:82px; height:25px;}
#menu li.login a{background-position:-554px 0px;}
#menu li.login a:hover{background-position:-554px -28px;}
/* Logout Button */
#menu li.logout{width:61px; height:25px;}
#menu li.logout a{background-position:-642px 0px;}
#menu li.logout a:hover{background-position:-642px -28px;}
/* Signup Button */
#menu li.signup{width:78px; height:25px;}
#menu li.signup a{background-position:-708px 0px;}
#menu li.signup a:hover{background-position:-708px -28px;}
/* Account Button */
#menu li.account{width:80px; height:25px;}
#menu li.account a{background-position:-793px 0px;}
#menu li.account a:hover{background-position:-793px -28px;}
Active 2 days ago
Hi.
I tested your code but i have a problem.I have double text (see screen below) and on hover the text second (down) is gone away.
homehover.gif
I tested your code but i have a problem.I have double text (see screen below) and on hover the text second (down) is gone away.
<style type="text/css">
.loadnavbar {margin: 0;padding: 0;list-style: none;background-color:transparent;}
.loadnavbar li {padding: 0;margin: 0;height: 11px;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: 11px;background-repeat: no-repeat;}
.home {background-image: url("style/images/menu/testhome.png");width: 40px; border:0;}
.home a {background-image: url("style/images/menu/testhome.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="#"><img src="style/images/menu/test_homeback.gif" border="0" width="40" height="11"/></a></li>
</ul>
homehover.gif
Active 2 days ago
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/tes
.home a {background-image: url("style/images/menu/tes
I add a heigth to the a tag and no-repeat and it is working:
.home {background-image: url("style/images/menu/tes
.home a {background-image: url("style/images/menu/tes
Featured Post
Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites. So, what is the difference?
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company.
Here are six reasons why your company website should have a FAQ page
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Suggested Courses
Course of the Month6 days, 16 hours left to enroll
705 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.