1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Center footer links

Discussion in 'CSS' started by Lucas806, Aug 28, 2015.

  1. #1
    I'm testing something on http://freemcpremium.co/test, and I'm trying to get the links in the footer display in the center, like how the copyright text is centered, but I can't manage it. Can someone help? Thanks.
    SEMrush
     
    Lucas806, Aug 28, 2015 IP
    SEMrush
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,498
    Likes Received:
    377
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Have you tried this?
    
    footer#footer div.footer-links {
      display: table;
      height: 100%;
      margin: 0 auto;
    }
    Code (markup):
    Instead of floating the lists, I'd probably make them inline-block and set the parent to {white-space: nowrap}.

    cheers,

    gary
     
    kk5st, Aug 28, 2015 IP
  3. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #3
    The CSS is such a screwed up mess that it is a wonder it even renders.

    The cause of the problem is probably this rule:
    footer#footer div.footer-links > a, footer#footer div.footer-links > ul in compile.css that looks like it was written for the Comedy channel. it sets flat left when what the uls need is margin auto. The Css is such a disaster that I don't know if trying to change it will break something else.

    When I see the body tag screwed up with multiple classes (looks like about a dozen); a mix of local and remote CSS; and load time scripting I know I am looking a load of crap that will impossible to maintain and will at some melt down into a pool odf liquid manure. You need to crap that mess and take the time to do styling that is rational and logical.
     
    COBOLdinosaur, Aug 28, 2015 IP
  4. Lucas806

    Lucas806 Greenhorn

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #4
    Can someone help me fix this? And clean up the rest of the site's code? I'll give you £10 on PayPal. I'm not great with CSS.

    Also, you didn't check my site because that's not what I'm trying to do. I know how to center a simple line of text.
     
    Lucas806, Aug 28, 2015 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,498
    Likes Received:
    377
    Best Answers:
    29
    Trophy Points:
    335
    #5
    @qwikad.com, that won't put the three lists side by side as columns.

    @Lucas806, like others here, I'm happy to help you to help yourself, but my professional services come considerably higher than the price of two or three coffees. If the dollars, pounds or euros are dear, you need to put the time and effort into learning to do it yourself.

    g
     
    kk5st, Aug 28, 2015 IP
    sarahk likes this.
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,498
    Likes Received:
    377
    Best Answers:
    29
    Trophy Points:
    335
    #6
    No, I didn't look at your fiddle until a moment ago. The problem is that if the lists are rewritten to again (as the OP had it originally) reflect the proper structure, your solution breaks. In fact, it breaks now if a mix of link lengths alters the heights of the various lists.

    g
     
    kk5st, Aug 28, 2015 IP
    qwikad.com likes this.
  7. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,423
    Likes Received:
    1,379
    Best Answers:
    24
    Trophy Points:
    400
    #7
    Gary, I am not a pro. I am just throwing ideas around. Here's a simple working solution. If the OP doesn't want to use it, I am fine with it. It works whether the links have various lengths and/or columns have various heights. The divs can be styled of course.

    http://jsfiddle.net/qPAfK/86/


    <div id="footer">
        <div class="footer">
            <ul>
                <li>
                    <div>Some text</div>
                    <div>Some text more</div>
                    <div>Some text even more</div>
                    <div>Some text</div>
                    <div>Some text</div>
                    <div>Some text</div>
                    <div>Some text</div>
                </li>
                <li>
                    <div>Some text</div>
                    <div>Some text more</div>
                    <div>Some text even more</div>
                    <div>Some text</div>
                    <div>Some text</div>
                </li>
                <li>
                    <div>Some text</div>
                    <div>Some text more</div>
                    <div>Some text even more</div>
                    <div>Some text</div>
                    <div>Some text</div>
                </li>
            </ul>
        </div>
    </div>
    Code (markup):
    #footer {
        width: 100%;
    }
    .footer {
        text-align: center;
        display: block;
        margin: 0 auto;
    }
    ul {
        list-style: none;
    }
    li {
        vertical-align: top;
        text-align: left;
        display: inline-block;
        width: 160px;
    }
    Code (markup):
     
    qwikad.com, Aug 28, 2015 IP