Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Width of a link/background match

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • February 3, 2011 at 3:22 pm #31489
    Rob_H
    Member

    Hello “CSS-Trickers”
    I’m having a problem at the moment, i’m creating a website and i’ve used a Jquery menu script.(Which is working fine)
    Now i want/need some code that can define the width of my ‘hyper’ link so my background of my menu would get the same width(or like 10px more). Is this possible?
    *Sorry for my bad english*
    Maby some screenshots would help to explain this problem :
    It is something like this:
    Before
    and it should be like this:
    After
    CSS CODE:

    /* JQuery Menu */
    
ul#menu, ul#menu ul {
    
list-style-type:none;
    
margin: 0;
    
padding: 0;
    
width: 15em;
    
}
    

    
ul#menu a {
    
display: block;
    
text-decoration: none;
    
}
    

    
ul#menu li {
    
margin-top: 1px;
    
}
    

    
ul#menu li a {
    
background-image: url('../img/js_menu/li_a.png');
    
background-repeat:repeat-x;
    
background-position: top left;
    
color: #000;
    
padding: 0.5em;
    
}
    

    
ul#menu li a:hover {
    
background-image: url('../img/js_menu/li_a_hover.png');
    
}
    

    
ul#menu li ul li a {
    
background: url('../img/niks.png');
    
color: #FFFFFF;
    
padding-left: 20px;
    
}
    

    
ul#menu li ul li a:hover {
    
background: #aaa;
    
border-left: 5px #000 solid;
    
padding-left: 15px;
    
}
    
/* End JQuery Menu*/

    Thank you for your time… :)
    Rob

    February 3, 2011 at 3:35 pm #62863
    Rob_H
    Member

    EDIT: Links updated.

    February 3, 2011 at 3:43 pm #62865
    zeddotes
    Member

    Try:


    
ul#menu li {
    
margin-top: 1px;
    
min-width: 50px;
    
}

    You can change the min-width to whatever you choose, I just picked an arbitrary number 50.

    Edit: Woops, I read that wrong.

    February 3, 2011 at 3:55 pm #62867
    Rob_H
    Member

    Don’t have it live now.* I’m making it for a customer who didn’t like FLASH so i decided to make it in java with jquery* But here is the code
    HTML:

    Jquery:


    
function initMenu() {
    
$('#menu ul').hide();
    
$('#menu ul:first').show();
    
$('#menu li a').click(
    
function() {
    
var checkElement = $(this).next();
    
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    
return false;
    
}
    
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    
$('#menu ul:visible').slideUp('normal');
    
checkElement.slideDown('normal');
    
return false;
    
}
    
}
    
);
    
}
    
$(document).ready(function() {initMenu();});

    Edit
    Found a scrpt that does the trick, i only have to implement
    Link
    But how?=P

    February 3, 2011 at 5:12 pm #62871
    Rob_H
    Member

    Hmm yea i understand that, but i can’t get it working!

    February 3, 2011 at 5:42 pm #62875
    Rob_H
    Member

    Hmm, you can just copy paste the code’s into a html page and you’ve got it working.. I’m running the site on my localhost now so i cant show a live page, sorry!

    February 3, 2011 at 6:00 pm #62877
    Rob_H
    Member

    Its the same as this one only mine has other links.
  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.