10 replies [Last post]
chiriones
Offline
newbie
Last seen: 10 years 45 weeks ago
Joined: 2008-12-07
Posts: 3
Points: 0

Hi All,

This is my first serious foray into CSS. I've stayed up late many nights scratching my head trying to figure this stuff out. Very quirky indeed...

I've created a new website for some friends who have an art gallery:
http://eastpointtower.com

It seems strange to have such a simple, basic site after many days of hacking away, but it feels like an accomplishment nonetheless.

I would first like to ask for any comments or suggestions. (Please ignore the emphatic style of the copy, which was written by my friends.) I have viewed the site in Firefox 2.0, IE 7.0, and Opera 9.6 and validated the CSS & HTML.

I also had a few quirks to iron out:
1) This is weird to me, but in Firefox 2.0 the calendar on http://eastpointtower.com/calendar.html will center as it is loading, then adjust to the left when loaded. It doesn't do that on my local copy! It stays centered in Opera and IE. Another strange thing is that if I validate the local CSS I get over 50 errors (from google's embedded calendar, not my stylesheet) but when I validate the CSS on the remote site I only get one error (google again.) What is going on?

2) When I shrink the viewport to 800x600, the navbar tabs wrap. Is there a way to make them spill over to the blank space in the top right hand part of the page. I recall an article about floated elements going outside their containers, but couldn't figure it out.

3) I guess this is just aesthetic preference, but I want to make the 5px red border under the active navbar tab to 'disappear' or change to the background color. In the stylesheet, it's commented with "an attempt at making the red margin disappear..." That stumped me as well.

I want to thank everyone for this forum. It was a helpful resource in coming up to speed on CSS.

Triumph (not verified)
Anonymous's picture
Guru

Why in blazes are you using

Why in blazes are you using tables to lay out the text? :?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 46 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

In addition to the

In addition to the nonsensical use of tables for layout, your color scheme, low contrast, and teensy tiny fonts make the site completely unusable for those who, like me, have less than perfect eyesite. The page may as well be invisible as for as I am concerned.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

chiriones
Offline
newbie
Last seen: 10 years 45 weeks ago
Joined: 2008-12-07
Posts: 3
Points: 0

The tables were used on the

The tables were used on the site because the client had asked me to copy them from tables in a powerpoint presentation she had made. I did my best to make them minimalistic and not look too terribly "table-ey". In several places she had tables that described benefits of what was being discussed. I wasn't quite sure what to do with them, so I removed the borders, put some padding around the cells and made a "benefit cloud." How do you recommend it should be laid out?

The color scheme came as a result of their logo. They had commissioned an artist to paint the building and it's a big part of their identity. I used a tool to extract the prominent colors from the image of the building and made color selections for the site from there. The building is an old bank from the 60's so I used colors and minimal design that seemed to fit the theme. In a preliminary meeting with the client I presented a draft of the site with the color scheme and they liked it. I had usability in the back of my mind as I created it, but had thought it was readable. Which parts are you having trouble with specifically, or is it the whole site?

I reduced the font size for the body and navbar a little to "tone down" the default size. In my browser, all of the fonts on eastointtower.com are larger than some of the elements of csscreator.com such as "who's online" and the mission in the header. Are those invisible to you as well? What guidelines would you recommend for selecting a font size?

Thanks for your input.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 46 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

chiriones wrote:The tables

chiriones wrote:

The tables were used on the site because the client had asked me to copy them from tables in a powerpoint presentation she had made.

That's not a reason, that's an excuse. Tables are prefectly proper for marking up tabular content. There is no tabular content on that page. There is therefore no good reason to use tables in your markup.

Quote:

The color scheme came as a result of their logo.

That still doesn't make it good. The contrast is much too low on your main content. I suggest you use instead the same color as on your "background" tabs, reversing the tab color scheme as well.

Quote:

I reduced the font size for the body and navbar a little to "tone down" the default size. In my browser, all of the fonts on eastointtower.com are larger than some of the elements of csscreator.com such as "who's online" and the mission in the header.

How it looks on your browser is irrelevant. THE WEB IS NOT PAPER!! Your page WILL look different on other computers and other browsers. Your colors WILL look different on different monitors. There is NOTHING you can do to change this. You have to design with this in mind. The web is a flexible medium and you have to learn to design sites that work flexibly. It isn't all that hard, really.

Quote:

Are those invisible to you as well? What guidelines would you recommend for selecting a font size?

Set your base font size to 100%, or not at all. This means every browser will use it's default font size, which is the best practice. Set the font color to black, to ensure the highest possible contrast. Use smaller or larger font sizes only for effect, and when you do set them in percents or ems. Never set your font size in pixels or points or any other supposedly "fixed" measure.

You can't really do this with a table based design, though. The are too rigid. Mark up your content semantically and use a few strategic DIV elements to give you CSS hooks for positioning stuff.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Ed Seedhouse wrote: Set your

Ed Seedhouse wrote:

Set your base font size to 100%, or not at all.

I think i remember reading somewhere that you should set default base size to 100.1% due to an IE6 bug.
Is this still a relevant issue?

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Triumph (not verified)
Anonymous's picture
Guru

Deuce wrote:I think i

Deuce wrote:

I think i remember reading somewhere that you should set default base size to 100.1% due to an IE6 bug.
Is this still a relevant issue?

Hmm. I thought it was for Opera. I forget.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Triumph wrote:Deuce wrote:I

Triumph wrote:
Deuce wrote:

I think i remember reading somewhere that you should set default base size to 100.1% due to an IE6 bug.
Is this still a relevant issue?

Hmm. I thought it was for Opera. I forget.

Could have been, I just remember this having been an issue at one point with a browser, and when the topic of "issues with browsers" come up, of course IE6 pops into my head.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Triumph (not verified)
Anonymous's picture
Guru

Deuce wrote:... when the

Deuce wrote:

... when the topic of "issues with browsers" come up, of course IE6 pops into my head.

A safe bet, to be sure. Smile

chiriones
Offline
newbie
Last seen: 10 years 45 weeks ago
Joined: 2008-12-07
Posts: 3
Points: 0

Quote:I suggest you use

Quote:

I suggest you use instead the same color as on your "background" tabs, reversing the tab color scheme as well.

Thanks Ed. I'll be meeting with them later this week and will suggest that.

~Steve

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 33 weeks 5 days ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

Should probably set a

Should probably set a min-width and max-width to the layout just to keep it from stretching too wide and becoming too narrow.