Ok, so here is a design idea - (CSS?)

Ok, this may be asking too much, but I have this design idea - http://tmh.netdbs.com/turnkey2.jpg But insofar as laying it out with CSS, I just am not sure where to begin breaking it apart and creating various divs so to speak, the main white area is where I will lay out various <P> tags and won't have a problem with that, but it is getting started that challenges me. I'd appreciate some feedback on how to approach this. TOm

Hi

It could be done quite easily. First, break the image you have into:

1. The key, with a white background. Set this in the body style as a background image no repeating.

2. The top banner (without the key). You could set this as the background of the header div, with the div having the same blue color as the banner. No need for this to be longer than the end of the 's' at the right.

3. The sidebar background (no buttons). Only the top white bit, the blue and the bottom white bit. Make the background green as per the bottom of the side bar.

Now, as to the body text area, you have three choices as to where to start the text.

A. Below the top banner and to the right of the key. Then do you wrap around the key to align more with the sidebar?
B. Below and to the right of the key, leaving tons of whitespace above and to the left.
C. Below the key, but next to the sidebar, leaving a lot of space above.

I would go for A and use the first line(s) for the page title.

What do you think? I guess I could knock something up in an hour if you wanted? Let me know.




Trevor

Trevor, thanks for the offer, let me give it a go as that would be the best way for me learn, right? Thanks man. Tom

Hi

yeh, no probs.

It was so like another page I had done, so I already did it.

So, if you don't want to see it, don't go here (i will take this off after a week):

http://207.44.137.103/turnkey.html




Trevor

You might dig into this Max Design article.

cheers,

gary

Thanks Gary. That site is great. Trevor, that link you put up is a 404. If it is still available, I would be insterested in studying it. Tom

Whoops

<brain style:"speed: goslow">doh</brain>


I've edited the post and put the correct ip address in!



Trevor

Hey Trevor, whats with the .png images, are they widely supported enough to know use them, and is there an advantage such a file size???

Trevor, also, the site is not laid out properly in Netscape 7.1 Do you not consider this in your programming... Not that you should, mind you... Tom

Hi

I haven't had time to check out NN7, but it doesn't surprise me!

png is supported by all modern browsers. Your images were low in color count, so a compressed format like this works fine.

png is, except for really simple files, often better than gif (which is the subject of patent problems anyway). jpg is good too, but better for complex images. I am sure a better discussion could be had on this.

I will download NN7.1 and look into it.




Trevor

Hi

I've uploaded a revised version!

A design change to add a footer for copyright. I wanted to do this to see if this would stay in the right place. Note that the menubar div is positoned 100px down fom the top. The bottomcenter div has a margin-top of that same 100px plus 17px for spacing.

Navigator had a problem with the margin-top on the button text. IE correctly used this to space it down from the top edge of the button image, but navigator put the margin above the image! I used padding-top instead for this one dimension and both render the same.

Navigator has a real problem with background colors in columns. You will see two non-breaking spaces which do not really do anything, and are not needed by IE, but Navigator will not render correctly without them.

You asked about png vs jpg. IE cannot render a png correctly (it substitutes colors incorrectly I found) unless it is a 16.7m color png, which renders this choice useless as jpeg with a compression factor of just 1 will compress much better. Well done Microsoft. I see IE can't render alpha layers either for a png.

The sliced jpegs still saved about 40kb compared to a full page background.

I have also checked the code with Opera 7. Also looks OK.

BTW. When downloading Opera 7, I got the version with Java. Aaagghh.

How can Sun seriously distribute this rubbish? Running java locks my system up. Getting it off took ages and many lockups. Checked for other user comments on the net t find many similar remarks. Java v1.4.2.02 (I think that was it). I used to have 1.4.1 a while ago and that was fine. Roll on v1.4.3 or 1.5 or whatever.





Trevor