CSS help.. I almost have this working :)

Discussion in 'CSS' started by David Neilsen, Jul 10, 2013.

0
  1. #1
    Hi All

    Please provide suggestions on the following issue. I am using CSS to add an image to the menu items of a site I am building out.

    This is the site:

    http://www.globalforex123.com/

    Notice that the 'Home' menu icon looks and behaves differently to the 'Test' icon. What I want is for 'Home' to look exactly like 'Test'!

    To add the little flag to 'home' I used this CSS:

    .menu-item-469 a {
    display: inline;
    background: url('http://www.globalforex123.com/wp-content-fx578/flags/United-Kingdom-Flag.png') no-repeat 0 0;
    }

    Clearly by using this, I am overwriting the standard CSS for menu items and causing the difference.

    Can anyone help me figure out what approach to take to a) have the little flag image AND b) have 'Home' look just like 'Test'?

    I've been trying but haven't cracked it!

    Thanks
     
    David Neilsen, Jul 10, 2013 IP
  2. xeod

    xeod Greenhorn

    Messages:
    47
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    23
    #2
    If find one of the easiest way of doing this is by adding a span with a class of 'flag' in your case into the anchor tag.Then go into the stylesheet, call that span with the named class :
    span.flag {
 
}
    HTML:
    Now, in order to display the image in that span you need to set the display as block and specify the width and height of the actual flag.You can always use margins to position your flag.
     
    xeod, Jul 11, 2013 IP