![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
erinptah posting in ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png){kind=small}
style_systemI'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 atpunditfic:
And here's the fluid version, visible in action atandthatstheword:
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!
Here's the current state of the fixed-width layout, currently enabled at
punditfic:And here's the fluid version, visible in action at
andthatstheword:Issues in the fixed-width layout:
Things in the fluid layout that I can't get to match the fixed-width layout:
Other issues with the fluid layout:
Anyone who can point me in the right direction on any of these points would be greatly appreciated!
no subject
Date: 2012-02-20 02:48 am (UTC)Now, when people do fixed width layouts is there any reason not to just set a width of 1080px or whatever on body or canvas? It kills the scrollbar and helps with an idea I had that deals with the #secondary is longer than #primary sometimes issue.
Just float your columns left and put the right margin-left settings on them to position them. #tertiary will always be below both columns, and you can set the margins on the powered by et al modules to put them where you want them.
If you have a width set on #canvas, you won't get the #secondary column popping below on narrower page widths. It gets cut off on the right, but that's a feature of fixed-width, not a bug right?
no subject
Date: 2012-02-20 05:22 am (UTC)Making the #canvas width 1080px kills the scrollbar if the browser is wide enough, but automatically adds one if the browser is any narrower than the full width. And now that I have it set that way, floating #secondary left doesn't seem to change anything. Also floating #primary left makes #secondary vanish into the either :/
It gets cut off on the right, but that's a feature of fixed-width, not a bug right?
Right. Having it move would make it leave its place on the background image.
no subject
Date: 2012-02-20 02:12 pm (UTC)Check your overflow hidden effect on the archive page where #secondary is longer--is #secondary cut off? Setting body to the width of the background image and not using overflow: hidden would give you a horizontal scroll bar only if the user is on a screen smaller than the fixed width, which is what you want, yes? Sorry, I'm particularly slow on the uptake with fixed width.
But, backing up the truck, here--what are you trying to accomplish, and how much customization do you want to allow?
If you want the modules currently in #tertiary to look like they are in #secondary, why not just put them there?
Turn off the second module section in the set properties part of your layer and then you never have to worry about what happens when the absolutely positioned thing is the longest thing on the page, because nothing needs to be drawn below it. Then the user can just rearrange modules in the one section however they like.
If you want the user to be able to customize the modules and put things in the second module group, then you've got to change the current layout technique so that #tertiary will draw below both columns.
The property is set in Tabula Rasa as:
# explicitly define what sections the layout has available
set module_layout_sections = "none|(none)|one|Main Module Section|two|Second Module Section";
I'm fairly sure you just chop off the last two sections of that declaration string, and you have one module section only on the customize page. Even if your layout is in a theme layer, you can set properties in it and override the parent layer.
no subject
Date: 2012-02-21 01:50 am (UTC)I went back to the main layout arrangement that worked, removed the custom formatting on the modules in question, stuck them in #secondary, and made a note of it all in the markup. Anyone who likes the layout but wants a #tertiary section will just have to work out the code on their own.