erinptah: (winding road)
humorist + humanist ([personal profile] erinptah) wrote in [community profile] style_system2012-02-17 10:32 pm
  • Add Memory
  • Share This Entry
Entry tags:

Layout help, fixed & fluid (Tabula Rasa)

I'm working on two Tabula Rasa layouts -- one fixed, one fluid, with matching graphics -- and starting to hit the limit of what my understanding of CSS can handle. Help?

Here's the current state of the fixed-width layout, currently enabled at [community profile] punditfic:




And here's the fluid version, visible in action at [community profile] andthatstheword:




Issues in the fixed-width layout:

  • When the page isn't tall enough, module-content and module-powered show up in the middle of the sidebar. Avoided!

  • In the main entry view, how can I get usernames to display reliably under the userpic? The best I got (through messing with margins) was "it'll appear there, but entry text will overlap it." (Also a problem in the fluid version.) Solved in both!

  • New issue...when #primary is shorter than #secondary, the page only scrolls down as far as #primary.



    • Things in the fluid layout that I can't get to match the fixed-width layout:

  • On the calendar-by-month view, the entry information isn't indented with respect to the date. Prettied up!

  • Similarly, the bulleted list on the tags page isn't indented. Solved!

  • Information in the entries on the main page is all squished together (title overlapping with date/time, tags overlapping with entry tools). Solved!

  • Everything to do with comment display just isn't happening. The tools won't display inline, there's no space around comment-content, the header has no background... Solved!



    • Other issues with the fluid layout:

  • Can I make the #primary and #secondary divs extend to the bottom of the page (to extend the background) without covering the header?

  • Looks like I need to do something with module-content and module-powered here too. When the sidebar is on the left, they try to squeeze into the gap between #secondary and #primary. This isn't a problem when the sidebar is on the right (or at least, it hasn't been at my resolution). Solved!


    • Anyone who can point me in the right direction on any of these points would be greatly appreciated!
    Flat | Top-Level Comments Only
    marahmarie: (M In M Forever) (Default)

    Question about:

    [personal profile] marahmarie 2012-02-20 09:25 pm (UTC)(link)
    On the calendar-by-month view, the entry information isn't indented with respect to the date.

    Do you mean on this page? I can't puzzle out code until I know what page I'm on, no pun intended. :)

    Also, I'll be away from the computer until possibly tomorrow, but I'll swing around again to see how things are coming along...
    erinptah: (Default)

    Re: Question about:

    [personal profile] erinptah 2012-02-21 01:08 am (UTC)(link)
    No, I meant this one.

    All your help is appreciated, no matter how fast it comes ^_^
    marahmarie: (M In M Forever) (Default)

    Re: Question about:

    [personal profile] marahmarie 2012-02-21 09:05 pm (UTC)(link)
    OK, I was afraid it was that page. What exactly do you want in place of what you've got? Do you want the entry titles more left-indented beneath each date link? Do you want the usernames to keep floating right (which might be an effect from the code I gave you, I'd have to look into it)?

    What I normally do with that page on my own layouts is display the link to the numerical date in a really big font, make the title link proportionately smaller but not left-indented, and...not much else, really, since the whole page uses nothing but h3.titles and definition lists, which makes it a real PITA to pretty up all that much.

    Example of what I do with it here: http://marahmarie.dreamwidth.org/2012/01/

    If I were you, I might also want to get the word "Tags" inline with each set of tags themselves...so tell me what you want and I will try to produce the code that makes it work. :)
    erinptah: (Default)

    Re: Question about:

    [personal profile] erinptah 2012-02-22 01:12 am (UTC)(link)
    Ooh, the floating usernames are definitely a side effect of recently added code. It looks kind of cool, though.

    I want the page to look basically like the fixed version does. Time, title, username, and tags appearing as if they've been blockquoted with respect to the links to numerical dates.

    And yes, I'd like to bring the word "Tags" inline! Poked at the code a bit, but couldn't guess how to make it work. Hopefully you'll have more luck ^_^;
    marahmarie: (M In M Forever) (Default)

    Re: Question about:

    [personal profile] marahmarie 2012-02-22 02:14 am (UTC)(link)
    Usernames floating right is indeed my fault. "Tags" text poking out from home base is, too. I forgot to give you view-specific code to keep other views from embarking on their own journeys into unimaginably bad CSS.

    So let's fix what I broke. Change this: .entry-poster{float:right;clear:right;margin-left:.7em;margin-right:.3em;margin-bottom:.3em;}

    To: .entry .entry-poster{float:right;clear:right;margin-left:.7em;margin-right:.3em;margin-bottom:.3em;}

    And this: .tag ul {display: inline-block;margin-bottom:1em;}

    To: .entry .tag ul {display: inline-block;margin-bottom:1em;}

    To get the page looking more like your fixed-width layout does:

    .month .tag ul {/* you might not need this line since I wrote it before changing the code snippets above; try skipping it */
    display: inline;}
    .month dd{display:block;margin-left:30px;}
    .month dl .tag {max-width:420px!important;text-align:justify;}

    Also, to keep your style sheet smaller so it will load quicker, you can delete my comments (the stuff written /* like this */ in CSS snippets) if you like.

    Oh and edit do you get DW notif emails of new replies like I do, and if so, did you notice what the email formatting is doing to my code? It spaces it out so that the word "margin" is like "ma rgin"....strange. Are you seeing that, too?
    Edited (dw notif email formatting incorrectly) 2012-02-22 02:28 (UTC)
    erinptah: (Default)

    Re: Question about:

    [personal profile] erinptah 2012-02-22 05:06 am (UTC)(link)
    Success on the tags! I do like the username display, so I'm keeping that as-is =)

    And we have pretty indenting. Excellent.

    I'm keeping most of the comments in, for the sake of anyone (self included) who wants to use or modify the code later.

    In my notification email, the random space was in "justify". I just deleted it when copying the code and proceeded as usual ^_^
    marahmarie: (M In M Forever) (Default)

    So it's DW, not our email programs, it seems...

    [personal profile] marahmarie 2012-02-22 08:23 pm (UTC)(link)
    In my notif email, it looks like this:


    .entry-poster{float:right;clear:right;ma rgin-left:.7em;margin-right:.3em;margin-b ottom:.3em;}

    To: .entry .entry-poster{float:right;clear:right;ma rgin-left:.7em;margin-right:.3em;margin-b ottom:.3em;}

    [...]

    .month dl .tag {max-width:420px!important;text-align:ju stify;}

    It's awesome that it's flaking out for both of us on the word "justify", since that means I can screencap the relevant notif emails and submit them to Support to look at as a possible bug. I love bug-hunting, even when they sort of randomly fall in my lap like this one did. Unfortunately, I won't have time to do a Support request until tonight or tomorrow, but thanks for letting me know you're seeing it, too.

    So, are both your layouts basically sorted out now? I'm not sure if you have any other questions, but if you do let me know.
    marahmarie: (M In M Forever) (Default)

    New issue...when #primary is shorter than #secondary, the page only scrolls down as far as #primary

    [personal profile] marahmarie 2012-02-22 08:39 pm (UTC)(link)
    OK, just found that problem on this page: http://punditfic.dreamwidth.org/53735.html

    Change this: #canvas {
    overflow: hidden;
    }

    To:

    #canvas {
    overflow-x: hidden;
    }

    Don't thank me, because I know almost nothing about column flow, as I told [personal profile] facetofcathy up above this thread. It's a trick I picked up years ago from studying style sheets by [livejournal.com profile] grrliz, which I have always kept in mind, because before I saw her do it, I never knew you could set x and y coordinates on columns, and it amazed me.

    But, um, edit, while that seems to restore full navigation/scroll capability to the page, in Web Dev it's giving me a second scroll bar, and I can't even figure out what that scrollbar is attaching to at this point. I'll be offline until late tonight or sometime tomorrow afternoon but if it's also giving you double scrollbars, I'll look again to see what else you might try (setting a min-height like this: html body {min-height: 105em;} also works, but maybe that's not a good idea, either).

    Edited (more info/html cleanup) 2012-02-22 20:50 (UTC)
    erinptah: (Default)

    Re: New issue...when #primary is shorter than #secondary, the page only scrolls down as far as #prim

    [personal profile] erinptah 2012-02-23 12:52 am (UTC)(link)
    Setting a min-height makes the page taller, but #secondary still cuts off where it was cutting off before, leaving blank space under it :/

    I've gone back to not hiding the overflow, so at least it's usable, horizontal scrollbar notwithstanding.
    marahmarie: (M In M Forever) (Default)

    Re: New issue...when #primary is shorter than #secondary, the page only scrolls down as far as #prim

    [personal profile] marahmarie 2012-02-23 04:51 am (UTC)(link)
    I'm sorry, but at what resolution are you seeing a scrollbar on? I'm on 1440 x 900 and I'm not seeing it until I reduce res to 800 x 600, and even then, your layout displays just a tiny bit offscreen (maybe an inch on the right) which is entirely normal for a fixed-width layout (view my own to see; (see update/edit below).

    Edit/update: I'm not seeing a scrollbar at 800 x 600 either, as it turns out; Web Dev gives me a scrollbar at that res, but not once I close it and view your journal normally - then there's no scrollbar at all.

    Here's your fixed width layout while I'm viewing a single post on it at 1440 x 900 res: http://i.imgur.com/PuKLZ.png (and yes, when you expand the imgur image to full size on a 1440 x 900 screen, your browser might give you a scrollbar to view it with, but my browser does not give me one when I view the actual page live at that res - I have no idea why imgur is doing that).

    Setting a mi-width on a main body element of no more than 730-740px will probably kill any horizontal scrollbars (and 730-740px because, despite there being an 800 x 600 res in use, actual viewport space is never more than 740px, if I recall the Internet discussions on this that I've read correctly), but it may re-introduce the other problems you've had with setting min-widths, so I'm not sure where you want to go with that at this point.

    Also, you still have as an unanswered request for making the sidebar and main body match in height - but the sidebar only cuts off for me now on your Archive by month view - not on Archive by year, not on Tags, not on Main, and not on your posts.

    So I'll need to look at your code more to see what's still going wrong, and I'll need you to tell me what res you're getting a scrollbar on, so I can come up with the best answer here.
    Edited (more info/update/edit/clarity - sorry for flooding your inbox, btw) 2012-02-23 05:21 (UTC)
    erinptah: (Default)

    Re: New issue...when #primary is shorter than #secondary, the page only scrolls down as far as #prim

    [personal profile] erinptah 2012-02-23 05:28 am (UTC)(link)
    Huh. Looks like overflow:hidden snuck back into the code.

    With overflow:hidden turned on, the bottom of #secondary gets cut off for me on every page where #primary is too short. That includes the archive page for the year 2012, although not for 2011. It also includes the archive page for any not-too-active month.

    With overflow:hidden deleted (which is how it is now), there is somehow extra space on the right. At any resolution, there's an extra 140px into which the DW navigation strip does not extend, and which compels there to be a horizontal scrollbar.

    The question about making #primary and #secondary match in height is about the fluid version of the layout -- trying to get it to match more closely the look of the fixed version, where the background itself extends to the bottom of the page so the divs don't have to.
    marahmarie: (M In M Forever) (Default)

    Re: New issue...when #primary is shorter than #secondary, the page only scrolls down as far as #prim

    [personal profile] marahmarie 2012-02-23 05:42 am (UTC)(link)
    I was trying to edit again when you replied...when I said, "Setting a mi(n)-width on a main body element of no more than 730-740px" I actually meant max-width...I always get dyslexia writing that out, sorry. Also, With overflow:hidden turned on, the bottom of #secondary gets cut off for me on every page where #primary is too short wasn't happening for me on any page views I checked except for Archive by month, but I have to admit I wasn't exhaustive in my search for that problem, so I might have missed something else (or a bunch of something elses). I'll have to add #canvas{overflow:hidden;} back in and look again, but I'm also out of time so I probably won't have an answer until maybe tomorrow night or later (someone called in sick so I actually have to be back to work soon, and I probably won't get online again until much later).
    Edited (html/typo) 2012-02-23 05:44 (UTC)
    marahmarie: (M In M Forever) (Default)

    Re: New issue...when #primary is shorter than #secondary, the page only scrolls down as far as #prim

    [personal profile] marahmarie 2012-02-23 06:08 am (UTC)(link)
    In the meantime (after taking one last look for tonight) I have to concur with [personal profile] facetofcathy that setting a max-width on body might help by killing that scrollbar you've got on all resolutions now, at least until you find a more flexible answer. You can set a max-width of up to 1285px (I tested it at that width on a 1440 x 900 screen) with no horizontal scrollbars.
    erinptah: (Default)

    Re: New issue...when #primary is shorter than #secondary, the page only scrolls down as far as #prim

    [personal profile] erinptah 2012-02-24 01:21 am (UTC)(link)
    The width of the header image is 1010px, and I'd rather not artificially cut it off.

    Setting a value in max-width seems to kill the horizontal scrollbar as long as the width of the window is less than that value + 140px. Any less than that, and it starts reappearing. (My screen resolution is much wider than that, but I don't keep my browser windows at fullscreen. About 1000px wide is the size that feels natural to me, and the layout reflects that.)
    Flat | Top-Level Comments Only