Need help customizing footer – font size and dividing line

  • Hi there, I need some help in making my footer on https://www.the-gardenschool.org/ look better than it currently does. It’s the text that reads:

    The Garden School | Portland, Oregon 97212 | Contact: [email protected] | Copyright ? 2008

    There are two things that I need to do:

    1. Reduce the size of the font so that it’s smaller relative to the rest of the text on the page, and
    2. Create a thin dividing line above the text so that it’s graphically separated from the body text.

    Here’s my footer entry in style.css:

    /* Footer */
    #footer {
    clear:both;
    width:660px;
    margin:0 auto;
    padding:5px 10px;
    font-size:8px;
    border:#fff 1px solid;
    line-height:16px;
    background:#eee url(images/top-bar.gif) repeat-x top;

    #footer p span
    {
    margin:-20px 0 0 0;
    float:right;
    }

    And here’s my footer.php code:

    <div id=”footer”>
    <?php bloginfo(‘name’);?> | Portland, Oregon 97212 | Contact: [email protected] | Copyright © <?php echo date(‘Y’);?></p>
    </div>

    <?php wp_footer();?>
    </body>
    </html>

    Thanks in advance for any and all help.

    Best,
    Roger

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter rogerburks

    (@rogerburks)

    I have it looking better in Firefox – but still need the line. Safari is a different matter, can’t get the font size to change at all. Hmmm.

    Thread Starter rogerburks

    (@rogerburks)

    One last thing: how can I center the text? Can’t figure that out at all. Thanks again.

    Thread Starter rogerburks

    (@rogerburks)

    Hi everyone, I’d really appreciate some help here. Thanks again for your consideration.

    For centering text:

    text-align: center;

    For a border, replace:

    border:#fff 1px solid;

    with:

    border:#000 1px solid;

    For a top border, use:

    border-top:#000 1px solid;

    Also, you may be running into browser minimum font size issues using a font size of 8, try switching to 9 or something bigger. My Safari is set to show no fonts smaller than 9.

    Thread Starter rogerburks

    (@rogerburks)

    Thanks, Iridax. Looks much better now. I only have a few more questions:

    1. Is there a way to get just a line on top rather than a border line all the way around? You know, just a line to separate the body text from the footer, but not necessarily a full border?
    2. Do you know why it might not display the formatting – for example, borders, lines or text size – in Mac’s Safari browser? Very frustrating.
    3. I’m also still not seeing the text within the border box centered, even though I added that text-align tag.

    Thanks again for your help – almost there on this!

    Thread Starter rogerburks

    (@rogerburks)

    Any thoughts on this, anyone? Thanks again for any help you can offer.

    Thread Starter rogerburks

    (@rogerburks)

    One last try – still stuck here. Thanks for any help possible.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Need help customizing footer – font size and dividing line’ is closed to new replies.