Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    May 2009
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    underline link with background

    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:
    PHP Code:
    <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:
    Code:
    #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.

  • #2
    Regular Coder ahayzen's Avatar
    Join Date
    Jun 2009
    Posts
    110
    Thanks
    8
    Thanked 11 Times in 11 Posts
    Try putting the background in the other CSS tags.

    Code:
    #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%;
    }

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Do you have one of your li set to class="active"? I can't see why it shouldn't work otherwise.

  • #4
    New Coder
    Join Date
    May 2009
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?
    Last edited by shonamelissa; 07-06-2010 at 12:37 AM.

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    OK, that's fair enough. Is Joomla setting one of the links as active? You can check this via view source or using Firebug.

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

  • #6
    New Coder
    Join Date
    May 2009
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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..)
    Last edited by evo; 08-09-2010 at 01:08 PM.

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    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

    Code:
    <li class="active item193" id="current"><a href="/print-design.html"><span>Print Design</span></a></li>
    )
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    New Coder
    Join Date
    May 2009
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #9
    New Coder
    Join Date
    May 2009
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #11
    New Coder
    Join Date
    May 2009
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Great. Thanks abduraooft. I'll keep that bookmarked for if I need it in the future. Much appreciated.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •