Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

CSS Horizontal image menu with transparent images

Posted on 2011-03-14
16
Medium Priority
?
620 Views
Last Modified: 2013-11-19
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>

Open in new window

0
Comment
Question by:Panos
14 Comments
 
LVL 20

Expert Comment

by:Mark Brady
ID: 35132729
You could try background-color:transparent in place of background:transparent and see if that works?
0
 
LVL 2

Author Comment

by:Panos
ID: 35132774
Hi
the result is the same
0
 
LVL 20

Expert Comment

by:Mark Brady
ID: 35133017
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 20

Expert Comment

by:Mark Brady
ID: 35133043
Also, put quotes arounf the background image names like this

.home a {
background-image: url("style/images/menu/home.png");
}
0
 
LVL 2

Author Comment

by:Panos
ID: 35133124
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>

Open in new window

menu.gif
0
 
LVL 2

Author Comment

by:Panos
ID: 35133136
The quotes did 'nt solve the problem
0
 
LVL 20

Accepted Solution

by:
Mark Brady earned 668 total points
ID: 35133386
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?
0
 
LVL 2

Author Comment

by:Panos
ID: 35133484
Well it is working but i  prefer a css solution elvin66.
I will wait a little more.Thank you so far.
0
 
LVL 20

Expert Comment

by:Mark Brady
ID: 35134049
ok
0
 
LVL 84

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 668 total points
ID: 35143056
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>

Open in new window

0
 
LVL 26

Assisted Solution

by:Eddie Shipman
Eddie Shipman earned 664 total points
ID: 35143365
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>

Open in new window

CSS:
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;}

Open in new window

0
 
LVL 2

Author Comment

by:Panos
ID: 35143380
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.
<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>

Open in new window

hometest.gif
homehover.gif
0
 
LVL 2

Author Comment

by:Panos
ID: 35145044
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;}
0
 
LVL 2

Author Closing Comment

by:Panos
ID: 35145064
Thank you all for your help
0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

571 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question