CSS Trick?? (not typical 3-Col Kubrick; illustrated)

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter Dgold

    (@dgold)

    Anyone think this was a decent idea, crazy, waste of time, possible or impossible?

    Better yet, anyone want to whip up the magic CSS for me?

    I illustrated it, wondering what you think upon checking out the illustrations. Even if it’s to tell me it’s a bad idea, it represents a layout I want on a particular kind of blog I’m making. The final result is a blend of Flexible and Fixed width, and looks like this
    https://www.boomspeed.com/colbruce/kubrick-flexbar3-for1280-width400.png

    *Bump* cuz this is 3 weeks old and no reply.

    I think this can be done – however, I’m curious as to *why* you’d want it done. If the left-hand sidebar is to be fixed width at 760pixels, then what happens to people who are viewing the site at 800×600 resolution? Your right-hand area will be squashed to unbelievable proportions ??

    But yes, the more I think about it, the mmore I think this could easily be done – it’s just a simple fluid 2-column layout, basically – with a few slight modifications. You’re “sidebar” – which is actually the left-hand side – is just bigger than people usually make it ??

    But I *would* rethink the proportions a bit, just for those viewers who are at a larger screen resolution. hoeever, if accessibility and lower resolutions are not an issue for you at all, then screw it and do what you want ??

    Thread Starter Dgold

    (@dgold)

    thanks for your reply, 2xbee

    I illustrated the solution on 800 px monitors, and I know this is possible because I have seen other sites *complaining* that their sidebar drops below the content. In this case I *want* the flexbar to drop below the main content when the browser-window is too skinny to fit it on the right. See this example:
    https://www.boomspeed.com/colbruce/kubrick-flexbar5-for800x600-400.png

    In fact, please just check out the 5 illustrations in the 1st post, it goes thru the scenarios of different resolutions!

    Also: I know this idea might look crazy (especially to those who dislike Kubrick), but I have a reason I want to do this. If you see the type of text-content I want to put in the flexbar, it will make more sense…

    Unfortunately I wouldn’t know where to start on coding the CSS, but if someone could show me how or do it for me I would return the favor in some way.

    Well, I’m not sure what the “Kubrick” theme CSS is (I have it, of course, but I don’t use it), But since it’s already made up, I’d start by pushing the “Kubrick” part to the left… find the outer wrapping div and change “margin:0 auto;” to “margin:10px;” – that’ll put your 10 pixels all the way around it.

    You’ll have to edit your index file and add in a secondary div…like so:

    <body>
    Kubrick layout stuff here
    </div> <!– closing outer wrapper of Kubrick stuff –>

    <div id=”right”>
    right expandable content here
    </div>
    </body>

    and you’ll have to add stuff to the CSS – something like this:

    #right {
    float:left;
    width:auto;
    }

    This *should* make the new div expand – but it may not. You’d have to do some playing with that to see if it does. But if the stuff inside the right container makes the div drop, it’ll drop right below the current Kubrick theme layout.

    Hope that gets you started.

    Thread Starter Dgold

    (@dgold)

    I followed your first instruction perfectly, and got Kubrick scooted to the Left instead of centered, no problem.

    Then I put this in my CSS:
    #flexbar {
    float:left;
    width:auto;
    }

    (And I’ve tried it with both float:left and float:right)

    Here’s the piece of code I’m trying to put into my Theme…
    <div id="flexbar">
    <h3>right expandable content here</h3>
    </div>

    Where should it go? I tried everywhere… in Header.php, before and after the various div’s…. in Main Template… and in Footer.php. The sample/test-text appeared in various places, on top of my existing Kubrick layout, or below it… but never at the same height position & just off to the right. This is on a 1280×1024 monitor, with plenty of room for it to be to the right.

    Do you have a link to the site as you’re working on it?

    Thread Starter Dgold

    (@dgold)

    Yes but I don’t really want to show the link in public on here, so I am going to send it do dooblebee on your Contact page, ok? If you can take a look, many thanks!

    EDIT: I have sent the message on your Contact form.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘CSS Trick?? (not typical 3-Col Kubrick; illustrated)’ is closed to new replies.

Tags