WordPress.org

Ready to get started?Download WordPress

Forums

Not 3 column friendly (or I am really stupid!_ (31 posts)

  1. Tek
    Member
    Posted 10 years ago #

    Okay, if you like, take a gander at
    http://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! =)

  2. NuclearMoose
    Member
    Posted 10 years ago #

    Tek,
    First of all, you are not stupid. :) Secondly, one, two, or three-column designs are all available to WP users. In fact, you could do any number of columns. This is a design issue, and not a WP issue. However, once you have your structure, you need to move your site contents around to suit your design.
    WordPress pages are dynamically-built on demand. For this reason, you will have to do some exploring and testing and reading and dissecting to learn about the guts of WP. It may seem a daunting task at first, but a person picks it up quickly.
    Have a peek at the WordPress Wiki for some excellent information on many topics that will help you.
    The future holds many more exciting things for WordPress that will add more functionality and make it easier to use. Don't forget to search the forums, search the Wiki, visit the IRC channel, and post questions here. There are lots of talented people who are willing and able to help you out!
    Don't forget to have fun!
    Craig.

  3. Tek
    Member
    Posted 10 years ago #

    OO my post got eaten!
    I wanted to say that yea, I have looked at the Wiki quite a bit over the past few days. I;ve not been in the IRC channel.
    One question however... I know that if I made some changes to the index.php, I might be able to get some things to look how I want them to... yet I have been reading that I should NOT make changes to index.php. Is this true?
    Thanks for your help!

  4. Jaykul
    Member
    Posted 10 years ago #

    No. It's not true.
    HACK THAT index.php TO PIECES and make it your own. It's your website.

  5. aletheia
    Member
    Posted 10 years ago #

    Hi,
    well I was just about to post with the same subject.
    I am actually changing the index to suit my needs. Trying to design a
    3-colum layout, and I'm really going nuts trying to find why the menu column is wider than what I want, which is 125 px.
    At first I thought it was the calendar, I checked and it was at 140 px so I changed that but to no effect.
    Now I don't have widths, paddings or margins that are counting, I'm sure. Both left and right colums are at 125 px and my content is at 520 with a padding of 10 px (using the i.e hack to count for that padding)
    So the only thing I can think of is that there is some style going on in wp, and I now something which really bothers me is the list configuration of links and categories, and I'm wondering if it could something to do with that.
    In any case, has anyone achieved a 3-column layout with no problems? would be helpful to know...

  6. Root
    Member
    Posted 10 years ago #

    Well aletheia you have got your menu styled with a float left and a width of 165px; I don't know if that has anything to do with it ;). Nice looking blog.

  7. Tek
    Member
    Posted 10 years ago #

    Nice, aletheia. =) Very soothing.
    I think that is the same problem I am having. " list configuration of links and categories"... The rest I can piece together... As I said, I was looking at Alex King's "dots" and I can't make heads or tails... Then again I know that in my MT index.php file, I have a <div> that is something like "lmenu" and "menu". It works fine for when I use the style switcher for a two coloum layout because in the CSS for the two colum, there is no var for "lmenu" so I am able to use my index.php for every style.

  8. solarpunk
    Member
    Posted 10 years ago #

    check alexking three column layout http://www.alexking.org/index.php?content=software/wordpress/styles.php . i think it is call dot.

  9. aletheia
    Member
    Posted 10 years ago #

    root: thanks, but it's not my personal blog which I'm styling. Working on a different project...
    solarpunk: I'm going to check out dot.css thanks

  10. aletheia
    Member
    Posted 10 years ago #

    I just realized that I don't have to consider #menu for layout but #menu ul, I set the width there and float:left and it worked alright.
    I had to make another change. I moved the whole menu dive so it is before the content and then I have the right div after the content.
    I can then use the float:left for all 3-columns method instead of using absolute positioning.

  11. Tek
    Member
    Posted 10 years ago #

    Thanks tunis... I hope I can get it to work too.
    I have one plugin that I am waiting for the person to get back to me on to tell me why its kinda working and then I need to get the design the way I want it then I will move over from MT.

  12. Root
    Member
    Posted 10 years ago #

    Well I like to think I kind of contributed to the thought process even though I was looking at the wrong site. ;) I think as a matter of semantics and your search engine friendliness it might help if your content came before your floated divs.
    Incidentally have you tried
    thenoodle incident
    . HTH. Its a fine looking blog.

  13. davidchait
    Member
    Posted 10 years ago #

    Read up on css box rules. It's a PAIN, but needed if you want to do anything more than fixed-width designs. If I had to do it all again, I might stick with fixed-width. But if you want to see a three-column layout I've been working on for nearly 6 months now, go to:
    CHAITGEAR
    Everything is doable, you just need to massage the index.php and wp-layout.css to meet your needs. BOTH FILES ARE EXAMPLES. And to 'make your own', as someone else noted.
    -d

  14. solarpunk
    Member
    Posted 10 years ago #

    check this site that document wordpress css, it is good read http://www.tamba2.org.uk/graphicalcss/. aletheia your xhtml doesnt valid it 8), perdona.
    Thanks,
    Solarpunk

  15. Tek
    Member
    Posted 10 years ago #

    The Noodle Incident is a WONDERFUL site!
    Actually, my head is slowly coming up with a way I think I can get this to do what I want. If not, then I guess it will be time for a two column design. :-(

  16. Tek
    Member
    Posted 10 years ago #

    Jxn,
    Thanks! I think that will be very helpful.
    Sprischst du deutsch? Ich kann deutch verstehen. Mein deutsch ist nicht sehr gut aber ich kann verstehen. :)
    But better I think I stick to English!

  17. Anonymous
    Unregistered
    Posted 10 years ago #

    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.

  18. jxn
    Member
    Posted 10 years ago #

    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.

  19. tunis
    Member
    Posted 10 years ago #

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

  20. solarpunk
    Member
    Posted 10 years ago #

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

  21. Anonymous
    Unregistered
    Posted 10 years ago #

    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("http://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.

  22. Anonymous
    Unregistered
    Posted 10 years ago #

    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.

  23. Tek
    Member
    Posted 10 years ago #

    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.

  24. Root
    Member
    Posted 10 years ago #

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

  25. Tek
    Member
    Posted 10 years ago #

    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

  26. Root
    Member
    Posted 10 years ago #

    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.

  27. owleye
    Member
    Posted 10 years ago #

    One thing about floats is if you look at my css:
    http://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.

  28. Tek
    Member
    Posted 10 years ago #

    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:
    http://www.wpdfd.com/editorial/basics/cssbasics7.html

  29. Root
    Member
    Posted 10 years ago #

    @ 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?

  30. Root
    Member
    Posted 10 years ago #

    Ahem. Thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.