moving the sidebar
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.)
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.
And in the new paradigm that will involve adding xhtml markup to two different files.
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.
That’s what I thought. 🙂
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.
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.
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
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.
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.”
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.
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
Well, shoot. Stupid IE. I’ll fix it in the morning. Thanks! 😀
(I hate firing up IE for any reason.)
- The topic ‘moving the sidebar’ is closed to new replies.