View previous topic :: View next topic |
Author |
Message |
dissidentvox
Joined: 18 Apr 2005 Posts: 31 Location: North of England
|
Posted: Thu Feb 01, 2007 4:31 am Post subject: Help it's the column monster! |
|
|
Hi John
I've been playing around here and am pretty happy with the way its going.
However, when I endeavored to change http://citizenscoop.co.uk to resemble the layout of the other site a little more closely (I also changed the banner) my troubles really started!
I cannot seem to get the right column on the scoop site to sit properly. Something is dragging it out farther than I wish it to go and I can't find what it is. I'd like to readjust them both to attain some visual balance.
Basically I want to reproduce the scale of the layour that I have on the other blog (in terms of the border sizes and general widths whilst maintaining the colors and mods I've already made. I also want the banner to sit centrally. Please can you take a look and tell me what you think.
I've probably changed something whilst playing around but I dont know what! _________________ http://dissidentvox.com
http://citizenscoop.co.uk |
|
Back to top |
|
|
john Site Admin
Joined: 16 Mar 2004 Posts: 3434
|
Posted: Thu Feb 01, 2007 10:50 pm Post subject: Re: Help it's the column monster! |
|
|
By default, this style has slightly different widths for the left and right sidebar columns. Try adding the following code:
Code: | table.columns td.left, table.columns td.right {
width: 20%;
} |
to your custom CSS to make your sidebar columns of equal width. |
|
Back to top |
|
|
dissidentvox
Joined: 18 Apr 2005 Posts: 31 Location: North of England
|
Posted: Thu Feb 01, 2007 11:41 pm Post subject: |
|
|
Doesn't seem to have worked. The right side is still pulling over to the right edge of the screen. You can see that it is leaving an additional space, which was why I was wondering if I had anything else tucked away in there that I wasn't recognising(?)
Also, the header is simply not sitting between the two colomns in a central postion. Its pulled off to one side asymmetrically. _________________ http://dissidentvox.com
http://citizenscoop.co.uk |
|
Back to top |
|
|
john Site Admin
Joined: 16 Mar 2004 Posts: 3434
|
Posted: Thu Feb 01, 2007 11:50 pm Post subject: |
|
|
Looks to me like the change worked... I just measured your sidebars and they are identical and your header image is perfectly centered.
If you're using IE as your browser, you might not be seeing the most recent version of the page since IE tends to cache the CSS file... Empty all your caches and or restart your browser... |
|
Back to top |
|
|
dissidentvox
Joined: 18 Apr 2005 Posts: 31 Location: North of England
|
Posted: Fri Feb 02, 2007 7:14 am Post subject: |
|
|
I'm not seeing that at all John. I see this and I see it in both Firefox and Explorer, after emptying the cache and restarting.
You can see that the right side is not the same width. Also it is pulled under the banner/header which is not the case on the left column. Ideally, I'd like both columns to be the same width, the edges of both to sit in a line with the outer edges of the header. _________________ http://dissidentvox.com
http://citizenscoop.co.uk |
|
Back to top |
|
|
john Site Admin
Joined: 16 Mar 2004 Posts: 3434
|
Posted: Fri Feb 02, 2007 10:16 am Post subject: |
|
|
I checked in 2 browsers and everything looks fine and different from when you first sent in this request. I really do think your browsers are showing you a cached version of your stylesheet, because this is what I see...
Check out this page to see the keyboard command for Reload (override cache), I think this may help to clear your browser caches. |
|
Back to top |
|
|
dissidentvox
Joined: 18 Apr 2005 Posts: 31 Location: North of England
|
Posted: Fri Feb 02, 2007 12:28 pm Post subject: |
|
|
Hmmm... I think it has something to do with my screen size!
When I pull the screen size tab out to the very maximum width things slide into place a little better. However, this is far from ideal because that means anyone with less than a large screen is getting something a little shabby.
How can I compress the overall layout to fix the width of the page display? I want to leave more background visible. I also would like it to scale when dragged.
The text does not seem to sit well within the context of the column and looks like it has been abandoned! Probably down to how much text is in the body of the column itself, but I guess I'd like to narrow the width if that's the case.
In terms of the overall look I'm really aiming for something similar to the portfolio site I mentioned earlier. (Linked in 1st post above).
Thanks for all your trouble mate. It's the reason why I continue to sign up all my blogs here and give Rackshare my domain business. They really should give you a rise! _________________ http://dissidentvox.com
http://citizenscoop.co.uk |
|
Back to top |
|
|
john Site Admin
Joined: 16 Mar 2004 Posts: 3434
|
Posted: Fri Feb 02, 2007 3:05 pm Post subject: |
|
|
I think what you are seeing is related to the Login component...
Your design currently sets the sidebar width as a percentage of the main column. The Login form requires a certain minimum width, and when the browser window is less than a certain width, the Login component's minimum width is greater than the percentage that the column is set at, which causes the column to get pushed wider than its percentage was set at.
You can see this is the case by logging in to your blog via the Login area, and you immediately see the right columns shrink down to the size it should have been at (but wasn't because the login form was forcing it wider).
There's really very little we can do on our side to work around this. You can get around this by changing your sidebar columns to be a fixed width instead, or perhaps by setting a minimum width for your columns...
Change your Custom CSS from this:
Code: | table.columns td.left, table.columns td.right {
width: 20%;
} |
to this:
Code: | table.columns td.left, table.columns td.right {
width: 20%;
min-width: 225px;
} |
which will force your sidebars to be at least 225px wide. That should solve the symptom you are seeing... |
|
Back to top |
|
|
dissidentvox
Joined: 18 Apr 2005 Posts: 31 Location: North of England
|
Posted: Tue Feb 06, 2007 9:30 am Post subject: |
|
|
Okay John I've implemented the various things you have suggested but I'm not happy with the overall result. It's just a bit 'slack' if you take my meaning.
How do I implement a fixed width layout whilst maintaining my current CCS colour modifications?
Thank you!
JohnB
_________________ http://dissidentvox.com
http://citizenscoop.co.uk |
|
Back to top |
|
|
john Site Admin
Joined: 16 Mar 2004 Posts: 3434
|
Posted: Tue Feb 06, 2007 9:39 am Post subject: |
|
|
How do I implement a fixed width layout whilst maintaining my current CCS colour modifications?
See the old favorite, How to Center Your Blog. |
|
Back to top |
|
|
dissidentvox
Joined: 18 Apr 2005 Posts: 31 Location: North of England
|
Posted: Tue Feb 06, 2007 9:55 am Post subject: |
|
|
OKay I've done that. However it doesnt appear to have changed anything. If you reload the browser widow you can see it switch between two different widths. One is overiding the other at the last moment. Can you tell me what is going on please? _________________ http://dissidentvox.com
http://citizenscoop.co.uk |
|
Back to top |
|
|
dissidentvox
Joined: 18 Apr 2005 Posts: 31 Location: North of England
|
Posted: Tue Feb 06, 2007 10:11 am Post subject: |
|
|
Lets simplify this. Because I'm not sure I'm being clear and I'm sure it makes your job harder if I can't describe accurately what I'm aiming at.
Ideally I'd like a 3 column layout. Though I'd lose one if it was a problem.
Id like about half as much background to be visible as a default Blogharbor page has. (Like this one) Again I'd accept the whole page width being fixed with the sizing that this one has, but I'd like more control if it's possible.
I will change my Banner image to fit whatever fixed width size is achievable. But hopefully within a 3 column layout.
Finally I could be happy, if I could simply make the Header/Banner sit symmetrically between the two columns (whatever width I they end up being) and not appear (on my screen) to be slightly off to the left. So How can I control the position of the Header more accurately?
I hope thats more comprehensible and I apologise if I'm being vague. _________________ http://dissidentvox.com
http://citizenscoop.co.uk |
|
Back to top |
|
|
john Site Admin
Joined: 16 Mar 2004 Posts: 3434
|
Posted: Tue Feb 06, 2007 10:14 am Post subject: |
|
|
OKay I've done that. However it doesnt appear to have changed anything. If you reload the browser widow you can see it switch between two different widths. One is overiding the other at the last moment. Can you tell me what is going on please?
It's all about the math...
You just set your blog to be 750 pixels wide. Your sidebars are set to be 20% of the total width each, or at least 150 pixels on each side (and as we discussed earlier, the Login form will kick it out a little wider).
That leaves a maximum of 450 pixels for your center column.
On articles like "The British Disease?" you have large images, in that case your image is 523 pixels wide.
So when the browser loads the page, everything is going fine until it gets to an image that doesn't fit in with the math and it has to readjust...
Quite frankly, I don't think you can have all the content you are trying to squeeze into a 3 column layout and have it work in a fixed width design. Something has to give. If you want the fixed width design, you should probably go to 2 columns. |
|
Back to top |
|
|
john Site Admin
Joined: 16 Mar 2004 Posts: 3434
|
Posted: Tue Feb 06, 2007 10:21 am Post subject: |
|
|
Ideally I'd like a 3 column layout. Though I'd lose one if it was a problem.
Yes, in a fixed width design you might have to. There's not enough room.
Id like about half as much background to be visible as a default Blogharbor page has. (Like this one) Again I'd accept the whole page width being fixed with the sizing that this one has, but I'd like more control if it's possible.
More control over what? I'm not sure what you think you don't have control over...
Finally I could be happy, if I could simply make the Header/Banner sit symmetrically between the two columns (whatever width I they end up being) and not appear (on my screen) to be slightly off to the left. So How can I control the position of the Header more accurately?
I have measured your banner and it sits an equal distance from either side of the window. If you find otherwise, stop making changes and post your question here (the stop making changes part being very important).
At this point, I think we're going around in circles... Why don't you take a few days to make whatever changes you can to try to get the effect you are looking for, and when you are at a point where you want to review those changes, stop and post your questions here. |
|
Back to top |
|
|
Search all BlogHarbor support resources.
|
View previous topic :: View next topic |
|