moving the sidebar (25 posts)

  1. I'm working on a new theme (aren't we all?) and I've succeded in doing 99% of the work in the "classic" stylesheet. I've managed to move the sidebar from the right to the left, but it's too far down. It lines up under the content.

    This is over at my testing blog, not my regular one.

    I really really want to fix it in the stylesheet rather than mess with the index. Can anyone point me somewhere? I've tried all kinds of positioning to no avail.
    (But I think I'm gonna have to fiddle with the templates.)

  2. lawtai
    Posted 11 years ago #

    from first glance, it seems like your sidebar is located inside your footer. I don't think you can fix this unless you go into your code, and rearrange where the sidebar is located.

  3. Root
    Posted 11 years ago #

    And in the new paradigm that will involve adding xhtml markup to two different files.

  4. lawtai
    Posted 11 years ago #

    actually, i don't think she'd need to change the xhtml in 2 files. I'm not currently on my own computer, so I can't check the classic theme, but I think she should be able to do what she's attempting by just changing the xhtml in the index.php file.

  5. That's what I thought. :)

  6. Root
    Posted 11 years ago #

    No it cant.

  7. lawtai
    Posted 11 years ago #

    well, why don't you offer some help instead

  8. Root
    Posted 11 years ago #

    The difficulty with answering this type of question - and I have answered one or two in my time - is trying to compress a core understanding of CSS positioning into a few short sentences. This case clearly requires editing of the xhtml as well. Due the split file structure from which we are all benefiting - it has IMHO raised the bar for self development. I think the best thing to do is find a theme that is solid, and has the cross platform stabilty you need. Colors, fonts, images are all relatively simple compared to setting up the positioning or layout. This may not seem helpful - but it is meant to be.

  9. I'm glad you added that last bit. :)

    I partly asked to see if it was a problem someone else has dealt with already, even after I searched the forums. Why reinvent the wheel? There have been similar questions, but no real answer.

    I'm starting with a theme that I assume *is* solid - the classic one in 1.5. The only mod I made to any php files was to include the theme switcher. That's it.

    I've been learning CSS for more than 4 years now in my spare time. I realize the positioning is the hardest part. That's why I asked a question - after trying a myriad of things all afternoon. Even eventually move the sidebar around in the code.

    Sometimes what might be crystal-clear to one person is still foggy to another. :) I've done this exact same layout in another blogging tool, but decided to start from the WP files to make it easier on myself and possible future users. I'll be sure and post the solution when I find it.

  10. dawg
    Posted 11 years ago #

    At the possibility of being wrong here, it seems to be the dilemna I had a week ago, Ming suggestested that I put the sidebar before the content. I changed this in my template and all was well.

    See this thread for a more detailed answer


    DIV order matters

  11. Root
    Posted 11 years ago #

    Well at the risk of being indelicate the classic theme throws up this type of issue because it is coded in a really neat and minmalist way, but it can be tricky for people to upgrade because it tips them straight into the issues of positioning.
    The overwhelming majority of WP users first time out want two columns, header and footer, with page centred. That is surprisingly difficult to implement effectively in a way that is guaranteed to work across platform. And the really awkward fact is that for effective positioning a degree of editing in what was the index file is needed. I am working on some solutions for this which I hope to release shortly. Good luck anyway and welcome to WP.

  12. dawg
    Posted 11 years ago #

    The overwhelming majority of WP users first time out want two columns, header and footer, with page centred. That is surprisingly difficult to implement effectively in a way that is guaranteed to work across platform Quote Root

    I tend to disagree, it is actually quite easy. I too had trouble floating the sidebar but had it positioned absolute in the beginning which worked well but I wanted to float it. Here is my example that is based on classic that conforms to "want two columns, header and footer, with page centred."


  13. Dawg, I remember your problem. :) Mine was originally set up that way, sidebar on the right, but when I moved it to the right I couldn't get it where I wanted it.
    I'm sure somebody will tell me there's another way to do it, but I positioned the content absolutely, and *bang* right where I wanted it. One line fix.
    I know I read another thread here about the horrors of absolute positioning, but it worked.
    Some minor clean-ups and then it'll be ready.

    The only template changes I made were to remove the sidebar include out of the footer file, and moved a couple of closing div tags to be in the same file where they started.
    Example: in the main index, it called the footer and right away in the footer was a closing div, so I moved it to the index. It didn't affect formatting because I moved it, saved, then checked.
    Everything is in the same order as the original classic template.

  14. lawtai
    Posted 11 years ago #

    looks good in FF, but in IE, your footer is ontop of your content, instead of below it. from looking at your code, i'd suggest creating another <div> for just your footer, as your footer is only contained with the < p> and not inside anything else. So maybe something like:

    < div id="footer"> and end it after your footer info

  15. Well, shoot. Stupid IE. I'll fix it in the morning. Thanks! :D
    (I hate firing up IE for any reason.)

  16. lawtai
    Posted 11 years ago #

    heh just posted a suggestion

  17. Hee! Hmmm... I thought there was a footer div.. maybe not. *scratches head*

  18. lawtai
    Posted 11 years ago #

    not that I saw after collapsing down the divs on your site. The credit was just sitting there.

  19. Yep, there's no footer div, just one for credits. Huh. Gives me something to do in the morning. :D

  20. Root
    Posted 11 years ago #

    dawg - when I say surprisingly difficult - I meant to do it properly. Hacking about in the source order badly disturbs accessibility.

  21. dawg
    Posted 11 years ago #

    The only thing with absolute is people with larger monitors, it is safe for 800x600 and 1024x768 but above that absolute will cause you some problems, that is why I wanted to float it.

  22. Root
    Posted 11 years ago #

    And andrea your blog has the menu over running the footer but it isnt noticeable until you see comments.

  23. Well it sorta kinda works now, but I have to stop before my eyes really bleed. (and the kids need lunch)
    IE wasn't noticing the top margin I set for the menu, and the footer was "stuck" to the bottom of the menu itself.

    My temporary solution was to enclose the content & menu in a container, with the footer (credit in the CSS) outside of that. Only problem is, it works so long as the container has a border. *scratches head* Take out the line for the border, or set border:0px; and it breaks.

    (Sometimes I stick borders in to see where I am, then take them out later. I've also got the FF css edit extension, which will outline elements for me, but sometimes it's too tiny or overlapping.)
    And I'm partly documenting this here to hopefully help someone else in the future.

    But if you know why the border issue breaks, I'm all ears.

  24. dawg
    Posted 11 years ago #

    I do not see a div class for your footer?

  25. The div clss for the footer was called "credit" instead.
    But I had an epiphany after I walked away from the computer and realized I didn't actually *want* a footer. I was just struggling with it because it was in the original theme I had been working from. DOH!
    (Really, I am not this dense all the time.)

    So now it looks like I want. Except IE won't bump the sidebar down past the main tulip part. Other than that, it's almost done.
    (Lunch, however, is another matter.)

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.