Support

milo Support forum for WordPress and BuddyPress themes » WordPress theme support1 2 3 ... 10

Groucho: footer won't stay at the bottom. Help. (10 posts)

Languages

de | fr | es | 日本語

About This Topic

Tags

  1. rss DLKeur

    member


    rss Posted 3 years ago
    #

    Hi Milo,

    Using Groucho over on The Deepening, http://www.thedeepening.com/ now. Very nice...except. I cannot get the footer to stay at the bottom of the page. I've tried everything I can find, including the sticky footer CSS by Ryan Fait http://ryanfait.com/, to try to get it to stay at the bottom of the page, below the sidebars which are longer that single posts, but nothing seems to work. The only page that looks right is the home.php which only looks okay when I have 10 posts and 10/-10 recent posts listed.

    This is the present style sheet with my customizations.


    /*

    Theme Name: Groucho
    Theme URL: http: //3oneseven.com/wp-themes/
    Description: 3column white.
    Author: miloIIIIVII
    Author URI: http: //3oneseven.com/
    Version: 3.17.3
    Tags: 3 column widgetready white fixed
    */

    body {
    background: #fff url(images/TDBGGroucho.jpg) top left repeat-y;
    color: #333;
    font: normal 14px Tahoma,Helvetica,Sans-Serif;
    margin: 0;
    padding: 0;
    min-width: 1150px
    }

    #dcontent {
    margin: 0;
    padding: 0;
    }

    #dheader {
    background: url('images/main.gif') top left no-repeat;
    margin: 0 0 0 -18px;
    }

    #wrap {
    background: transparent;
    color: #333;
    font: normal 14px Tahoma,Helvetica,Sans-Serif;
    margin: 0;
    padding: 0;
    }

    a img {
    border: 0;
    }

    a,a:visited {
    color: #900;
    text-decoration: none;
    }

    a:hover {
    color: #333;
    text-decoration: underline;
    }

    a:visited {
    color: #900;
    text-decoration: none;
    }

    #main h1,#main h1 a,#main h1 a:hover,#main h1 a:visited {
    margin: 0;
    padding: 30px 0 286px 0;
    text-align: right;
    color: #900;
    font: normal 1.8em Century Gothic,helvetica,Arial,Sans-Serif;
    font-variant: small-caps;
    }

    .des {
    float: right;
    margin: -213px 0 0 0;
    padding: 0;
    color: #333;
    font-style: italic;
    }

    small {
    color: #333;
    background: #fafafa;
    display: block;
    }

    #dawnform {
    maxwidth: 500px
    }

    #l_sidebar {
    background: transparent;
    float: none;
    position: absolute;
    left: 560px;
    width: 325px;
    min-height: 100%;
    margin: 0;
    padding: 0 0 0 20px;
    line-height: 20px;
    }

    #inner {
    width: 241px;
    margin: 0;
    padding: 0;
    }

    #r_sidebar {
    float: none;
    position: absolute;
    left: 910px;
    width: 220px;
    min-height: 100%;
    margin: 20px 0 0 0;
    padding: 0;
    line-height: 20px;
    }

    #mainmiddle {
    float: left;
    width: 500px;
    min-width: 500px
    margin: 0;
    padding: 0 0 0 20px;
    background: transparent;
    }

    #mainmiddle2 {
    float: left;
    width: 500px;
    min-width: 500px
    margin: 0;
    padding: 0 0 0 10px;
    background: transparent;
    }

    .bar {
    background: transparent url(images/title.jpg) 0 0 no-repeat;
    height: 368px;
    }

    #l_sidebar ul,#r_sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }

    #l_sidebar ul li,#r_sidebar ul li {
    display: inline;
    padding: 0;
    margin: 0;
    }

    #l_sidebar ul li a {
    display: block;
    color: #ccc;
    text-decoration: none;
    margin: 0;
    padding: 5px 0;
    border-bottom: 1px solid #1A1A1A;
    background: url(images/li.gif) no-repeat right center;
    }

    #r_sidebar ul li a {
    display: block;
    color: #333;
    text-decoration: none;
    margin: 0;
    padding: 5px 0;
    border-bottom: 1px solid #ccc;
    background: url(images/li.gif) no-repeat right center;
    }

    #l_sidebar ul li a:hover {
    background: #1A1A1A url(images/l.gif) no-repeat right center;
    color: #ccc;
    }

    #r_sidebar ul li a:hover {
    background: #ccc url(images/l.gif) no-repeat right center;
    color: #333;
    }

    #l_sidebar p,#r_sidebar p {
    padding: 3px 0 0 0;
    margin: 0;
    line-height: 20px;
    color: #333;
    }

    #main {
    width: 100%;
    margin: -20px 0 0 0;
    padding: 0;
    }

    #main2 {
    width: 1000px;
    margin: -20px 0 0 0;
    padding: 0;
    }

    #main p {
    padding: 10px 0 10px 0;
    margin: 0;
    line-height: 20px;
    }

    #main h2,#main2 h2 {
    color: #333;
    font-size: 21px;
    font-family: Century Gothic,Arial,Sans-Serif;
    font-variant: small-caps;
    padding: 5px 20px 5px 0;
    margin: 0;
    border-bottom: 1px solid #aaa;
    font-weight: 400;
    }

    #l_sidebar h2 {
    color: #fff;
    font-size: 21px;
    font-family: Century Gothic,Arial,Sans-Serif;
    font-variant: small-caps;
    padding: 5px 20px 5px 0;
    margin: 0;
    border-bottom: 1px solid #aaa;
    font-weight: 400;
    }

    #main h5 {
    color: #333;
    font-size: 16px;
    font-family: Century Gothic,Arial,Sans-Serif;
    font-variant: small-caps;
    padding: 0;
    margin: 0;
    font-weight: 400;
    text-align: right;
    }

    #main p ol {
    margin: 0;
    padding: 0 0 0 20px;
    }

    #main p ul {
    margin: 0;
    padding: 0 0 0 20px;
    }

    blockquote {
    margin: 0 0 0 25px;
    padding: 0 10px 0 10px;
    /* font-style: italic; */
    color: #000;
    border-left: 9px double #900;
    }

    #main blockquote p {
    margin: 0 0 10px 0;
    padding: 0;
    }

    #mainmiddle p img {
    text-align: center;
    border: none;
    margin: 0 auto;
    display: block;
    }

    .date {
    background: transparent url(images/cal.gif);
    float: left;
    width: 36px;
    height: 43px;
    margin: 0;
    padding: 0;
    }

    .date h3 {
    color: #900;
    font-size: 7px;
    font-weight: 700;
    padding: 4px 0 0 13px;
    margin: 0;
    text-transform: uppercase;
    }

    .date h4 {
    font-family: Times New Roman,Helvetica,Sans-Serif;
    color: #ccc;
    font-size: 21px;
    font-weight: 400;
    padding: 0 6px 0 9px;
    margin: 0;
    text-align: center;
    }

    #mainmiddle ul {
    list-style: none;
    margin: 0;
    padding: 0 0 20px 0;
    }

    #mainmiddle ul li {
    margin: 0;
    padding: 5px 0 0 0;
    }

    #mainmiddle ul li {
    color: #333;
    text-decoration: none;
    }

    #mainmiddle a {
    color: #900;
    text-decoration: none;
    }

    #mainmiddle ul li a:hover {
    color: #333;
    text-decoration: underline;
    }

    #main img.wp-smiley {
    float: none;
    border: none;
    padding: 0;
    margin: 0;
    }

    #main img.wp-wink {
    float: none;
    border: none;
    padding: 0;
    margin: 0;
    }

    .postspace {
    margin: 0;
    padding: 0;
    height: 30px;
    border-bottom: 8px double #fafafa;
    }

    #footer {
    background: #000000;
    width: 100%;
    height: 200px;
    margin: 0;
    padding: 0;
    text-align: center;
    }

    #searchdiv {
    margin: 0;
    padding: 0;
    }

    #searchform {
    margin: 0;
    padding: 0;
    overflow: hidden;
    }

    #s {
    width: 90%;
    background: transparent;
    color: #ccc;
    font: 11px Verdana, Helvetica, Sans-Serif;
    padding: 3px;
    margin: 8px 0 0 0;
    border: 1px solid #333;
    }

    #commentblock {
    width: 90%;
    background: transparent;
    color: #333;
    float: left;
    padding: 10px 20px 0 20px;
    margin: 10px 0 10px 0;
    border: 1px solid #fafafa;
    padding: 5px 5px 5px 0;
    }

    .commentinfo {
    clear: both;
    }

    .commenttext {
    clear: both;
    margin: 5px 0 20px 0;
    padding: 20px 10px 5px 10px;
    width: 60%;
    background: transparent;
    }

    .commenttext-admin {
    clear: both;
    margin: 5px 0 20px 0;
    padding: 20px 10px 5px 10px;
    width: 90%;
    background: #ccc;
    }

    #commentsformheader {
    padding: 0;
    }

    #commentsform {
    text-align: left;
    margin: 0;
    padding: 0;
    }

    #commentsform form {
    text-align: left;
    margin: 0;
    }

    #commentsform p {
    margin: 0;
    }

    #commentsform form textarea {
    width: 99%}

    p.comments_link img {
    margin: 0;
    padding: 0;
    border: none;
    }

    .entry {
    clear: left;
    line-height: 20px;
    }

    #wp-calendar {
    text-align: center;
    background: transparent;
    margin: 0;
    width: 95%;
    }

    #wp-calendar td {
    line-height: 10px;
    font-size: 10px;
    color: #ccc;
    }

    #wp-calendar td a {
    display: block;
    color: #900;
    text-decoration: none;
    line-height: 10px;
    }

    #wp-calendar #prev a {
    width: 30px;
    }

    #wp-calendar #next a {
    width: 30px;
    margin: 0 0 0 30px;
    }

    #wp-calendar #today {
    background: #900;
    color: #fafafa;
    }

    #wp-calendar #today a {
    color: #fafafa;
    font-weight: 700;
    }

    #wp-calendar caption {
    text-align: center;
    width: 100%;
    margin: 0 0 5px 0;
    font-variant: small-caps;
    }

    .ff a img {
    border: .08em solid #ccc;
    padding: 0.5em;
    width: 5.5em;
    height: 5.5em;
    margin: 0 .077em .077em 0;
    }

    .ff a:hover img {
    border: .08em solid #333;
    width: 5.5em;
    height: 5.5em;
    padding: 0.5em;
    }

    body div#toolTip {
    position: absolute;
    z-index: 1000;
    width: 160px;
    background: #000;
    border-top: 1px solid #333;
    text-align: left;
    padding: 5px;
    min-height: 1em;
    }

    body div#toolTip p {
    margin: 0;
    padding: 0;
    color: #ccc;
    font: 11px/12px geneva,arial,sans-serif;
    }

    body div#toolTip p em,body div#toolTip p em span {
    display: none;
    }

    .pullquote {
    padding: 10px;
    float: right;
    width: 180px;
    margin: 10px 0 10px 10px;
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;
    text-align: center;
    line-height: 22px;
    font-family: century gothic,tahoma,arial,sans-serif;
    color: #ccc;
    }

    .center {
    text-align: center;
    }

    .alignleft {
    float: left;
    }

    .alignright {
    float: right;
    }

    .clearfix: after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    .clearfix {
    display: inline-block;
    }

    * html .clearfix {
    height: 1%;
    }

    .clearfix {
    display: block;
    }

    .clear {
    clear: both;
    }

    hr.clear {
    clear: both;
    visibility: hidden;
    margin: 0;
    padding: 0;
    }

    .domtabs {
    float: left;
    width: 99%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-family: arial,helvetica,sans-serif;
    font-size: 11px;
    font-weight: 400;
    }

    .domtabs li {
    float: left;
    }

    .domtabs li a {
    display: block;
    padding: 5px 10px;
    border: 1px solid #fafafa;
    text-decoration: none;
    color: #333;
    }

    .domtabs a:hover {
    background: #ccc;
    }

    .domtabs li.active a {
    border: 1px solid #ccc;
    }

    .aligncenter {
    display: block;
    margin: 0 auto;
    text-align: center;
    padding: 3px;
    }

    .alignright {
    float: right;
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
    }

    .alignleft {
    float: left;
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
    }

    #d_sidebar {
    background: #000000;
    float: none;
    position: absolute;
    width: 100%;
    margin: 0;
    padding: 0 0 0 20px;
    line-height: 20px;
    }

    #col1 {
    width: 25%;
    float: left;
    margin-right: 15px;
    }

    #col2 {
    width: 25%;
    float: left;
    margin-left: 15px;
    }

    #col3 {
    width: 15%;
    float: left;
    margin-left: 15px;
    }

    .wp_widget_text {
    text-decoration: none
    }

    Thanks for any help.

  2. rss milo

    moderator


    rss Posted 3 years ago
    #

    You may use something like this:

    #stick{position:fixed;width:100%;height:125px;background:#000 url(folder/image path) repeat-x 0 0;margin:0;padding:0;bottom:0px;left:0px;z-index:500;}

    where "stick" is the fixed positioned container,
    to place it at the footer you just apply your height and so on,
    you can see an example here →.

    Then insert it in your footer.php file before the closing body/html tag

    <div id="stick">
    your content
    </div>

  3. rss DLKeur

    member


    rss Posted 3 years ago
    #

    I'll try that. BRB.

  4. rss DLKeur

    member


    rss Posted 3 years ago
    #

    Ummm. That puts it at the bottom of the browser window. I need it at the very bottom of the page after all the content, including everything in the sidebars. Like Wordpress default and Classic do. Is it possible? Isn't there a way to get the footer to act like a footer instead of something floating up the page to the bottom of the entry content?

    If not, then I guess would it be possible to just not call the footer at all or something, because, while I like the black on the bottom, anything is better than the bar floating up and occluding the sidebar content.

    Sorry to be a pain.

    I'll be going to bed, so sorry if I don't respond to any of your further help till tomorrow. It's after midnight here.

  5. rss milo

    moderator


    rss Posted 3 years ago
    #

    There are more problems on your site and code,
    iframe? what is that good for?
    site doesn't work on 1024px width, what is the common browser width.

    Footer likewise you have to alter this code
    #footer { background:#000000; width:100%; height:200px; margin:0; padding:0; text-align:center; }
    to your needs.

  6. rss DLKeur

    member


    rss Posted 3 years ago
    #

    Hi Milo,

    That footer code is in the style sheet already. I've tried putting in another <div> and </div>, I've played with various CSS "fixes" offered by CSS "experts." It's a common problem with Wordpress themes as many, many people have this problem of the footer floating up instead of staying down all the way at the bottom of the page, not just the bottom of the browser window.

    About the width issues:

    I don't know what you mean by "doesn't work." That the visitor would have to scroll horizontally right to see the third column? Or am I missing something?

    Here's what I see: The left column is 500 pixels wide, and then there's the left sidebar. Both together I believe could be viewed by an 800x rez browser without scrolling. The right sidebar doesn't carry particularly important navigation aids, so I wasn't worried if a visitor had to scroll for it should they want to. On 1024rez, again, the main post panel and the left sidebar are, I believe, easily available.

    Originally, I was using Soho on this site, and then I used another of your wonderful themes. (Yes, I love your themes.)

    I you have better suggestions, of course, I'm very interested.

  7. rss DLKeur

    member


    rss Posted 3 years ago
    #

    By the way, I'm not sure where you are seeing the iframe. I think maybe one of the widgets uses iframe, unless you are looking at the source code or something. I don't see iframe in the CSS stylesheet.

  8. rss milo

    moderator


    rss Posted 3 years ago
    #

    Horizontal scroll is not always the optimal decision,
    apart from that it looks buggy, maybe you can resize the sidebar widget.

    Footer: if you add clear:both; to the footer code, it will clear all divs before and sit at bottom.

  9. rss DLKeur

    member


    rss Posted 3 years ago
    #

    Thanks, Milo. I'll try the clear:both fix.

    About the design, my choice of using Groucho and allowing the farthest sidebar only scrollable for smaller resolutions.

    Usually I design pages (HTML and CSS) to be scaleable. With this blog-turned-website-presentation, though, I feel that:

    * I need the changing content to be available vertically in a reasonably sized column;
    * I need to have promotional advertising, news blips, login, and subscribe buttons, as well as main navigation available, as well. (left sidebar)
    * Everything else (right sidebar) is of lesser importance, but provides interest for those with higher end computer set-ups, providing a nice balance of intrigue.

    The main focus of the website is to provide information on new fiction releases, contributed by myself, my editors, and selected paid and honorary members. Right up there as a strong secondary focus is to promote specific authors and publishers, their fiction works, as well as audio recordings I'm creating in studio right now.

    If there were a way to create a real 3D space experience, I'd love it. It's what's needed on the Net, IMO. This "webpage-as-digital-paper-page" is old and pretty much boring. Your designs come closest to presentations that provide less of a 2D linear approach and, instead, stimulate and intrigue, making a website an event, an experience, and a place someone wants to explore.

    I'm at a loss on how to proceed with a presentation that incorporates what I feel is something optimum, yet captivating that beckons the curious inward...unless one goes to a Flash presentation, something I don't see as practical, at all, especially for functional dynamics and constantly changing content.

  10. rss milo

    moderator


    rss Posted 3 years ago
    #

    There is always the way of using flash within a page template like my → gallery,
    maybe something like that suits you.

Reply

You must log in to post.

milo Support forum for WordPress and BuddyPress themes » WordPress theme support1 2 3 ... 10
Samurai’s Path
Samurai’s Path
Monica Bellucci
Monica Bellucci

Design by milo

Milo designs web sites that strike the perfect balance between professional high-class graphics, functionality, usability, user experience, and high performance.

More
More