Public Class GeoffAppleby : A New Look

Navigation

Comments

Sahil Malik said:

I actually like your new skin. Though Whats up with that guy on the left top?

# February 13, 2005 1:28 PM

Geoff Appleby said:

That's me from about 10 or so years ago one night out drinking :)

# February 13, 2005 1:47 PM

Brendan Tompkins said:

Well, after a night out drinking, I just updated your new homepage skin. Nice work Geoff! Thanks!

# February 13, 2005 2:29 PM

Geoff Appleby said:

A night out drinking? Hmm...should i trust your handywork? :)

# February 13, 2005 3:45 PM

Raymond Lewallen said:

Your blog and the new homepage look awesome! Great work Geoff!

# February 13, 2005 9:31 PM

The text-align attribute is for just that; aligning text in the specified direction. It's *not* for aligning block elements (divs, tables, etc.). This is something that IE actually does incorrectly. For example, if you have a div that you've specified to be 800 pixels wide, and then you specify text-align: center; on the body element the div will be centered in IE, but not in Firefox (or Opera, Safari, etc.). IE's aligning of the div is actually incorrect, according to the CSS spec.

When I'm marking up a site I usually test it first in Firefox. This usually ensures that the site will look the same in every browser but IE. I can then usually go back to IE and add a few CSS hacks to get it to display properly.

Oh, and the CodeBetter homepage looks pretty nice! Good job.

# February 14, 2005 6:06 AM

Geoff Appleby said:

That's it is different doesn't worry me, and whether it's ie or firefox that has it wrong doesn't concern me - the only thing that annoyed me was having to resort to the 'align=right' attribute on the table tag to make it work in firefox. As far as i'm concerned, all things like that should be CSS only, not part of the html - what i'd really like is the correct css style to use to right align a block element in firefox. is there one? stuff that's deprecated shouldn't be used in _any_ browser, and it's disappointing that i had to resort to it for firefox (i would have expected it in ie, not firefox). If i was trying to write the page to be xhtml compliant, then it would have failed validation, surely?

This to me is a failing of CSS - text-align to only align text is fine. vertical-align effects all things - why isn't there a horizontal-align? :)

But in the end, it works, and that's all that matters :)

# February 14, 2005 6:36 AM

Jeff Perrin said:

Block level elements (like <div>, <p>, <blockquote>, etc) always take up the entire width of their parent element unless you specify a width, and even then they will always appear below preceeding block level elements. If you want to position something to the right, you can use the float attribute, or absolutely position it wherever you need. I wouldn't necessarily classify it as a failing of css. It can take a while to get used to designing sites with semantic markup and css, but once you get the hang of it and really understand how everything works, it really is incredibly sweet. Being able to have the same markup serve up pages to many different media using CSS is the most absolutely rocking feature out there... And is one that most developers don't pay that much attention to. For an example, take a look at the print preview for <a href="http://www.jeffperrin.com">my site</a> and Milan's <a href="http://www.aspnetresources.com">aspnetresources.com</a>. One set of markup, two stylesheets, two totally different views. You just can't get that with table-driven designs. You could go even farther, and specify a stylesheet for televisions or PDA's.

That said, there are some styles of layout that are more difficult to achieve without using tables. But in the end, the benefits outweigh the downsides. If you're interested in learning more, checkout Milan's site, as well as design sites like mezzoblue or the csszengarden. Eric Meyer's "More Eric Meyer on CSS" is a great book on practical use of CSS as well. I can't recommend it enough.

If you're interested, I could even mock up the CodeBetter layout using a completely semantic/CSS design. I'm sure I could cut down on a bit of bandwidth and make the site read better in print or on smaller devices.

# February 14, 2005 9:34 AM

Geoff Appleby said:

Hey dude,

Nothing you've said there is new to me, but it's useful information to leave lying around for other people to read, so thanks for taking the time to write it :)

The two things you mentioned as alternatives were float and absolute positioning. Here's my response to them:

1) Floating: Floating is crap. At least, I don't know about firefox, but in IE, floating is crap. :)
2) Absolute positioning: No. The only time absolute positioning is useful is when you specify postion:absolute but don't specifiy a left or top, leaving it relatively positioned to where it was rendered, but 'detached' from the render surface (like how i've done the popup menus on my blog pages). Forcing a position on the page removes a hell of a lot of choice from the user viewing the page.

For example, in the CodeBetter homepage, there's a column on the left, then the main content on the right.
The content in the left column is absolutely positioned with a left of 5 pixels, and a width of (from memory) about 190. The main content in the right is not absolutely positioned, it just has a left margin set of about 200 so that the two don't overlap.

