Hacking Away: 3 Column CSS Mess

  • Questions. Problems. Help?
    Try not to laugh at how mangled my site is at the moment. This is a work in progress. I’ve been trying to learn a lot on my own, but there’s only so many hours in a day.
    The left column displays posts in the “normal” manner. I’ve hacked up index.php to give me the latest excerpts from one category in the center column. The third column is for everything else.
    Current burning question: When clicking the links to posts, they appear in the left column. This is silly when I click on a post from the center column and it appears to the left of it. I’d like, instead, for the full posts to appear in a new layout, likely a two column design (basically, the site without the center column). I have no idea how to do this.
    I’ve been searching for a post that showed only the “comments” page when you clicked on the post link. That might help me, even though I’m going to be using forums instead of comments, I could use the comment CSS styles for this cleaner design.
    I know this site has a LONG way to go. I’ve gone about making 3 columns all wrong. I’ve given Dots and Trident a shot, but neither worked for me. My dream of liquid columns is probably foolhardy. My footer is out of whack, the columns bleed into one another and extend beyond their divs, and the #rap doesn’t talk to me anymore. Probably best not to even mention yet the differences in IE vs. Firefox displays.
    I tried. Um, anybody up for some hand-holding?

Viewing 15 replies - 1 through 15 (of 46 total)

  • https://www.atthe404.com/trident/
    I’m sure Root will be along soon too ??

    liquid cols in a 3 col format is difficult and most don’t recommend it.
    Depending on what template you started with when doing this, cols as defined in the index 1, 2, 3 don’t always show in that same order. For instance, I have the Trident 3 col on my site… the cols as you see them (we’ll call lthem A, B. C, where A & C are the left & right columns and B is the middle content) appear in index.php as B, A, C. I suspect this is where you may have gotten the left col mixed with your center col – it would explain why your individual posts are appearing to the left instead of the middle where you want it.
    Looking at the source, you div tags seem to be all out of whack… the leftrotate and rightsidecontent tags are comming out empty. This may be another symptom of the mis-matched cols.
    I highly recommend you grab Root’s Trident Template and get the center col working like you want it to first….. then worry about getting the left col populated with other data. Take it in short-simple steps, and don’t try to do too much all at once.
    TG

    Thread Starter paticoflange

    (@paticoflange)

    Hey TechGnome. I started this CSS template from scratch. At first it was to make up my header, which I wanted more dynamic. But, yeah, this is all a mess from a CSS/PHP newbie.
    When I click on the post titles, I don’t want them to populate in the left or the center column — rather in a new layout that is either one or two column.
    The center column is going to be for “featured” posts (this is going to be a video download site…eventually), and I only want the featured posts (and, hence, the 3-column layout) to show up on the main page and pages that display multiple posts / categories.
    Summing up: Whenever viewing a single, full post, I don’t want it to populate in this 3 column design.

    Well, the way I might have tried to do such a thing is to add differently-named wrapper-divs around index.php, depending on whether you should be in 3-col or 2-col mode, so that you have corresponding class/type/name in CSS to use for styling.
    In addition, you’d then ‘keep’ the posts loop, but only show one sidebar column, when you leave the ‘front page’ design — using PHP conditionals to show completely different sidebars.
    I do something similar for my ‘View for Printing’ option when reading a post. I wrap the entire thing with an extra div, and then use PHP to ‘drop’ the sidebars completely from output.
    -d
    CHAITGEAR

    Thread Starter paticoflange

    (@paticoflange)

    David, this sounds promising, thanks.
    Erm…any tips on how I could get started? I get making two different CSS layouts, but I’m don’t know how to “add differently-named wrapper-divs around index.php” — nor do I have any clue what kind of PHP conditionals to include to choose those divs.
    I’m really going to have to learn PHP, aren’t I? *sigh*

    Well there seem to be one or two minor css positioning issues in progress on the blog in question. Now lets have a look.

    As a starter for ten points – it is traditional to declare the body in the index before the header and the other divs open. Just my 2c.

    Thread Starter paticoflange

    (@paticoflange)

    Thanks Root. I know it’s all ass backwards, but for a minute (many, many hours ago), it actually looked almost kind of OK.
    I’m editing Trident right now (for the tenth time), trying to get the widths to about where they’re at in my mock-up. I’m just going to have to give up the ghost of percentage/liquid widths.

    Well I have got a pretty good grasp of what seems to be going on. Major surgery is necessary in both the index and css. You may either keep hacking, learn how to do 3 col css positioning or use a template. IMHO it is not possible to adjust from the present position. I am sorry to be the bearer of bad news, and to put it so plainly but it would be unfair to you to suggest a step by step approach on this forum is going to work.

    Thread Starter paticoflange

    (@paticoflange)

    That’s okay, thanks Root. It’s unfortunate that CSS doesn’t really do what it needs to do. The web still doesn’t have its Quark XPress for WISIWIG, nor does it have any cross-browser, beautiful code as of yet. I’m learning, and hacking away and making mistakes is part of the path.
    I’ll likely use a template and edit it to my needs. I feel confident I’ll get there. As for the PHP aspect of my problems…getting posts to go where I want them to…I’ll still need help with that.
    And I’ll be more likely to get that help when I have a layout that is at least somewhat manageable ;).

    Well it might be helpful if you separate out in your own mind the three different layers. The first layer is the question of the layout into 3 column boxes. The second layer is to add the relevant php you need to each col. Then finally I would consider the onclick behaviour. I would not want to get those three things confused. HTH.

    Thread Starter paticoflange

    (@paticoflange)

    I do have those things separated, but am working on them at the same time…heh, to give me something to do when I’ve hit a brick wall with one or the other of them. Of course, finally, I hit a brick wall with ALL of them, and that’s when I posted here.
    Time to make new walls. ??

    Just maybe finishing up this thread – both Gemini and Trident are properly source ordered. In either case the mark up and CSS would be simpler (read a piece of cake) if we did not want the content to come first in the index – which we do.

    Possibly OT but how do you make liquid 3-col layouts all of equal length using CSS? It’s easy if you use a table, but if you do that all the standards nuts jump on you… *sigh*

    Easy. Col 1 ; float left with a width of say 25%; Col 2 float right with a width of 25%; Col 3 (content) will fill the middle. Set left and right margins at 25%. Set height at xxpx whereever needed. Close container. Insert footer. Simple. It will flex right out to the thirty inches or so that some folks have on their monitors. Nice?

Viewing 15 replies - 1 through 15 (of 46 total)
  • The topic ‘Hacking Away: 3 Column CSS Mess’ is closed to new replies.