Horizontal Link

  • I am trying to style some links sets to display horizontal. I am using < ?php wp_get_links(1); ?> to display a catagory of links. I would like for these groupings to be side by side rather that each catagory being listed under on another. My link page can be viewed at https://dennisbullock.com/?page_id=106

Viewing 7 replies - 1 through 7 (of 7 total)

  • First suggestion, don’t set the links in <pre> elements. Not only is this invalid XHTML (they should be in a <ul> or <ol> element), but it makes it difficult to style the li tags. If you want the preformatted look, use <ul> in their place, give this a class (<ul class="links">), and style .links in your css to use a fixed-width font.

    Speaking of a class, you can use display: inline; to force list elements to fall on the same line (i.e. display horizontally):

    .links li {
    display: inline;
    }

    Thread Starter bullock_d

    (@bullock_d)

    Where do I put the <ul class=”links”>?

    You would replace the <pre> tags in your template with them. Though looking at your site, appears you’ve already slipped in ul tags. :)

    Thread Starter bullock_d

    (@bullock_d)

    That didnt do what I was thinking. That kept the catagory names vertical but moved the links horizontal. I was looking for the opposite…the links to stay horizontal but the two lists to be side by side.

    Have a look at mu links page.

    If you’re looking to set the blocks of links side by side, you’ll have place each link category in a div and–for at least those following the first–float them (left). The section at the bottom of your page (Get Around, Recent Posts, etc.) is a perfect example.

    Thread Starter bullock_d

    (@bullock_d)

    OK I see what you are saying……that sounds like I will not be able to list them on a page then like I have them now. Or can I put that code in a page so it runs right?

    Well, yes. Here’s a redo of your page that demonstrates what I’m talking about:

    https://guff.szub.net/wp-content/xfiles/dennisbullock-links.html

    Note I didn’t perform any sanity checking on the divs, so it’s possible I’ve doubled-up somewhere. Also, the reuse of your ‘ancillary’ id for the div after the Links header is a XHTML no-no, as an id is supposed to be unique on a page (not used more than once). For that, one option is to change it to class="ancillary" in the top and bottom section divs, then alter any reference of #ancillary in your css to .ancillary.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Horizontal Link’ is closed to new replies.