Some HTML/CSS problems

[mikka23]

Hey I am working on a new website and have just completed the coding of the basic template shell. I was hoping for some tips to improve my current coding and also if there are any bugs in it.

Link: http://intelligent-studios.co.uk/isnew/

Some things I think could be improved and am not sure how to do:

1. On the left for each package the text "custom design" and "cms" is currently part of the image. I would like this to be actual html text but still want the whole package to be a link. Im not too sure how to go about that.

2. I currently use a javascript collapsible panel on the left "info" for more details about a client. Is there a better way I could be doing this which is more elegant but still works on an html file.

3. On the images in the central column which I currently use the overlay attribute only the text are links. I would like the whole image to be a link however so when you hover over the image the text has its hover effect (change colour).

4. I am using a min-height attribute for the middle column which is currently fine. I do however think it would be nice if there was a way to calculate the largest column and then make the height of the middle column slightly above that. For example I currently have set the min-height to around 850px. if a different page has say a very long left column 850px would not be the largest which would break the footer effect. If there was a script of sorts which could calculate the left column's height autimatically then add say 20px onto that for the height of the middle column. Not sure if that would be possible.

Sorry for all the long questions, I just want to get the coding of the base template right before I move onto writing the actual website content and integrating it into wordpress.

Thanks in advance for any advice given and other tips to improve the design.

[ScottR]

I personally think the website looks good the way it is.

1. I would make the image a background image, then add your text as links. Add the hover effect on the div that contains the background image.
2. The Javascript is fine. I would leave it.
3. To get the text to change when hover the image, you have to use javascript. Write a mouseover script that changes the text link when the image is hovered over.
4. Start writing your script. Look into different methods to achieve what you want to do.

[mikka23]

Thanks for the info, I will try to change it a little.

[masonbarge]

1. There are too many hover styles. Links are black to green, black to orange, black bold to blue, green to blue. Boxes turn darker on the left (very nice graphic btw), lighter on the right, and underlined in the center col.

2. Unnecessary whitespace at the bottom of the center col.

3. I'd keep "custom design" and "cms" in the graphic; it will look better.

4. The "info" box is a matter of taste. To me, it's gimmicky -- I'd prefer just to see the info displayed.

5. I haven't looked at the possibility of resizing a center column based on left column content in over a year. When I last tried, I decided it was impossible. If I was to try to do it today, my first thought would be javascript, since the first hurdle is reading the rendered height of a column. Server side, afaik you would have to create some sort of proxy for column height, like counting characters and tags, then multiplying the values by line height, but it would be a mess and would inevitably fail in some cases.