• Resolved Ron Foreman

    (@rforeman)


    I am using the 1024px 1.0 theme. I have added the links to the sidebar using this language:

    <blockquote>
    <h2>Helpful Links<h2>

      <?php get_links_list(); ?>

    </blockquote>

    You can see the CSS problem here: http://www.royalmontrealgolfclub.info.

    This is the Sidebar section of the CSS file:
    <blockquote>
    /* Sidebar */
    #sidebar {float:left; margin:0 0 5px; padding:1px 0 0; width:195px;}
    #sidebar p,#sidebar ul,#sidebar .textwidget {margin:0 0 15px 10px;}
    #sidebar li {list-style:none; margin:0 0 6px;}
    #sidebar li a {font-size:1.2em; font-weight:bold; padding:2px;}
    #sidebar ul ul {margin:5px 0 5px 10px;}
    #sidebar ul ul li {margin:0 0 5px;}
    #sidebar ul ul li a {font-weight:normal;}
    </blockquote>

    This is the links section of the CSS file:
    <blockquote>
    /* Links */
    a {color:#4088b8; font-weight:bold; text-decoration:none;}
    a:hover {text-decoration:underline;}
    a img {border:0;}
    </blockquote>

    Can anyone give me some tips on how to display the links in the sidebar consistently with the other sidebar content?
    Thanks

Viewing 7 replies - 1 through 7 (of 7 total)
  • Instead of <blockquote> you should probably use <ul> and <li>.
    Something like:
    <h2>Helpful Links<h2>
    <ul>
    <li>
    <?php get_links_list(); ?>
    </li>
    </ul>

    Thread Starter Ron Foreman

    (@rforeman)

    Hi Samboll,
    Thanks for your reply. I apologise; the

    is not in my CSS, I was trying to fomat the posting here at WordPress Support and don’t know how to use the back quotes.

    Here is how my files read:

    In the sidebar
    <h2>Helpful Links<h2>
    <?php get_links_list(); ?>

    In the Sidebar section of the CSS file:
    /* Sidebar */
    #sidebar {float:left; margin:0 0 5px; padding:1px 0 0; width:195px;}
    #sidebar p,#sidebar ul,#sidebar .textwidget {margin:0 0 15px 10px;}
    #sidebar li {list-style:none; margin:0 0 6px;}
    #sidebar li a {font-size:1.2em; font-weight:bold; padding:2px;}
    #sidebar ul ul {margin:5px 0 5px 10px;}
    #sidebar ul ul li {margin:0 0 5px;}
    #sidebar ul ul li a {font-weight:normal;}

    In the Links section of the CSS file:

    /* Links */
    a {color:#4088b8; font-weight:bold; text-decoration:none;}
    a:hover {text-decoration:underline;}
    a img {border:0;}

    You can see the CSS problem here: royalmontrealgolfclub.info.

    Can anyone point me in the right direction?
    Many thanks

    Your code looks like so:

    <h2>Helpful Links<h2>
    <ul>
    <li>
    <li id="linkcat-3"><h2>Canadian Open</h2>...

    You *should* have a closing UL tag before the “Canadian Open” thing, but you don’t. Instead, the “Canadian Open” (and stuff after) is showing up as a sublevel link to the “Helpful Links”. So, what’s happening is, in your CSS:

    #sidebar li a {font-size:1.2em; font-weight:bold; padding:2px;}

    see that “font-size:1.2em”? All of your LI tags are set to have the font size be 120% of the parent text size. Therefore your sublevel LI’s will be 120% the size of the main level LI’s – which is why your fonts are so much bigger.

    You can either remove the sublevels from the “Helpful Links” area (I’m wondering if you have them set up as subcategories in your WordPress area? If so, there’s no need for that – you can get rid of “Helpful links” altogether and make the rest of them main-level link sections. ALL links are “helpful” 🙂 )

    Or, you can do this:

    #sidebar li li a {font-size:1em;}

    And add that to your stylesheet.

    You should also validate your code. It’s always a good idea when you come qacross problems, and should always be your first line of “fix it” defense. Many things get fixed immediately upon validation without much extra effort 🙂

    Wait – played a bit. Put this in your stylesheet instead:

    #sidebar li h2 {font-size:1.1em;}
    #sidebar ul ul li a {font-size:0.9em; font-weight:bold;}
    #sidebar li.page_item {font-size:1.2em;}

    Thread Starter Ron Foreman

    (@rforeman)

    Dear Doodlebee,

    Thanks very much for taking the time to help me.

    I tried to add the three lines to the stylesheet without success.

    Then I tried validating but got 35 errors and a “This page is not Valid XHTML 1.0 Strict!” message.

    Then I ‘viewed the source’ and compared the “Links” section to the “Pages” section which was displaying correctly.

    I discovered a simple error that solved the problem. I didn’t close my h2 tag!! As soon as I fixed that it worked. http://www.royalmontrealgolfclub.info.

    Thanks again!! So simple but I couldn’t see it.

    Thread Starter Ron Foreman

    (@rforeman)

    Which was exactly what you said the problem was above!!!

    Glad I helped – albeit in a roundabout way 😉

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

The topic ‘CSS problem with Links in Sidebar’ is closed to new replies.