ThemeShaper Forums » Thematic

[closed]

Wrapping footer subsidiaries in new DIV, positioning...

(3 posts)
  • Started 10 years ago by 4rederick
  • Latest reply from 4rederick
  • This topic is resolved
  1. I have managed to wrap the three subsidiaries with a new div container called "footerwrap" (due credit goes to middlesister) by placing this in function.php:

    function add_opening_divtag() {
    echo '<div>';
    }
    add_action('thematic_footer' , 'add_opening_divtag', 5);

    function add_closing_divtag() {
    echo '</div>';
    }
    add_action('thematic_footer' , 'add_closing_divtag', 15);

    Posted 10 years ago #
  2. (continued) ... So now I have this: www.josephfrederick.com

    I would like to have the entire contents of footerwrap position itself according the the right side of the window, so that when the window is made smaller, the left little bar image will disappear off the left side of the window while the info text and search bar to the right follow right along with it, retaining their spacings.

    I've tried a lot already, but mixing relative and absolute positioning, playing with margins, has not given me great results. Help please. And I'll be sure to describe how I got to where I am now if it would help anyone trying to do something similiar. Thanks!

    Posted 10 years ago #
  3. Got it. Was fixed with CSS adjustments. In the end, the big thing was forgetting to put a height spec on the footer ... Here's my working CSS ...

    /* =Footer
    -------------------------------------------------------------- */

    #footer {
    border-top:0px solid #ccc;
    background:#4f4f4f;
    width: 100%;
    height: 130px;
    }

    #siteinfo {
    color:#666;
    font-size:11px;
    line-height:18px;
    padding:22px 0 44px 0;
    }
    #siteinfo a {
    color:#666;
    }
    #siteinfo a:active,
    #siteinfo a:hover {
    color: #FF4B33;
    }

    /* =Footer Asides
    -------------------------------------------------------------- */

    #footerwrap {
    width: 100%;
    position: relative;
    }

    #subsidiary {
    width: 655px;
    padding: 45px 0 30px 0;
    position: relative;
    margin:0 auto;
    overflow:visible;
    }

    #subsidiary .aside {
    float:left;
    }

    #subsidiary #first {
    overflow: visible;
    height: 30px;
    width: 20px;
    }

    #subsidiary #first .textwidget {
    overflow: visible;
    background: none;
    }

    #subsidiary #second {
    width: 400px;
    overflow: hidden;
    margin-left: 5px;
    margin-right: 5px;
    }

    #subsidiary #second .textwidget {
    font-family:Geneva, Helvetica,sans-serif;
    font-weight:normal;
    font-size:10px;
    font-style:none;
    text-transform:none;
    color: white;
    text-align: center;
    }
    #subsidiary #second .textwidget a {
    font-family:Geneva, Helvetica, sans-serif;
    font-weight:normal;
    text-transform:uppercase;
    color: white;
    }

    #subsidiary #third {
    }

    Posted 10 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.