Forums

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

Home › Forums › CSS › Using Span tags in WordPress Navigation

  • This topic is empty.
Viewing 15 posts - 16 through 30 (of 50 total)
1 2 3 4
  • Author
    Posts
  • November 25, 2011 at 12:34 pm #91281
    TheDoc
    Member

    Based on the code you’ve posted, your menu is going to look something like this:

    The span that you’ve put in isn’t going to do anything. What you have put in your CSS file you are trying to target a span within a list item, which isn’t what you have.

    November 25, 2011 at 12:37 pm #91282
    TheDoc
    Member

    I think this is a common thing for you. Just need to pound out the relationship between HTML and CSS in your brain!

    Your CSS clearly isn’t going to work because your span isn’t inside an ‘li’. To test if the relationship is going to work try this method:

    You have this line: ul.dropdown li span

    Go through each item backwards to see if it will work:

    Is my span in an ‘li’? If no, it won’t work, if yes, continue…
    Is my span in a ‘ul’ with a class of ‘dropdown’? If no, it won’t work, if yes, it’s going to work!

    November 25, 2011 at 12:39 pm #91283
    tobeeornot
    Member

    Sorry, I am a bit lost. It worked fine in the html doc.

    November 25, 2011 at 12:41 pm #91284
    TheDoc
    Member

    But you had different HTML in your static site. If the HTML is different in the WordPress site, then the CSS won’t line up with it anymore.

    November 25, 2011 at 12:44 pm #91285
    tobeeornot
    Member

    Yea, I see what you mean. You’re right – it is like someone is pounding me on the head but I am not taking it in, despite myself. The relationship is between the css and the code wp is spitting out.

    November 25, 2011 at 12:48 pm #91286
    TheDoc
    Member

    Exactly!

    So I assume your menu resembles this:

    And obviously there’s no way your CSS would apply here.

    November 25, 2011 at 12:53 pm #91287
    tobeeornot
    Member

    Sorry to be obtuse but by my reckoning, it should be:


    
#sub-navigation span {}

    and


    
#navigation span{ }

    But clearly it isn’t because it ain’t working.

    November 25, 2011 at 12:54 pm #91289
    tobeeornot
    Member

    Yes, that is right regarding the code structure that wp is outputting.

    November 25, 2011 at 1:10 pm #91291
    TheDoc
    Member

    I’m sure it’s working but you probably can’t see it.

    Again, if you were working on a live server I would be able to instantly help!

    November 25, 2011 at 1:16 pm #91292
    tobeeornot
    Member

    Am i right with my code?

    November 25, 2011 at 1:19 pm #91293
    TheDoc
    Member

    Yea, the CSS should be targeting the span. If you are using Chrome, use the Inspector to see what’s happening. If you’re using Firefox, use Firebug.

    November 25, 2011 at 1:30 pm #91294
    tobeeornot
    Member

    Ok, with the main-nav the span is working but is set against the top-left corner where the main logo is (and is distorted), rather than against the nav itself. Is that because the span is absolutely positioned but the css is not picking up on the relative positioning of the the nav bar?

    The span on the #sub-nav does not seem to be picking it up anything at all.

    November 25, 2011 at 1:56 pm #91296
    chrisburton
    Participant

    Why are you using absolute positioning?

    November 25, 2011 at 1:58 pm #91297
    tobeeornot
    Member

    For the span? Because I thought it would need to be set against the nav itself.

    November 25, 2011 at 2:02 pm #91299
    TheDoc
    Member

    If you have #navigation set to position relative it should be working.

    If you inspect #navigation you’ll be able to see how big it is. I’m betting the span is working fine, it’s just that #navigation is taking up more room than you can visually see (hence needing to inspect it).

  • Author
    Posts
Viewing 15 posts - 16 through 30 (of 50 total)
1 2 3 4
  • The forum ‘CSS’ is closed to new topics and replies.