10 replies [Last post]
co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 33 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Congratulations me! \:D/

Anyway, I was thinking, what a nice time to ask for a little help. I've been redesigning our new site on and off for a while. Finally, it's close to being ready. Here's a list of outstanding things, as so you know that I know:

1. A few minor Internet Explorer 6 bugs, to be ironed out over the next few days (inc. margin issues mainly).
2. Some more important Explorer 5 issues, which I shall also iron over in the next few days.
3. Also, got to replace that Coriander home page image, it costs £1000!!! Get out the camera is what I say.

I've been checking on Mozilla Firefox, Safari, and Explorer 6 (XP) (I am purposely leaving IE 5.2 Mac, it's dead, I hate it, and I haven't got time... I know, very very bad, but it's real-world stuff unfortunately).

Since I've been working on it sporadically, I've let a few things slip, but think most things are okay, and am desperate to get it on-line, so will further improve over the coming weeks/months/years/centuries.

Okay, now the link: http://dev.c-o2.net/co-ord/05a/

Hit me with it! Laughing out loud

The next sentence is true. The previous sentence is false. Discuss...

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

1000th post and a request! :)

Congrats on the 1000th - what took you so long?

To begin with it has a nice concept and feel with accent colors with just enough "pop" to add visual interest without detracting from the clean peaceful feel.

Now to get out the high heels and stomp around a bit Wink

#top nav - need to have text expand around horizontal center - for example using something like:

div#topNav 
	{ 
	background: transparent url(../img/topNavBG.gif) repeat-x 50%;/*make the background stay centered*/ 
	margin: 8px 7px 0; 
	height:1.75em; 
min-height:22px; 
line-height:1.5em;/*putting in a em-based line height "auto-centers" the text vertically*/ 
	}

#serv is not long enough to contain menu if user uses >usual default font size - need to rethink - ?image replacement technique to provide graphical links with <span>s having hidden link-text for degraded or text-only browsers and search spiders.

Writing CSS that is dependent on fixed-font size is the antithesis of progressive design.

On a graphical note: I would make the leaf of whatever is in your background visible "under" your #hdrSect, perhaps by having a semitransparent background to your horizontal repeat graphic using alternating transparent pixels.* This can help tie the page together and looks really sophisticated while it is a simple trick to accomplish.
Empty spaces are transparent pixels 
**** 
**** 
**** 
**** 
**** 
**** ==>repeat-x 
**** 
**** 
* *  
 * * 
* *  
 * * 
* *  
 * * 
* *  
 * *

I'd do your two max-width properties in ems, suggesting 40ems for #text and 30ems for #comply. Similarly, I'd look at areas wehre you have heading widths and do them in ems as well. All of these things in no way change the default appearance of your page, but they do change the behaviour for users who crank up font sizes for visual impairment reasons or because they have one of these high-res laptops that thay haven't tuned for properly sized font display.

This is the only systematic change I would make although you might consider making your popups a little taller to handle two rows of text - the additional whitespace at the bottom won't hurt the design and if the top text wraps your image will still be above the bottom of the pop-window.

Nice job (removing high-heels)

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 33 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

1000th post and a request! :)

Thanks DC!

That's exactly the type of input I'm looking for. Laughing out loud Haven't had a chance to look into it all yet, but will try tonight.

Like I said, some of the stuff I've been too busy to implement, but have thought about (swapping images for spans etc.). You've given me the gentle push I needed to get on with it.

Will get back with my thoughts later... thanks again!

(Damn, there goes my 1000th post!) Laughing out loud

The next sentence is true. The previous sentence is false. Discuss...

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 37 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

1000th post and a request! :)

The italic text is a little hard to read.

The services text disappears into the white background if text is resized too much.

I also think you should use larger line-height, but that's just me.

Verschwindende wrote:
  • CSS doesn't make pies

GeoGeo
Offline
Regular
Last seen: 16 years 3 days ago
Joined: 2004-12-04
Posts: 13
Points: 0

Min-width

I seriously think you need to think about adding a min-width to your site. When you shrink the size of the browser, your page looks horrible.

It's a great site by the way.

Andy

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 33 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

1000th post and a request! :)

Thanks guys. All taken onboard.

The italics I guess look nicer when anti-alias is on within the system.

GeoGeo, I didn't want to use a min-width property, I'd like the site to work on a small device as well. Admittedly, as you say, it doesn't look great when reduced down at present. It's something I'll sort out.

I think it's going to be a case of working on it whilst it's up and running, and making gradual changes over the next few weeks.

The Service nav does need sorting out. The logical option is to make the surrounding graphic 'boxes' (the Services container and graphic banner that it is within) expand with the text. It's not impossible, but will need a rethink. Again, I think a job for when it's running.

Have changed the #nav bit as mentioned DC. Not sure where you meant with the image-replacement?

The next sentence is true. The previous sentence is false. Discuss...

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

1000th post and a request! :)

There are various kinds of image replacement schemes out there if you Google for CSS image replacement. The technique was widely popularized by CSS Zengarden. Basically it is a method to replace text with an image while still leaving the text for text readers, spiders, and ancient non-CSS aware browsers. I was thinking you could use if for your vertical list of links since it really won't tolerate larger than the default font size. You are still able to do rollovers and the like just by swapping in a different background image or moving the background position of a multipart background image.

Have fun.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 33 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

1000th post and a request! :)

CHeers DC.... yes, I've used the image replacement before, I didn't read your original post correctly (didn't understand where you meant).

All is clear now.

I don't think I am in favour of the image replacement simple because I would want the text to be resizable to all (even though it doesn't work properly at present).

Like I said, I could make the surrounding boxes scalable. Bit of work to do though. :roll:

The next sentence is true. The previous sentence is false. Discuss...

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

1000th post and a request! :)

Would you consider doing that menu as a horizontal one as well? There is a technique to make the menu grow upwards with font changes rather than downwards. Making the darker background grow would make it too dominating a graphic element IMHO.

The horizontal menu now remains centered, even in IE5.5. However, you have rounded end caps that are now drifting upward and need to have the same positioning applied (this is in multiple browsers, not just IE) Also the dividing border between links gets too big (probably partly my fault :roll: ) now so some other divider technique may have to be considered.

It is actually fun making suggestions to someone who knows what they are talking about - it becomes a discussion of the design tradeoffs we all have to make.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 33 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

1000th post and a request! :)

Hi All

Have had the time to update the site a little further... is much better for scaling (using ems for dimensions etc.): http://www.co-ord.com/index.php

SO, increasing text size works with the design overall now. A few fiddly bits to overcome with very large text, but seems to work much better now.

Smile

The next sentence is true. The previous sentence is false. Discuss...

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 37 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

1000th post and a request! :)

Much better.

Verschwindende wrote:
  • CSS doesn't make pies