Website appraisal

[Mal]

Yes, this is the website that grew out of my "Learning CSS" thread. I'm looking for input on how I could improve the design, particularly in the downscaling of the top logo. It looks great at 800x600 and better, but if the window is shrunk, the layers don't sit right. I'm considering breaking it up into 3 total images to accommodate the design, but I'm not sure how to code it. What I'm thinking is that the background image would be the same as it currently is (works well), the text of the logo would be another that would always be on top of both the others, and the mountain would be a third image that sits on top of the background (that's easy), and underneath the other, but always against the right edge of the div (lined up with the background). Not sure how to pull that off...

Anyways, here's the site:

http://www.japancpi.com/

jW

 

[skoker]

That light text on a dark b/g kills my eyes- I get massive glare.

 

[Mal]

Really? I've always liked the coloring. Any suggestions that would make the colors better without losing the look?

jW

 

[skoker]

Really? I've always liked the coloring. Any suggestions that would make the colors better without losing the look?

jW

Try maybe using a sans-serif font? I really don't know what to suggest, that was never my area of expertise.

 

[Mal]

I couldn't bear to lose the color scheme, because it looks really cool. I did try enlarging the text and making it closer to true white, and it looks better to me, but what do ya'll think? Readable enough? If not, can anyone suggest a color scheme that's not white or almost white background (I find it looks cheap) that is more readable?

jW

 

[Gil Bates]

Yikes! I hope the text on the page is some kind of bad joke.

 

[frankblundt]

It's better, but i'd go lighter still for the text. Your right margin for the content area is a little cramped.

Your navigation could do with looking a little more like navigation and a little less like all of the other text on the page, more leading space between the items would help, and the left margin is a bit too big - the nav area is using a lot of your page space.

As to the content - not touching that with a barge pole...

 

[Mal]

The text is at one shade lighter than white, I'll try lighter, or I guess I could go darker/lighter with the background, I'll play with it later today after church.

Any other suggestions than the colors? Did I really do such a great job with everything else? Besides, no one's answered the question about the top logo.

jW

 

[Mal]

OK, so I tried to split up the top logo into two graphics (plus the repeating background which is in a separate enclosing div), and it's not working at all. The second part gets just shoved off to the side and down, instead of showing. I can't figure out how to get it to show behind the other one. Here's the code for that portion of the style sheet:

/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */
#pageHeader h1 { 
	border: 1px solid red;
	background: transparent url(images/toplogo1.png) no-repeat top left;
	width: 100%; 
	max-width: 735px;
	height: 138px; 
	float: none;
	overflow: hidden;
	}
#pageHeader h1 span {
	display:none
	}
	
#pageHeader h2 {
	border: 1px solid blue;
    background: transparent url(toplogo2.png) repeat bottom right;
    margin-top: 10px;
    height: 138px;
    float: right;
    } 
#pageHeader h2 span {
    display: none;
    }

You can see what it does to the page at http://www.japancpi.com/index2.html

Like I've mentioned, I'm new to this, so I don't know if I'm missing a piece of code or if something extra was in there, but I think I did this mostly from scratch, just using the template from the link in that section of code.

jW

 

[kaboutertje]

You have to make the site lighter, if you want to convert the japanese

 

[Mal]

Well, this site isn't for the Japanese themselves, but for the team working the conference, but I hadn't thought about that connotation. I'm working on a method of doing that, basically leaving the background dark but behind the text will be a white or almost white background with rounded corners. I hope it works...

jW

 

[Mal]

Ok, changed the look a bit, got the top picture working mostly, but I want to reverse the way that they layer. The mountain picture shows on top where I want the text to show on top. It's not a problem until you downscale to a smaller screensize, but I'd like to make it work.

jW