CSS 'fix' needed for fixed coding in website design

[varocketry]

All:
My son has created a neat site for a business he'd like to start while in school.

http://www.techcheckuva.com His website

He has a great design eye and created the site in Photoshop including text and all was output as IMAGE slices. So it's pretty but not readable by search engines (all text is actually small jpg files).

I've spent some time and rearranged the Photoshop file's slices and found how to make some SLICES work as editable text areas for the site's content. I've saved it in CSS in Photoshop for the slicing.

http://www.techcheckuva.com/ComputerTips/indexsliced_V4.html
My attempt to make text readable and clean-up PS slicing and use of CSS.

Interesting how the CSS renders the problem of the underlying HTML code being larger/longer than the image slices.

My son is working to embed the correct font into the site but I hoped someone might have an easy solution to the Stretchy text box and border image problem. Aren't there techniques for tiny slices to fill the stretched border space seamlessly?

Many thanks for any Ideas or assistance.
Jim

PS Great site I found you today, much to learn here.

[coothead]

Hi there Jim,

and a warm welcome to these forums.

Check out the zip file here...

• http://www.coothead.co.uk/varocketry.zip

...to see a reworking of your page.

Hopefully, you may find it illuminating.

[varocketry]

Thanks Coothead.

I spent all weekend working up the Dreamweaver Dev Forums CSS website design and build tutorial recommended by Nancy. It rained so no kids soccer this weekend. I believe I have a stronger beginner's familiarity now.

So I'll check your rework out immediately and I appreciate your kind efforts on my behalf.

Ciao.

[varocketry]

Wow, thank you. Very clean code.

It has all the structure I was learning this weekend but I see several areas I'll have to study the CSS to see how the background images were handled. I was somewhat close in my creation of SLICES last night in Fireworks in my TESTSITE.

Interesting that Dreamweaver CS3's DESIGN VIEW renders the CONTENT areas content off to the right of the main container. But when viewed in Browser output it all renders together perfectly.

This'll give me a big jump and jump-off point to create the PAYPAL and FORMMAIL pages my son needs.

Thanks again CootHead.

[coothead]

No problem, you're very welcome.

[varocketry]

Coolhead -

Ok the top.jpg was a slice of the entire top of the site used as a background inmage in the #header.

You created a cool navigation slice that is overlaid on the header but I don't see how you used it to change the LINK images from a1 to a4. I would have guessed calling a1.jpg slices, etc but I don't see that being done.

Can youu coach me a bit more? I want to create the other four -five pages based on your jump start. I can follow most of it with the benefit of this weekend's studies.

Thanks CH.

[coothead]

Hi there varocketry,

this is commonly known as the "Single Image Rollover Method".

It has the advantage of not relying on javascript or the need for pre-loading images.

This means that the rollovers are always very smooooooooth.

I feel certain that you will find all the necessary instructions at one of these links...

• http://www.google.co.uk/search?q=css+menu+using+sprites