![[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-18 01:19 pm (UTC)What's actually going on here is that you've put a top: 320 px on #primary to offset it from the absolutely positioned #header. This is mucking up the way the page is drawing elements and none of #primary's parent elements are extending down to enclose it fully. So #tertiary is being drawn part way up the page.
If you must position the header absolutely not relatively, then put that offset and the relative positioning on #content, so #primary can push #content down all the way to enclose it, and #tertiary, the thing your wayward elements are in, will display below #primary.
Will check back later today and see if any more mysteries remain to be solved. I love debugging, it's a sickness.
no subject
Date: 2012-02-18 02:25 pm (UTC).two-columns-right #tertiary,.two-colums.left #tertiary {
clear: both;
}
needs fixing and then #tertiary will pop down to the bottom.
As far as the columns in the fluid go, the method used to fake full length columns, which you can't get for real unless you can set a height on them, is to use the parent element which extends to the bottom of both columns.
This article about column layouts is the most straight-forward explanation of using the border trick that the original Tabula Rasa has to contain floated columns.
The idea is you colour the area under the column, not the column itself (the border or background in #content). Your issue is the use of an image, rather than a colour. You can apply images to borders, but guess which browser doesn't support that?
You might want to consider using the original Tabula Rasa column layout and colouring the #content background or border and applying an opacity to it to make the stars shine through rather than an image. It has greater support in IE than border images. Or perhaps someone else will have a more elegant solution.
no subject
Date: 2012-02-19 01:59 am (UTC)It doesn't look like the floating-over-the-border trick is going to work, since I want that line of dark space between the two light columns. It's not a priority, though, just something that would look nice if it's possible.
no subject
Date: 2012-02-21 09:23 pm (UTC)Yeah...isn't that annoying? I've resorted to setting heights on them only to strip the code out without including it in my layout's final versions because setting a height is always going to make the resulting columns too short for some posts and page views and too tall for others. The only possible workaround is to use lj-cuts to keep posts to an exact height that always works with the resulting column flow, which is a ridiculous way for anyone to keep their layout looking somewhat right, and doesn't address the problem with various page views not matching height correctly at all.
I'm not good at setting column heights anyway, especially given DW's limited capacity for such things (you need to be able to muck around in the HTML to use divs to set the columns up yourself, a feature we're lacking here unless we get into editing existing and/or creating new s2 layers), so this is the one convo here that has gone right over my head, on top of everything else...
no subject
Date: 2012-02-21 09:34 pm (UTC)You just go
#column_one, #column_two {display: table-cell;}Set appropriate widths on them, and bang, you're done.
But, and there's always a but isn't there, IE old doesn't get it. So you have to be able to put a conditional style on it for IE older than 8. And, crucially, some screen readers treat it as if it was a table, delivering the information as if it's tabular data. Which I don't think they should do.
They don't scale down like floated or inline-block columns either, but in some cases, like a fixed-width layout, or on DW where you can switch to one-column via options, that's okay.
Frustrating to have this tool you can't use unless you're making a private layout. But if you are, then, try it.
Always a but (or in IE's case, yeah, a butt)...
Date: 2012-02-21 10:19 pm (UTC)Heh, why would this not surprise me? There's a reason my Quick Launch thingy includes stuff like:
So you have to be able to put a conditional style on it
But if by that you mean a conditional comment, yeah, I'd love to trick IE Old out in just that way with all my layouts, but DW/LJ strips out such possibilities by invalidating your entire style sheet for improper syntax if you include that code. You can't use backslashes, any non-UTF8 chars or any conditional comments. And of course, you can't link off-site to additional or even primary style sheets. Which might sound like a complaint on my part, but is actually one of the reasons I love coding for DW more than any other place (such as my own website or Wordpress, or whatever); you're so limited in what you can do here that you're forced to get really creative to make stuff work at all.
While I would enjoy the added flexibility of Moar Options, there's something to be said for having to work within such narrow confines, too.
And, crucially, some screen readers treat it as if it was a table, delivering the information as if it's tabular data. Which I don't think they should do.
Thanks for mentioning that because I had no idea. Assuming all display: table values have the same effect, that's bad news indeed. I began using display: inline-table after noticing Google uses that to set some elements
on results pages, and I found it comes in handy for coding forms....but...if it's going to hurt accessibility, then I need to find a better way, I guess.
no subject
Date: 2012-02-19 02:25 am (UTC)Also, the layout has decided it now wants to have a horizontal scrollbar. I missed when it showed up :/
Here's the relevant code as it stands:
#header {
position:relative;
top:20;
left:0;
background:#0D1A21 url(http://i142.photobucket.com/albums/r102/sailorptah/layouts/nyc-header-2.png) no-repeat top left;
height:343px;
width:100%;
}
#content {
position: relative;
left:140px;
top:-50px;
}
#primary {
position:relative;
text-align:justify;
width:400px;
}
.two-columns-right #secondary {
position:absolute;
width:200px;
text-align:center;
top: 0px;
left:471px;
font-size:0.85em;
}
.two-columns-right #tertiary { margin-right: -15em; clear: both; }
Any idea what's going on?
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.