Wordpress /CSS/Html Help

Discussion in 'Web Design and Development' started by EvanLugh, Jul 27, 2008.

  1. EvanLugh macrumors 68000

    EvanLugh

    Joined:
    Aug 29, 2007
    Location:
    Developer land
    #1
    Hi. I'm having a bit of trouble with the navigation on Wordpress. I'd like it to be set horizontally instead of vertically.
    You can see it here:
    [​IMG]
    I've changed the text-wrap, positions, alignment.. everything. It's in a list (albeit was horizontally before I edited it.) The code is as follows.

    HTML:
    PHP:
    <div id="navbar">
        <ul>
                <li><?php wp_list_pages('title_li=&depth=1'); ?></li>
        </ul>
    </div>
    And the CSS
    Many thanks for your help.

    Ps - I know everything is further down - it's the menu's margins.
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Looks like you have all the links in a single li tag. Each item should be in its own li.
     
  3. EvanLugh thread starter macrumors 68000

    EvanLugh

    Joined:
    Aug 29, 2007
    Location:
    Developer land
    #3
    Thanks for the reply, angelwatt. I've already attempted several different links and li tags but the same happens. What's being shown in the example is being brought together by Wordpress.
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Depending on the outputted HTML from that PHP you'll want to add the following,
    Code:
    #navbar ul li {
     display: inline;
    }
    Can you supply the actual HTML that gets outputted?
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    In the PHP get ride of the li tags around the PHP that puts in the links, as they each already have li tags around them. You're currently outputting HTML that has an li in side an li without a ul or ol, which is incorrect HTML. So remove the li tags in the PHP then use that snippet of CSS I posted. That should make it inline.
     
  6. EvanLugh thread starter macrumors 68000

    EvanLugh

    Joined:
    Aug 29, 2007
    Location:
    Developer land
    #7
    Removed the li tags and added the CSS - same outcome.
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    That's odd. Is it possible there's some other CSS that's overriding what you're doing?
     
  8. EvanLugh thread starter macrumors 68000

    EvanLugh

    Joined:
    Aug 29, 2007
    Location:
    Developer land
    #9
    Nope, there's no internal sheet and there's only style.css..
     
  9. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    It might have something to do with the margin-left: 730px. Also, border-spacing only applies to table elements.
     
  10. xper macrumors 6502

    xper

    Joined:
    Dec 15, 2005
    Location:
    Sweden - Halmstad
    #11
    Sometimes the ul li a wants to have a float: left; to get it inline, test it.
    change margin to margin: 80px 50px 0px 730px; so save some code instead of margin-left, margin-top and so on
     

Share This Page