![[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.
Some answers...
Date: 2012-02-20 04:43 am (UTC).entry-poster{float:right;clear:right;margin-left:.7em;margin-right:.3em;margin-bottom:.3em;}/*--- sets username position*/.userpic a {border:0;}/* makes more room by removing possibly unwanted user icon border-bottom */
Things in the fluid layout...the bulleted list on the tags page isn't indented.
That's because you have an unclosed, empty statement for the tags container in your CSS:
.tags-container ul {Change that to
.tags-container ul {}Or just get rid of that line since you're not using it.
Use this for multi-level indents:
.tags-container .tags_multilevel li li {margin-left:30px!important;}/* specifying ".tags-container .tags_multilevel" ensures sidebar tags won't be affected by this code */I'm posting this without looking through all your CSS for possible adjustments because I have to shut down for the night very soon (but I may or may not post more replies before doing so), but I'll keep coming back to post whatever answers I can rustle up.
Re: Some answers...
Date: 2012-02-20 05:26 am (UTC)The tag indenting worked, thanks!
Re: Some answers...
Date: 2012-02-20 05:39 am (UTC)As to the username moving -- it looks great on the main view, and once I specified a width of 100px so the "username posting in community" text wouldn't stretch out too far, it looks great in the entry views as well. Much appreciated =)
Some more answers...
Date: 2012-02-20 09:03 pm (UTC)For title overlapping with date/time, try this:
div.entry {line-height:1.6; }/* unsquishes text within entry containers */h3.entry-title {margin-bottom: 1em!important; }/* you can also remove all padding from ".entry-title a" in your existing CSS to stop too-low border-bottom and too much left-indent on entry title from occurring */
For tags overlapping with entry tools, try this:
.tag ul {display: inline-block;margin-bottom:1em;/* current "inline" setting on this element makes setting white space around it impossible */}
Re: Some more answers...
Date: 2012-02-21 01:05 am (UTC)Question about:
Date: 2012-02-20 09:25 pm (UTC)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...
Re: Question about:
Date: 2012-02-21 01:08 am (UTC)All your help is appreciated, no matter how fast it comes ^_^
Re: Question about:
Date: 2012-02-21 09:05 pm (UTC)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. :)
Re: Question about:
Date: 2012-02-22 01:12 am (UTC)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 ^_^;
Re: Question about:
Date: 2012-02-22 02:14 am (UTC)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?
Re: Question about:
Date: 2012-02-22 05:06 am (UTC)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 ^_^
So it's DW, not our email programs, it seems...
Date: 2012-02-22 08:23 pm (UTC).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.
New issue...when #primary is shorter than #secondary, the page only scrolls down as far as #primary
Date: 2012-02-22 08:39 pm (UTC)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
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).Re: New issue...when #primary is shorter than #secondary, the page only scrolls down as far as #prim
Date: 2012-02-23 12:52 am (UTC)I've gone back to not hiding the overflow, so at least it's usable, horizontal scrollbar notwithstanding.
Re: New issue...when #primary is shorter than #secondary, the page only scrolls down as far as #prim
Date: 2012-02-23 04:51 am (UTC)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.
Re: New issue...when #primary is shorter than #secondary, the page only scrolls down as far as #prim
Date: 2012-02-23 05:28 am (UTC)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.
Re: New issue...when #primary is shorter than #secondary, the page only scrolls down as far as #prim
Date: 2012-02-23 05:42 am (UTC)#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).Re: New issue...when #primary is shorter than #secondary, the page only scrolls down as far as #prim
Date: 2012-02-23 06:08 am (UTC)Re: New issue...when #primary is shorter than #secondary, the page only scrolls down as far as #prim
Date: 2012-02-24 01:21 am (UTC)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.)