BlogHarbor Home Page
FAQFAQ  SearchSearch  MemberlistMemberlist  UsergroupsUsergroups  UsergroupsRSS   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
Help it's the column monster!
 
Post new topic   Reply to topic    BlogHarbor Community Forum Index -> General Discussion
View previous topic :: View next topic  
Author Message
dissidentvox



Joined: 18 Apr 2005
Posts: 31
Location: North of England

PostPosted: Thu Feb 01, 2007 4:31 am    Post subject: Help it's the column monster! Reply with quote

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! Rolling Eyes
_________________
http://dissidentvox.com
http://citizenscoop.co.uk
Back to top
View user's profile Send private message Send e-mail Visit poster's website
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Thu Feb 01, 2007 10:50 pm    Post subject: Re: Help it's the column monster! Reply with quote

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
View user's profile Send private message Send e-mail Visit poster's website
dissidentvox



Joined: 18 Apr 2005
Posts: 31
Location: North of England

PostPosted: Thu Feb 01, 2007 11:41 pm    Post subject: Reply with quote

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
View user's profile Send private message Send e-mail Visit poster's website
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Thu Feb 01, 2007 11:50 pm    Post subject: Reply with quote

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
View user's profile Send private message Send e-mail Visit poster's website
dissidentvox



Joined: 18 Apr 2005
Posts: 31
Location: North of England

PostPosted: Fri Feb 02, 2007 7:14 am    Post subject: Reply with quote

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
View user's profile Send private message Send e-mail Visit poster's website
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Fri Feb 02, 2007 10:16 am    Post subject: Reply with quote

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
View user's profile Send private message Send e-mail Visit poster's website
dissidentvox



Joined: 18 Apr 2005
Posts: 31
Location: North of England

PostPosted: Fri Feb 02, 2007 12:28 pm    Post subject: Reply with quote

Hmmm... I think it has something to do with my screen size! Rolling Eyes

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! Shocked 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! Wink
_________________
http://dissidentvox.com
http://citizenscoop.co.uk
Back to top
View user's profile Send private message Send e-mail Visit poster's website
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Fri Feb 02, 2007 3:05 pm    Post subject: Reply with quote

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
View user's profile Send private message Send e-mail Visit poster's website
dissidentvox



Joined: 18 Apr 2005
Posts: 31
Location: North of England

PostPosted: Tue Feb 06, 2007 9:30 am    Post subject: Reply with quote

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
Very Happy
_________________
http://dissidentvox.com
http://citizenscoop.co.uk
Back to top
View user's profile Send private message Send e-mail Visit poster's website
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Tue Feb 06, 2007 9:39 am    Post subject: Reply with quote

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
View user's profile Send private message Send e-mail Visit poster's website
dissidentvox



Joined: 18 Apr 2005
Posts: 31
Location: North of England

PostPosted: Tue Feb 06, 2007 9:55 am    Post subject: Reply with quote

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
View user's profile Send private message Send e-mail Visit poster's website
dissidentvox



Joined: 18 Apr 2005
Posts: 31
Location: North of England

PostPosted: Tue Feb 06, 2007 10:11 am    Post subject: Reply with quote

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
View user's profile Send private message Send e-mail Visit poster's website
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Tue Feb 06, 2007 10:14 am    Post subject: Reply with quote

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
View user's profile Send private message Send e-mail Visit poster's website
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Tue Feb 06, 2007 10:21 am    Post subject: Reply with quote

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
View user's profile Send private message Send e-mail Visit poster's website
Search all BlogHarbor support resources.
View previous topic :: View next topic  
Display posts from previous:   
Post new topic   Reply to topic    BlogHarbor Community Forum Index -> General Discussion All times are GMT - 5 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum