Bruce Lawson's personal site

Everyone’s going redesign crazy!

I notice that Patrick “Herb” Lauke has redesigned/ realigned the Salford University website with some tasteful Flash – and made a video of the redesign process!

I too have had a modest recode, to remove scrollbars from Safari and to restore a footer to the design. Originally, I had no footer as I was absolutely positioning the sidebar from the bottom of the source to the left of the screen, and with a blog there’s no way to know which will be longer – the sidebar or main content.

But I like footers, so have got a gruesome CSS epicycle to hold the grid together. The content div is still before the sidebar in the source, but the content div is 100% wide to fill the screen and has a left border of 240px wide. The sidebar is 210px wide and is given a left-margin of -100%, superimposing it over the wide left border of the content div. A small problem with IE means there’s a small horizontal scrollbar, but I hope to get my brain around that (without an IE-only stylesheet dragged in conditional comments). (If you’ve got any ideas, do let me know.)

During my redesign, I made liberal use of Brothercake’s new Firefox extension “Dust-Me Selectors” to find unused CSS selectors. For those who have to rummage around legacy CSS written by other people (or wade through your own code that you wrote when drunk) it’ll prove as valuable as the Web Developer’s Toolbar and Firebug. And full marks to Brothercake and Sitepoint for releasing it for free.

Buy "Calling For The Moon", my debut album of songs I wrote while living in Thailand, India, Turkey. (Only £2, on Bandcamp.)

10 Responses to “ Everyone’s going redesign crazy! ”

Comment by Ben 'Cerbera' Millard

Project Cerbera just uses:

float: right for the main content.
float: leftt for the left navigation.
clear: both for the main footer.

Maybe something along those lines could work here? Having one part sized in px with the other in auto might mean something that simple won’t work.

I just noticed IE6 gets hover styling for your graphical navigation buttons but Firefox doesn’t. 🙁

Also, the Notify me of followup comments via e-mail label is appearing on the line below the checkbox.

The Flash on Salford is making Firefox eat as much CPU as it can get a hold of. That’s probably a bug in Firefox but maybe the Flash could be tweaked for better compatibility.

Comment by bruce

Hi Ben
I tried the opposite float methods, but couldn’t get it to work with the auto and pixel wisth combos. ‘Course, could be my inadequacies with CSS.

Sorry about Oolongse eating your uls …

Comment by Andy

Well I’ve a question lets say I have page is actually 1024 by 768 but I want to restraint my users by having to scroll side to side vertically on a 800 by 600 user. Will this affect any Search Engine Optimizing. So will this affect Google or major searches to penalize my site?

Comment by bruce

Andy, I don’t know what “I want to restraint my users by having to scroll side to side vertically on a 800 by 600 user” means. Can you explain further?

Comment by Andy

Hi Bruce

Thank you for your responding to us.
I would like to add a small text menu that would be outside of our set website page size. Our site is in 800×600 resolution and there is no one place to have this menu that would be common to all 2,800 pages within the site and therefore our only recourse is to place it outside on the top-right corner. The menu would be visible to people using 1024×768 and above, but outside of the margins for 800×600 and below.

The menu is also not integral to the navigation of the site; it will be used more as in-site anchor text for SEO purposes. My question is; would search engines consider this black-hat or Spam if some viewers were not able to view this menu? I know that removing the vertical scroll bar is considered Spam, but I haven’t heard anything on the horizontal.

Comment by bruce

Personally, I doubt that it’s black-hat if it happens to be off screen for the small minority of people using 800×600.

Anyone else?

Leave a Reply

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> . To display code, manually escape it.