• Okay, if you like, take a gander at
    https://www.tekwh0re.net Don’t worry, it isn’t porn.
    I am migrating from MT and I really like the three col layout as that it saves on tons of scrolling. I have some elements which I don’t think I can pull with CSS (like my webcam and links that are not blogrolled) I have looked at Alex’s dots layout but I just cannot see how I would add not WP stuff.
    I admit, CSS is not something I am super great with. I am better at that than programing (I can’t do that at all). I am good at following examples and reading instructions. Am I doomed to not have as much flexibility? =(
    Thanks! =)

Viewing 15 replies - 16 through 30 (of 30 total)
  • I wish the WordPress base template were constructed with DIVs for three colums and for that matter DIVs for the header and footer. IMO, the way the header and footer are set now is not all that intuitive.

    You’re welcome Tek,
    and yes: ich spreche auch Deutsch.
    soshite ichiou nihongo mo ^^
    but for the sake of keeping things accessible to most people, I think we should stick to discussing stuff in english.

    Hey jxn, thanks for the advice above. Helped me greatly!!!!!

    i being working on my blog to make into 3 column.
    you can view it at https://www.fusionrain.com/blog

    The easiest way is using divs. You can find examples on my site, UrbanMonastery, here (index code) and here (css).
    In the index.php file, you need a new DIV for the 2nd sidebar (I’m using the default #menu for the first sidebar). I called it “left” (that is, <div id="left">) because it’s the left sidebar on my site. Here is the stylesheet code that accomplishes my layout:
    #container {
    line-height: 140%;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
    padding: 0px;
    width: 750px;
    background-color: #FFFFFF;
    }
    #content {
    line-height: 140%;
    text-align: left;
    padding: 0px;
    background-color: #FFFFFF;
    margin-left:230px;
    margin-right:180px;
    }
    #header {
    font-family:verdana, arial, sans-serif;
    color:#FFF;
    font-weight:normal;
    background-image: url("https://www.urbanmonastery.com/urmobanner.jpg");
    background-repeat: no-repeat;
    background-position: bottom left;
    padding:0px;
    letter-spacing: .2em;
    height:200px;
    }
    #header a {
    color: #fff;
    text-decoration: none;
    }
    #left {
    float:left;
    width: 200px;
    padding-right:30px;
    background-color: #ffffff;
    overflow:hidden;
    }
    #menu {
    /* Right-side */
    float: right;
    padding-left:30px;
    width: 150px;
    background-color: #ffffff;
    overflow:hidden;
    font-size: x-small;
    }

    Hope this is useful. Feel free to copy and tweak, no credit necessary.

    BTW, I would strongly recommend against using absolute positioning and z-indexes for your main page layout. The Z-index is best limited to minor usages such as positioning a floating image near the top of your page.
    I would also recommend nesting rather than sequencing things that go in the same column. For example, if you want #webcam and #calendar in the same column, don’t specify the same positioning CSS for them; just enclose them in a column container, like #left, and don’t specify any layout info in the #webcam and #calendar divs. This will prevent them from appearing in the wrong place. Some browsers will not put sequential, similarly-defined divs in the right place. You may end up with four or five columns if you do this, or some of the sections will appear beneath the wrong column.

    Thread Starter Tek

    (@tek)

    Thanks for the tips. That is what I would rather do- place the info in the <div>s on index.php as oppsed to doing it in the css. That is how I do it now wiht MT. I was reading someone said that you cant to that because it doesn’t allow the archives room to grow but I have never had a problem with it. I can add as many boxes with different content as I like and nothing overlaps. I can see if you are specifying position for specifc elements such as #webcam you can run into some problems if you decide to add things which are not coming from WP such as a webcam or banner links, radio.blog, etc…
    Still havent gotten this yet. I have been messing with the index.php but its just not positioning like itshould. I either just get two columns or overlap. Oh well… perhaps I get it right sometime this year.

    We should be using the index to set up our boxes for positioning. The actual positioning is then styled in the css.

    Thread Starter Tek

    (@tek)

    I agree… (and am getting desperate)
    If you go to my live site and look at the html, you can see what was done. I find the

    Well it now seems fine from here in FF at least. I read some of your blog about validation. I like to think of it as a really useful dev tool.I use it as I go along. It is not some terrible hurdle. As a diagnostic tool it is invaluable. HTH.

    One thing about floats is if you look at my css:
    https://www.owleyedesigns.com/projects/pardonmy/wp-layout.css
    The total pixels of the fixed width of the container must equal not only the total of all the widths of the 3 columns but the margins to. These are pixels outside and must be added. IE 6 has a bug that requires you to make the container i believe a bit bigger than the total you come up with.
    I think you should make it 20-50 pixels bigger than the total to make IE 6 happy.
    You will see what i mean by looking at that css.

    Thread Starter Tek

    (@tek)

    Thanks for the tips Owleye. I sorted that there is that annoying IE bug. I was able to sorta figure out how to get three colums on my WP install. One of the layouts works in IE and ‘zillas (though it does look a tad better in the ‘zillas), the other looks perfect in the ‘zillias but in IE looks like frankenstein’s monster (which cracks me up as that I usually have the opposite problem).
    Here is a link to some of the IE quicks with boxes:
    https://www.wpdfd.com/editorial/basics/cssbasics7.html

    @ owleye. I understand you are a commercial designer. You are also offering your template to other people here. In those circumstances a great deal of precision and clarity is required about how the IE bug affects the width of containers in general and the complications when floating. A suggestion to add 20 / 50 pixels is not really going to cut it is it?

    Ahem. Thanks.

    Forgive me but your ahem tables have got 14 validation errors.

Viewing 15 replies - 16 through 30 (of 30 total)
  • The topic ‘Not 3 column friendly (or I am really stupid!_’ is closed to new replies.