css txt highlight roll-over

  • thisisharrington

    (@thisisharrington)


    16 years, 5 months ago

    Hi.
    Im trying to create a rollover on my black menu text, so when i roll over a yellow block appears behind the text, i can do this by adding in my css:

    a:hover
    { color: #373737;
    text-decoration: none;
    background-color:#fff200;
    }

    the colour only appears up to the edge of the font, how can i make the colour block behind wider than the text, at the moment i can only get it as wide as the actual text.

    any help on this is much appreciated,

Viewing 6 replies - 1 through 6 (of 6 total)
  • Rev. Voodoo

    (@rvoodoo)

    16 years, 5 months ago

    add padding

    a:hover
{ color: #373737;
text-decoration: none;
background-color:#fff200;
padding: 0 5px 0 5px;
}

    adjust numbers as needed

    (actually, you won’t want it there, that’ll make your words space out only on rollover, add the padding to just the link in your css)

    Thread Starter thisisharrington

    (@thisisharrington)

    16 years, 5 months ago

    thanks
    i just tried this,
    my menu is horizontal so it makes every thing jump,
    as the text is pretty close together,
    is there a way that doesnt.

    http://thisisharrington.com/wordpress/

    take a look. if you have a chance,
    what id like to happen is the section you go in stays highlighted which ive managed to do but the rollover yellow is thinner than the
    yellow when its highlighting the section.
    see what i mean.

    Rev. Voodoo

    (@rvoodoo)

    16 years, 5 months ago

    yeah, that was my mistake, don’t apply the padding to the hover state, apply it just to the a:link in your css

    I can’t find my way to the appropriate css document in your theme to give you specifics

    Thread Starter thisisharrington

    (@thisisharrington)

    16 years, 5 months ago

    ok the colour block has got bigger thanks but the menu section have now spread further apart?
    any clues,..
    thanks.

    Rev. Voodoo

    (@rvoodoo)

    16 years, 5 months ago

    do you have margins associated with your links?

    decrease the left and/or right margins

    Thread Starter thisisharrington

    (@thisisharrington)

    16 years, 5 months ago

    <?php
/*
Template Name: Links
*/
?>

<?php get_header(); ?>

<h2>Links:</h2>
<ul>
<?php wp_list_bookmarks(); ?>
</ul>

<?php get_footer(); ?>
Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘css txt highlight roll-over’ is closed to new replies.