dreamscapes | Coding Help for Bases

Entry tags:

Coding Help for Bases

I'm having an annoying little problem with a layout I'm working on for Bases. The problem is that the #content layer does not go down as long as it needs to, making the #primary layer longer and borking up the whole layout!

I've left one of the finished layouts on a side account here. As you can see, entries will cover up the nice bottom border I have set up and generally look sloppy in the process.

Any ideas?

Threaded | Top-Level Comments Only

The problem you're running into is that #content has no clearing element, in Bases. To add one, put this into your theme layers. The first function overrides the "print the page stuff in this order" to add a new div, just at the end of the #content. I named it #content-clear, but you can rename it if something else is easier to remember. The second adds a theme stylesheet assigning clear:both to that new div. That should do it.

function Page::print() 
{
    """<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\n<head profile="http://www.w3.org/2006/03/hcard http://purl.org/uF/hAtom/0.1/ http://gmpg.org/xfn/11">\n""";
    $this->print_head();
    $this->print_stylesheets();
    $this->print_head_title();
    """</head>""";
    $this->print_wrapper_start();
    $this->print_control_strip();
    """
    <div id="canvas">
        <div class="inner">
            <div id="header">
                <div class="inner">
                    """;
                    $this->print_global_title();
                    $this->print_global_subtitle();
                    $this->print_title();
                    $this->print_module_section("header");
    """
                </div>
            </div>
            <div id="content">
                <div class="inner">
                    <div id="primary"><div class="inner">
                        """; 
                        $this->print_body();
    """
                    </div></div>
                    <div id="secondary"><div class="inner">
                        """;
                        $this->print_module_section("one");
    """
                    </div></div>
		<div id="content-clear"></div>
                </div>
            </div> 
        </div>  
    """;
    
    """    
    </div> 
    """;
    $this->print_wrapper_end();
    """</html>""";
}

function Page::print_theme_stylesheet () {
    """
    #content-clear { clear: both; }
    """;
}

Edited (okay, we'll try a textarea) 2012-01-10 23:52 (UTC)

Thanks! I created the theme layer and applied it to the layout, but it doesn't seem to have done anything... I can see in the code that the div is there, but the problem is still the same. What am I doing wrong?

No, you've got it in there, and Firebug says the css is in effect. *frowns* Huh. That's exactly the code that Tabula Rasa uses for this problem, and I can see it working in some other themes. I am mightily puzzled! All I can suggest is playing around with things like "float:none" on #content-clear and maybe #content itself.

Phooey. I'll keep messing with it and see if I can't find a solution.

Do you have a screenshot of that problem? This is what I'm seeing in Firefox 9.0.1 (Mac 10.6.8) and Opera 11.60 (same OS)

Edited 2012-01-11 15:53 (UTC)

Here's the bit I'm talking about:

I put your style sheet on my account, and noticed that the reading page top looks fine, but the owned content, that is anything related to my entries are overlapping the main nav bar.

I compared your css to

malionette original, and can't find where that problem cropped up.

Then there's the content border which I haven't gotten to. :-/

Edited 2012-01-12 17:26 (UTC)

What browser are you using? I haven't tested this one on any other systems or browsers yet, so that may be part of it... otherwise, I may just need to go adjust some things in a higher content area, since so far all of the adjustments have been made on that tester account, which only has one entry.

Firefox 9.0.1, and Opera 11.60 on Mac OS X (10.6.8).

I figured out that the reading pages do not use the subtitle. That's why the reading and network entries do not overlap the navigation, and the reading/archive/tags pages do.

Ah! Thank you, I'll look into fixing that.

Threaded | Top-Level Comments Only

Coding Help for Bases

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject