Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Vertical arrangement of CSS chunks

  1. gveers
    Member

    My blog is deepleft.wordpress.com and uses the Sandbox theme. I'm having difficulty getting my CSS "chunks" to line up along the y-axis the way I want. Is there a way to move the sidebars towards the top of the screen without modifying the HTML? The content defaults to appearing above the sidebars, perhaps because the content chunk comes first in the HTML.

    Any advice would be greatly appreciated! Here is my CSS code:

    /*--- PAGE ---*/
    body {
    padding: 0 0 0 100px; background: #000000;
    font-family: Arial, sans-serif; color: black; font-size: 0.8em;
    }

    body a {
    color: #444444;
    }

    body a:visited {
    color: #006600;
    }

    body ul {
    list-style-type: none; margin 0; padding: 0 0 0 1em;
    }

    #wrapper {
    background: url('http://deepleft.files.wordpress.com/2007/05/wrapper.jpg') repeat-y;
    }

    /*--- HEADER ---*/
    #header {
    width: 800px; height: 220px;
    background: url('http://deepleft.files.wordpress.com/2007/05/banner.jpg') no-repeat;
    }

    #header h1, h1 a, h1 a:hover, h1 a:visited {
    font-family: Arial, sans-serif; font-size: 1.3em; font-variant: small-caps; text-decoration: none;
    color: white;
    text-align: left; padding: 1em 0 0 5px;
    }

    #blog-description {
    color: white; font-variant: small-caps;
    text-indent: 1em;
    }

    /*--- GLOBALNAV ---*/
    .access, #globalnav {
    display: none;
    }

    /*--- SIDEBAR ---*/
    #primary {
    float: left; width: 200px; height: 750px;
    background: rgb(205, 217, 233) url('http://deepleft.files.wordpress.com/2007/05/foul-line.jpg') no-repeat;
    font-size: 1.1em; font-variant: small-caps; color: white;
    }

    #primary ul a, #primary ul a:visited, #primary ul ul {
    font-variant: normal; font-weight: bold; list-style-type: square;
    }

    /*--- NAVIGATOR ---*/

    #secondary {
    position: absolute;
    top: 278px;
    left: 320px;
    word-spacing: 4em;
    }

    #secondary a, #secondary a:visited {
    color: black; font-variant: small-caps; text-decoration: none;
    }

    #secondary a:hover {
    color: white;
    }

    /*--- CONTENT ---*/

    #content {
    width: 580px;
    margin: 0 0 0 225px;
    background: rgb(205, 217, 233) url('http://deepleft.files.wordpress.com/2007/05/content.jpg') no-repeat;
    border: solid rgb(150, 170, 100);
    border-width: 20px 0 0 5px;
    padding: 0 5px 0 10px;
    }

    /*--- FOOTER ---*/
    div#footer {
    clear: both;
    width: 800px;
    background: rgb(205, 217, 233);
    }

  2. atthe404
    Member

    The CSS positioning schemata (layout) you are using is so screwed I would not even begin to mess with it.

  3. drmike
    Member

    Feel free to explain how they should go about fixing the code then. :)

  4. sunburntkamel
    Member

    haha, root, you do not dissappoint your reputation. nonetheless, it's the same reaction i had.

    seriously, start from a layout that works, and build from there. if you can't manage your own layout, it's not really fair to expect someone else to fix it.

  5. gveers
    Member

    Let me rephrase the question. It's actually much simpler than "fix my stuff," but I think posting the code has confused the issue.

    In the HTML for this theme the divs appear in the following order:

    content
    primary
    secondary
    footer

    The arrangement I'd like (#16 in sunburnt's link) needs the primary (or secondary) div to appear above the content div. Is this possible considering the arrangement in the HTML code? It's like I'd want to use a float: top or something but no such thing exists.

    By the way, I think sunburnt's links should be incorporated into the F.A.Q. as they've been helpful.

  6. sunburntkamel
    Member

    crap, i'm sorry, i didn't mean to link to something like that. it's bad form, unsemantic, and bad for SEO. lemme find something better. Sidebars should never come before content in the HTML markup

  7. sunburntkamel
    Member

    use this one instead:
    http://blog.html.it/layoutgala/LayoutGala34.html
    the names of #wrapper and #container are switched, #navigation=#primary, #extra=#secondary

  8. sunburntkamel
    Member

    just as an aside, float: top is pure genius. on the top of my wishlist, right up there with height: 100%;

  9. devblog
    Member

    it's bad form, unsemantic, and bad for SEO

    Bad for SEO, yes, but I don't think it's bad form nor unsemantic. Even the W3 website is laid out like that.

    BTW, thanks for the links.

  10. sunburntkamel
    Member

    maybe unsemantic is harsh, but it degrades badly for mobile users and screen readers.

  11. devblog
    Member

    I can't edit my previous post. Scratch the 'nor unsemantic' part. It is.

  12. devblog
    Member

    no, you're totally right ;) I was thinking exactly the same, especially if you use Lynx, for instance.

  13. atthe404
    Member

    sunburntkamel is doing a great job of adding some technical detail to my remark. It may seem harsh. I meant it. WTF is this :

    #secondary {
position: absolute;
top: 278px;
left: 320px;
word-spacing: 4em;
}

Or this 

#primary {
float: left; width: 200px; height: 750px;
background: rgb(205, 217, 233)

    .

    A fixed height in a blog?
    There is absolutely no substitute for a layout which works. I am sorry but that is it. If WP com serves up borked layouts it is virtually impossible to fix without a very good knowledge of CSS and the upgrade.

  14. atthe404
    Member

    Update: In fact about the only bit I do not have an issue with is the source order. Content first is good as SBK has pointed out.

  15. sunburntkamel
    Member

    well, people do have to learn somehow.

    i think the fixed height and absolute positioning were failed attempts to get beat the layout into the shape he wanted.

    starting from a functional layout will be much more fruitful.

  16. gveers
    Member

    Thanks again, I'm 99% there. The "gala layout" link was immensely helpful to see what layouts are feasible. Maybe most people aren't quite as nuts on customization as I am, but for relatively new folks working with Sandbox I think this should be the first thing they see.

    Posting the code probably only confused things, particularly because it was a work in progress. The absolute positioning was a band-aid solution as SBK suggested. As for the fixed height, it was an attempt to set a minimum height for the blog (because I wanted the background images to always show in their entirity).

  17. atthe404
    Member

    @SBK - I hadn't seen the Gala layout before. For my two cents in this area of layouts it is the slickest thing I have ever seen. Every layout is absolutely flawless from the technical standpoint and it is beautifully presented in an accessible format. Kudos to the author, and one for the bookmarks. It should be the first reference for any kind of positioning question.

    OT: A lot of posters here do not realise - so it is worth repeating - that if we have a link to the BIQ we can see both the problem and the CSS.

  18. gveers
    Member

    BIQ = "blog in question?" It's deepleft.wordpress.com.

    Thanks again for everyone's help. I'm pretty happy with how it turned out, and I learned quite a bit about CSS in the process!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.