Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Pages: Length and Order/ID

  1. strengthchick
    Member

    Hello,

    I'm very new to CSS, and I've searched all over support and forums and the W3 tutorial but so far haven't found the answer here regarding pages in Neat theme:

    On pages with more text—see http://edjfitness.wordpress.com/about/, for example—the background color/image stops before the content does, so the text ends up running over the color change and into the border, which continues on as long as the text. So, it's as if the page background stops prematurely or is set to a specific height, but the content just keeps spilling over.

    This is how the CSS is set up currently for the page:

    #page {
    background-image:url('http://edjfitness.files.wordpress.com/2009/11/pic-sky.jpg');
    background-repeat:repeat-x;
    width:700px;
    margin:0 auto;
    padding:0;
    }

    Thank you for any assistance you may be able to offer!

    The blog I need help with is edjfitness.wordpress.com.

  2. strengthchick
    Member

    Oh, I just realized that I had titled the post before I answered part of my own question. Please ignore the reference to the order/ID. I got that figured out! I'm still really struggling with the page length background, though!

  3. gwideman
    Member

    Possibly you were going for the effect of having your large pic-sky image be the background? If so, try:

    body {
    background-image:url(http://edjfitness.files.wordpress.com/2009/11/pic-sky.jpg);
    ...
    }
    ... and for #page, remove the background-images, and instead:
    #page {
    background: transparent;
    }

  4. nilesmedia
    Member

    Hm, thanks gwideman. That is a helpful work-around, but only almost in this case. It still doesn't address the fact that my page height seems to be truncated. The persistence of this problem arises when I go on to give the page any borders.

    I opened up a test blog in the same theme (Neat) under my other account, and I didn't change any CSS here. The page height truncation is, not surprisingly, not an issue. So, it must be an effect of something I've done. I just can't help but think that if I knew the proper coding for page height, I may be able to correct the problem.

    In case it's a helpful reference, here is the link to the test blog: http://nmtwo.wordpress.com/

  5. nilesmedia
    Member

    Ha, I'm getting closer! Trouble-shooting in the test blog, I see that it's my change to the footer that is the culprit. I had erased the WordPress and Theme information at the bottom by entering:

    #footer {
    display:none;
    }

    When I took this out, the full page acted as it should. So, now my question is new and two-fold:

    1.) Is it bad etiquette to erase that WordPress and Theme information?
    2.) How can I do it? That is, if doing it won't make me a really bad person.

    Thanks for any guidance—ethical or technical! :)

  6. gwideman
    Member

    Hi nilesmedia,
    Yeah, you've run into a somewhat tricky aspect of CSS behavior regarding floated elements. In this theme, you've got:
    -- div#content float: left, to position the main content on the left within div#page, and
    -- div#sidebar positioned inline, with a 492px left margin to make it appear on the right, with the blank margin to be occupied by the floating #content.

    Now you would probably expect that a containing box (here div#page) should expand to encompass its child elements, and thus expand around #content, #sidebar and #footer. However, as it turns out, CSS says that a container doesn't expand around floated elements... unless the container itself is floated.

    So, two possible solutions:
    1. Keep footer displayed. Keep it positioning below #content by virtue of its clear:both setting. Then set its visual appearance to disappear: very small font, light color or whatever.
    --- OR ---
    2. Set #page to float: left. This will cause the page to move over to the left, so you'll probably want to add a left margin.

    BTW, Eric Meyer "The Definitive CSS Guide" is pretty good on this subject, and as usual, if you're not using it, I highly recommend Firebug to allow you to play with these settings live.: http://grahamwideman.wordpress.com/2009/01/23/firebug-essential-for-cssing-wordpress/

  7. devblog
    Member

    1.) Is it bad etiquette to erase that WordPress and Theme information?

    Yes. You didn't code the theme, so credit to the author is appropriate.

    I tried checking what you've done in your test blog, but is set to private. I'm a visual guy so, I need to see what's going on in order to give you an appropriate answer. Having said that, it seems you're experiencing the effect where the container is not enveloping the inner elements as it should. If this is correct, the way to solve this problem is by adding two more properties to the container. Let's say your markup looks like this:

    <div id="page">
    <div id="content">
    ...
    </div>
    <div id="sidebar">
    ...
    </div>
</div>

    and your CSS looks like this:

    #page {
padding: 0;
width: 960;
}

#content {
float: left;
padding: 10px;
width: 760;
}

#sidebar {
float: right;
padding: 10px;
width: 180px;
}

    Then what you'd need to do, is to add this to your #page selector:

    clear: both;
overflow: hidden;

    So, the #page definition would look like this:

    #page {
clear: both;
overflow: hidden;
padding: 0;
width: 960;
}

    This is a matter of preference, but for CSS stuff, I like using Aardvark and the Web Developer add-on. Firebug, in my experience, doesn't handle "live" changes as well as Web Developer does. You might want to check it out and see which works best for you.

  8. gwideman
    Member

    Hi devblog:
    Your diagnosis parallels what I wrote: the problem is with the container #page not enveloping the inner elements.

    The two solutions I wrote work, as applied to the strengthchick website (see OP).

    I am intrigued that you propose that adding clear:both and overflow:hidden to the *container* (#page) will cause #page to envelope the inner elements. My understanding was that "clear" applies to the relationship to peer elements, not children.

    At any rate, I added clear:both to #page, and that did nothing. I added overflow:hidden and that DID cause enveloping, even with clear removed!

    This seems a very odd side effect of overflow:hidden indeed! Do you know more about this?

    (FWIW, this is using FF 3.5.x, on http://edjfitness.wordpress.com/testimonials/, with footer set to display:none)

  9. gwideman
    Member

    Answering my own question....
    Yep, it seems like adding overflow to the *container* is one known technique for this situation, where there are several others too:

    http://www.quirksmode.org/css/clearing.html
    http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
    http://www.positioniseverything.net/easyclearing.html

    It seems that the combination of overflow:something with no height mentioned does two things: Tells the container to pay attention to the contained floated elements, and deal with overflow by adjusting the height to contain it. Of course, if a height is mentioned or imposed, then hidden/auto/scroll settings will hide the overflowing content or add scrollbars.

    Good to know! Thanks devblog.

  10. devblog
    Member

    My understanding was that "clear" applies to the relationship to peer elements, not children.

    That is correct, but if memory serves me well (the first time I encounter this problem was like 4-5 years ago), the clear: both property forces IE6 to envelope the elements... so, it became a habit of mine to add that property as well.

    Before I found that solution, I was using a "div" tag below the floating elements to do exactly the same thing:

    <div style="clear: both;"> </div>

    That solution, although one that works, wasn't the most efficient to use for obvious reasons.

  11. gwideman
    Member

    devbog: Ah, OK, so the clear property was primarily an IE6-specific fiddle. Thanks for that additional note.

    FWIW, the additional div you suggest as the old solution does at least use "clear" in the way that it's actually defined to work, so although it's annoying (adds content just to get layout to behave) it at least doesn't depend on a relatively undocumented side-effect (like the overflow:xxx method does). That said, judging by quick reading of the references on this topic, the overflow method seems surprisingly consistently implemented.

  12. nilesmedia
    Member

    Wow, you people are amazing. Thanks so much for your help and suggestions.

    For now, I am taking the easy way out by leaving the footer in place. Luckily, this also happens to be the ethical route!

    Ultimately, this really just makes me want to continue to learn CSS and to create my own theme. :)

    All best,
    Hilary

  13. vodager
    Member

    I wanna create my own theme too !
    Where do I begin ?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags