...

View Full Version : underline link with background



shonamelissa
07-05-2010, 01:19 PM
Hi all,

I simply want my navigation to display with an image for the underline instead of "text-decoration: underline;"

It works for the css hover but doesn't stick with active links.

The HTML is:

<div id="mainmenu">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</div>

The CSS is:

#mainmenu {
margin-top: 10px;
height: 35px;
}


#mainmenu ul {
font-size: 13px;
padding-left: 0px;
margin-top:0;
}

#mainmenu ul li {
display: inline;
}

#mainmenu ul li a:link,
#mainmenu ul li a:visited {
margin-left: 1.6em;
color: #595a5c;
text-decoration: none;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 13px;
padding-bottom: 3px;
}

#mainmenu ul li a:hover {
color: #000000;
background: url(/images/underline.gif) repeat-x 100% 100%;
}


#mainmenu ul li.active a:link,
#mainmenu ul li.active a:visited {
color: #000000;
background: url(/images/underline.gif) repeat-x 100% 100%;
}


Surely there is something simple that I am doing wrong since it works for hover??

I would love some help, thanks.

ahayzen
07-05-2010, 02:14 PM
Try putting the background in the other CSS tags.



#mainmenu ul li a:link,
#mainmenu ul li a:visited {
margin-left: 1.6em;
color: #595a5c;
text-decoration: none;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 13px;
padding-bottom: 3px;
background: url(/images/underline.gif) repeat-x 100% 100%;
}

SB65
07-05-2010, 02:27 PM
Do you have one of your li set to class="active"? I can't see why it shouldn't work otherwise.

shonamelissa
07-06-2010, 12:35 AM
Thanks for your input guys.

I added the background to the rest of the mainmenu css as you suggested ahayzen but it didn't make any difference.

SB65, this is going to sound naive but I don't have any li set to active because this is a joomla site and the menu is placed as a module in all pages. This means that there is only one code so I can't specifically change it for each page. I thought it would notice it automatically?

It's kinda like if I were to use the same PHP include for the menu at the top of each page.. it will obviously be the same for each page.

Will it not notice automatically?

I have put it in the 'home' li as a test and now the code works fine. But now every single page shows the one 'home' li being underlined.. is there any way I can make this automatic?

SB65
07-06-2010, 07:29 AM
OK, that's fair enough. Is Joomla setting one of the links as active? You can check this via view source or using Firebug (http://getfirebug.com/).

I think we need a link to your page for further help.

shonamelissa
07-06-2010, 09:34 AM
Thanks for getting back to me SB65. The site is shonacreative[.]com[.]au
The menu I'm referring to is the top right one in grey (home. why choose. pricing etc..)

abduraooft
07-06-2010, 09:44 AM
Does that menu use a static markup added by you?

(Check the change happens to the second menu when you click on a link. For example, when you click on the first one, the html of that part will becom


<li class="active item193" id="current"><a href="/print-design.html"><span>Print Design</span></a></li> )

shonamelissa
07-07-2010, 06:20 AM
Hi abduraooft,
The second (purple) menu works because it is a main menu set by Joomla. The reason why my first one doesn't work is because it is a hand-made list menu rather than a Joomla main menu like the 2nd.

..I hope that makes sense?

Do you know of a way I can make the browser recognise that the hand-made list menu is active?

shonamelissa
07-07-2010, 07:51 AM
Hi guys,

Thank you so much for all your time and assistance. I solved the issue by installing a Joomla extension called Modules Anywhere which placed my menu inside the header div so that I didn't have to type it out as a html list.

I'm not sure if that makes sense if you haven't used Joomla. But the issue is fixed now anyway. :-)

I'm glad to receive so much assistance, and fast too!

abduraooft
07-07-2010, 08:42 AM
The reason why my first one doesn't work is because it is a hand-made list menu rather than a Joomla main menu like the 2nd. Okay, then you'd need to add some code to dynamically add class="active" on the selected item, depending upon the deletion. Take a look at http://www.codingforums.com/showthread.php?t=122490, especially rmedek's post.

shonamelissa
07-07-2010, 01:43 PM
Great. Thanks abduraooft. I'll keep that bookmarked for if I need it in the future. Much appreciated.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum