Minor changes to look-and-feel

I’ve been meaning to do a bit of housework on this site to clean up the CSS and to add a bit of interactivity. After all, I write a lot about JavaScript, so I might as well start adding some to my blog.

photo © 2007 Dan Brady | more info (via: Wylio)First things first: if things look a little wacky for you, your browser is probably using the old CSS file. Refresh. That should force the new CSS file to be downloaded and used.

Second: the changes to the CSS are two-fold. The main impetus was to allow for the second rightmost sidebar to be hidden/shown. Originally both sidebars were absolutely positioned and so, to enable this new behavior, I had to float all three columns (content, sidebar 1, sidebar 2). That way, when the third column is hidden, the other two can grow/move correctly (and when it is shown, they can shrink/move back). The other main point of the CSS tweaking was to make the display of comments nicer. Previously the size of a single comment block was the maximum of the height of the metadata/avatar part to the left of the content or the height of the content itself. The first possibility made the gaps between comment blocks uneven and look bad, so I fixed this.

Third: I added some JavaScript and jQuery to allow that second sidebar to be hidden and shown. I’ve added an extra link on the “navigation bar” above that performs this task.

These changes should help those readers who are using a smaller screen (say, 1024 pixels wide) see the main content more easily. I have had a couple of emails complaining about the old layout, so these changes should alleviate the problem.

  Loading links to posts on similar topics...

2 Responses

#1 Joe Hendricks said...

01-May-11 9:23 AM

Inspiring, especially for those of us lazily letting blogspot so all the work! BTW, really enjoying your javascript DX TV series.. Joe

#2 julian m bucknall said...

01-May-11 4:27 PM

Joe: There's the thing: the only way I really get to play with web technologies is here on my own websites. You, my friend, do it for a living, so I'm sure you're just happy to let blogspot do the work for a change :).

And, I'm glad you're enjoying the DevExpress Channel webinars!

Cheers, Julian

Leave a response

Note: some MarkDown is allowed, but HTML is not. Expand to show what's available.

•  Emphasize with italics: surround word with underscores _emphasis_
•  Emphasize strongly: surround word with double-asterisks **strong**
•  Link: surround text with square brackets, url with parentheses [text](url)
•  Inline code: surround text with backticks `IEnumerable`
•  Unordered list: start each line with an asterisk, space * an item
•  Ordered list: start each line with a digit, period, space 1. an item
•  Insert code block: start each line with four spaces
•  Insert blockquote: start each line with right-angle-bracket, space > Now is the time...

Name (required) Mail (will not be published) (required) Website Response Submit

Preview of response