WordPress.org

1. Andrea_r
   team pirate
   Posted 7 years ago #

   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.

   http://www.raasmsoftware.com/wp/index.php?wptheme=Tulip
   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
   Member
   Posted 7 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
   Member
   Posted 7 years ago #

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

4. lawtai
   Member
   Posted 7 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. Andrea_r
   team pirate
   Posted 7 years ago #

   That's what I thought. :)

6. Root
   Member
   Posted 7 years ago #

   No it cant.

7. lawtai
   Member
   Posted 7 years ago #

   well, why don't you offer some help instead

8. Root
   Member
   Posted 7 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. Andrea_r
   team pirate
   Posted 7 years ago #

   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
    Member
    Posted 7 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

    http://wordpress.org/support/topic.php?id=25999#post-147535

    DIV order matters

11. Root
    Member
    Posted 7 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
    Member
    Posted 7 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."

    http://cafe789.com/kyles_eyes

13. Andrea_r
    team pirate
    Posted 7 years ago #

    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
    Member
    Posted 7 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. Andrea_r
    team pirate
    Posted 7 years ago #

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

16. lawtai
    Member
    Posted 7 years ago #

    heh just posted a suggestion

17. Andrea_r
    team pirate
    Posted 7 years ago #

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

18. lawtai
    Member
    Posted 7 years ago #

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

19. Andrea_r
    team pirate
    Posted 7 years ago #

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

20. Root
    Member
    Posted 7 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
    Member
    Posted 7 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
    Member
    Posted 7 years ago #

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

23. Andrea_r
    team pirate
    Posted 7 years ago #

    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
    Member
    Posted 7 years ago #

    I do not see a div class for your footer?

25. Andrea_r
    team pirate
    Posted 7 years ago #

    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.