Need help? Check out our Support site, then


Problem sizing links and images in lists with CSS

  1. Hi there, I'm using the Untitled theme. I've been trying to add links to our Facebook and Twitter pages. The widget option doesn't work with the layout we want. Having opted to contain the images and links in a small box at the end of each page/post I'm having problems getting it to look the way I want.

    I tried it first in a table but have changed to a list. The odd thing is that the images/links don't seem to be contained within the list elements. Can anyone help, please? It's driving me nuts.

    Thanks!

    At the moment the CSS is:
    #inline-list {
    margin-top: 40px;
    border: 1px solid #BBB;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    width: 35%;
    height: 120px;
    font-family: "Raleway";
    float: left;
    vertical-align: top;
    background-color: #FFF;
    font-size: .8em;
    letter-spacing: 8px;
    font-style: normal;
    color: #FF6600;
    }

    #inline-list a {
    vertical-align: top;
    }

    #inline-list ul, #inline-list li {
    display: inline;
    width: 60px;
    list-style-type: none;
    vertical-align: top;
    }

    And the code: <div id="inline-list">

    </div>

    The blog I need help with is celebratingsanctuary.wordpress.com.

  2. You can target those images. But you don't need a list to arrange a couple of icons, so back to square one please:

    "The widget option doesn't work with the layout we want."
    That's highly unlikely. What exactly doesn't work?

    "I'm having problems getting it to look the way I want."
    How do you want it to look like?

    PS To display code here, you need to enclose it in backticks (see the note on allowed markup). But if it's on a published page you don't need to paste it when asking a question: we can see your code.

  3. Justpi, Thanks for the response. Sorry, I wrote the message late at night and now realise it's misleading - when I said it doesn't work I meant that putting a widget column on the right doesn't suit the design - not that the widgets don't work. We don't want a second column. And I don't think there's an option to add a widget to the bottom of the Untitled theme.

    I have used WordPress a lot in the past and design other sites from scratch. This is the first time I've had to write to the forum. (Again, sorry about the display code error, as soon as I sent it I realised my mistake.) All I want to do is make a box that appears more or less where the ugly one I've made appears now - I want it about 200px wide with the text 'Follow us' and the two image links to Fbook and Twitter.

    I have tried div with float, tables, lists and just can't make it happen. It's particularly frustrating as it should be so simple. I think I must be missing something fundamental about writing CSS for WordPress. The main thing I have problems altering in WP stylesheets or building from scratch seem to be anything to do with links.

  4. You don't need floats, tables, lists or anything: you just need the basic HTML in a Text widget, and then you can use CSS to re-position and re-style it.
    So first remove the coding from the pages, and add this in a Text widget - just this:

    <p>Follow us:</p>
    <a href="https://twitter.com/cslondonfest" target="_blank"><img alt="twitter" src="http://celebratingsanctuary.files.wordpress.com/2013/06/twitter.jpg" /></a><a href="https://www.facebook.com/CelebratingSanctuaryLondon" target="_blank"><img alt="fbook" src="http://celebratingsanctuary.files.wordpress.com/2013/06/fbook.jpg" /></a>

    Then tell me exactly where you'd like it to show up.

  5. You've been really helpful, justpi. Thanks - the images/links are where we want them to be.

  6. You're welcome.
    But as I said, you didn't have to add the same thing in some 15 pages: you'd add it once in a Text widget, then use absolute positioning to place it below the blog content once for all (and it should be below the share/like buttons, not above them).

  7. Oh, OK, thanks. As you've probably seen from the dates this is a bit of a last minute site. When I've a chance over the next few days I'll try out your suggestion. Great to learn that it's possible to do.
    And thanks again for taking the time to help me.

  8. You're welcome.

    In the meantime fix something else please: "Design & Development by Counterpoints Arts" as an image??? I suggest you remove this:

    #colophon {
        background: url("http://celebratingsanctuary.files.wordpress.com/2013/06/design.png") no-repeat scroll -90px 50px transparent;
        height: 120px;
    }

    and replace it with this:

    .site-info:after {
        content: "Design & Development by Counterpoints Arts";
        display: block;
    }

    (Or inline instead of block, if you want it next to instead of below the WP credits.)

  9. I didn't know the CSS attribute 'content' existed - thanks.

    I've also found your blog and read the posts about absolute positioning and widgets. Very early this morning I tried to make the links work in the text widget but came across a few problems. As the event is kicking off on Sunday I can't experiment with it 'live' at the moment. The current solution isn't great but it's working for now. Maybe I can explain the problem and show it to you in a few weeks?

    PS - will read a lot of the other stuff on wpbtips.wordpress.com as clearly I have a huge amount to learn!

  10. "Maybe I can explain the problem and show it to you in a few weeks?"
    Of course - with "you" in the plural: I'm neither the only one who answers CSS editing questions nor the most experienced one.

    I'm an expert in inline CSS, so there are probably things you can learn on my blog, but ignore the posts on absolute positioning: they are for users who don't have the Custom Design upgrade. Since you have the upgrade, you'll use the appropriate coding in the CSS editor, not in the widget. For a simple example, add a text widget, type anything in it and save, then paste this in the CSS editor and see what happens:

    #main {
        position: relative;
    }
    #text-N {
        position: absolute;
        bottom: 0;
        left: 0;
    }

    (Replace N with the actual id number of the widget.)

Topic Closed

This topic has been closed to new replies.

About this Topic