Saturday, September 03, 2011

Tech question:

(and it's post number 666, the old number of the beast)

So how do I make my blogroll left justified?

At the moment it looks like a fucking grade sixer has laid it out.

I can say that because I used to be a grade sixer and my three kids have all been grade sixers.


My Tech Dude is mowing the lawns so there's already enough on his plate.

I'm sure it was never centre justified.

At least it's not comic sans, world's most heinous font according to graphic designers everywhere.


Melbourne Girl said...

Well that's weird, in some views it IS left justified. Can my two readers please let me know how it looks to them?

Alex said...

I've looked at your blog using recent versions of the Gecko, Webkit and Presto renderers (Firefox, Chrome, Opera, respectively) and I can't find anything on the page that doesn't look left-aligned. Haven't tested with Explorer, as I try not to run Windows at home. But I can fire it up in a virtual machine if it'd put your mind at ease?

Alex said...

Ok, I had a very quick squiz at the source code for the page and it looks to me like the text-alignment for the page body is set to center. So, basically, any element on the page that doesn't have its text-alignment specifically set to left or right will inherit this property as well.

I think.

jo_blue said...

Looks left justified to me MG. I'm using Firefox and Chrome. But, if I click on your link above and open in a new tab, I get the centred version. Bizarre.

Alex said...

Okay, okay, I see what's going on. Most of your articles are fine but the "Fridayrama Diarama" and the main page at least are messed up.

Your pages are layed out with three boxes (<div> elements) stacked on top of each other - header, content, footer. Inside the middle content box, you have your main box and your sidebar box. These two boxes inherit their left-alignment property from their parent element (the content box).

On the messed-up pages, the sidebar box has found its way out of the content box and is inheriting the center-aligned property from the main page.

Since it's only happening on some pages and not on others, I'm not exactly sure how you go about fixing it.

Alex said...

Actually, since it's only in the Fridayrama Diarama post and the main page and it's only happened since the Fridayrama Diarama post was posted, I'm guessing the problem is with the Fridayrama Diarama post.

Maybe an unclosed tag somewhere or something.

Alex said...

I love Patrick the Batrick. I'll get into bed now and caress him.


Fri morning, circa 12.35am 31/7/87.

I'm guessing this was not intentional (ie: auto-generated by Blogger) -- and I'm taking it as a sign that there are definitely messed up <div> tags in your Fridayrama post. My suggestion is to copy the text out, delete it, then have another go at posting it.

Melbourne Girl said...

Well thanks Alex especially for spending time to look at my code, man.

The diary post I had gone into the html to try to remove some of the spacing that had appeared. Whenever I include a picture in a post it seems to make the spacing extreme. I haven't upgraded to the new template that I see advertised. Should I?

Also I don't know what you mean when you talk about the boxes, header etc. Would I see that in the template page view?

I've gone into the diary post and put in a missing dir tag. Makes it seem that the lables and blogroll are left justified to me but I'm not sure whether that's fixed it properly.

If that doesn't work I'll copy out delete and redo, this time add the picture later. Might make a difference.

Thanks again for helping me, and thanks Jo too. You've got enough to do without helping me with my blog.

Alex said...

Everything looks fine to me now, too. I don't think I'd worry too much about doing anything else. As long as it renders properly in major browsers, I don't think it matters if the code is exactly technically correct. Not for a blog, anyway.

I'm not sure exactly how much you know about HTML, so I'll say this:

In the old days web-page layout was generally done using tables. The <div> tag was introduced to get away from this. Basically, everything between a <div> and </div> tag will be put in its own rectangular "box" and separated from everything else. <div> tags can be nested, which basically means stacking boxes within boxes.

As stated, I noticed your blog is made up of three boxes stacked vertically, with the middle box containing two boxes side-by-side. The missing tag was causing the side bar to get "pushed" outside that middle box.

As for the spacing issue and whether you should upgrade the template - I have no idea. I've never had a blog* and I don't know the ins and outs of Blogger.

*Maybe I should, aye?

Melbourne Girl said...

You should Alex, definitely.

I don't know anything about html other than: I don't know anything about it.