In this case the absolute positioning was ok, because i was pushing things to the left hand side, and not affecting the viewing experience very much. I would really like to get rid of the left hand column completely (like i did in my own blog pages) because it's a waste of space - the content should be used to write the post text, not, as it is now, a little bit of info then for the bulk of the height of the page a hunking great white wasteland. But I couldn't think of anywhere else to put the list of bloggers, and people probably want to see it :) While we have a small number of bloggers, i could probably make the header shorter and lay them out horizontally over a few rows, but..well, i'd have to play with that, i've only just thought of it, and it might look really crappy!

But on the top header where I have the rss and opml links, i want them pushed over to the right, but i want the curvy endy bits around each 'tab' to keep in theme with the look i was emulating. What am i supposed to do here, position it absolute and put a left position on it of 400 pixels? 500? pushing it out to a specific location means i can't shrink my browser width to less than what the page designer has decided to be 'the width of the page' without getting a horizontal scrollbar. Alternatively, if i have a high resolution, my browser might be very very wide - but the fixed positioning of all this stuff maens that a whole heap of the right-hand-side of the viewable area is empty.

I wrote the CodeBetter page with these two things explicitly in mind. Float issues in IE make me shy away from them, and I was deliberately trying to improve the idea of the 'codebetter skin' (see, say, darrell nortons blog to see what i mean). I wanted to keep the same basic look and feel, but stop forcing users to maximised to see everything at once - while not penalising those who _do_ stay maximised.

I personally see no problems with using tables for layout. I like to use plain ole css for as much as possible, because it certainly is the 'right' way to do things, and things look so much better using CSS than the old stuff. As you said 'there are some styles of layout that are more difficult to achieve without using tables' - I agree completely. I just don't believe the benefits outweigh the downsides, that's all :) In most cases I do avoid tables - but when the compromise means that the user gets forced into a specific page width, then no, that's not a downside, it's a complete failure, and not good enough. I'll happily revert back to tables in that case.

Even so, I do also feel I overused tables in CodeBetter homepage, and i'm currently working on a version that is less table weighty. I want to leave a little time to give Brendan a chance to get over the bombardment of emails i sent him to get the current look up and running :) I can't garantee my success, but I'll be giving it a shot.

But my two tenets of developing html that I wish more people would conform to are to avoid floating, because I screws it up :) and to avoid absolutely positioning stuff, which generally forces a fixed width, which is wasteful when there's room to play. I include your site in this too :) It looks nice, and i'm sure it's quite well written, and i'm certianly not calling you a bad html/css author, it's just something bugs me :) I keep my browser fairly short but quite wide, and i run at 1600x1200 resolution. As a result, i have these massive green bars running down the left and right hand side of the page, all because you've forced me to view the content area in a 500 pixel wide column (i checked :)

I'm sure this is just a collision of viewpoints - so many people seem to write fixed-width pages that obviously most of them are happy about it, and like it that way. It's just that I don't, that's all, so if i write it, you get my bias's and opinions too :)

# February 14, 2005 11:12 AM

Jeff Perrin said:

Ok, I'm sure we're just coming at this from different angles, but I'd like to make a few points:

- What issues are you having with floats in IE? I know it has bugs with regards to floating, but they're pretty easy to work around, and I haven't run into any of them in my day to day coding.

- "But on the top header where I have the rss and opml links, i want them pushed over to the right, but i want the curvy endy bits around each 'tab' to keep in theme with the look i was emulating.". You'd mark up the links as a simple list (which is semantically exactly what they are):

<ul><li><a href="#">One</a></li><li><a href="#">two</a></li></ul>

Then you'd specify your css markup like this:

ul{ text-align: right; }
li{ display: inline; }

The text-align: right; will work this time, because you've told the list elements to display inline. Now you have your semantically correct, right-aligned links. If you want some sexiness added in, just specify a background-color and background-image on the anchors and the list elements. With the proper use of padding/margins, you can have the exact same effect you have now.

Now, as for fixed width vs. variable width sites, you've opened a whole new can of worms... ;) I also have a 1600x1200 pixel screen, but I don't use my browser full screen, mainly because sites like CodeBetter would be impossible for me to read that way. Ever wonder why newspapers have *really* narrow columns of text? Because it's easier to read without getting totally lost. I won't get into it too much here, but if you google around a bit you'll find that it's definitely not so cut and dried.

Either way, I'm now definitely gonna mark up a version of your site, just for kicks. I'm not trying to beat this over your head or anything (ok, maybe just a bit!), but I think I can put something together that would make you gasp in ecstasy (or something).

# February 14, 2005 12:28 PM

Geoff Appleby said:

Certainly feel free :) Don't post it here, email it to me thanks. Hell, i'm always interested in the different ways people do things.

I'll send you my email address through the contact link on your blog (although it's really not that hard to figure out if you know it's with gmail :)

# February 14, 2005 12:53 PM