Yea, sometimes it takes two books to level table legs . . .




LOoking at ordering the book myself, thanks for the heads up Inger.

We may be three people helping each other then

Inger...you can start us off by setting up the lessons! Give us some homework to get our teeth into! But wait for the book to arrive first...I'll give a shout when it drops through the door. Right now I am getting tangled up into how to devise a plot for my creative writing!

Well, I can try...

But we should possibly have a different forum for that?

I see that Esther, the one who started this thread, hasn't fixed her css for her site yet. I'm on a laptop with a 1296x786 monitor right now, and it looks ok in that resolution, but if I change to e.g. 1024x768 or something, the layout goes apeshit again.

I'd like to get in on the "lessons", if I can find time...

Don't expect too much of those 'lessons'! I'm not even half-way through the book and struggling with some of the things...

Ok...after I get through my pizza I will pull out the code and take a look myself. Maybe I can find a different route...a few heads are often better than one. As for the HTML5 and stuff...if we struggle together we might still be able to help one another on that too...

It will be interesting to see if you come up with something different from what I did.

Hi Esther...
I have had a go as well and have come up with something slightly different.
http://www.venicedigital.com/cc/esther/esther-home.html

To begin with I have brought your bottom menu up inside the container because I notice that its behaviour is very erratic...it changes height according to which page it is on and the content the page contains. Keeping it inside the main container I think you will find that it should remain constant.

Your header image is now a background image in the css code so the space for the image is left between the header divs, but it is not necessary to actually add the image name there...hence the apparently empty space in your html.

I have left space for your horizontal menu, but not having the flash file, I have had to make a few guesses about space according to the code I could see on your page for the horizontal menu.

I changed the name of your container from all-content to container...that was really to help me to find things but you could quite happily change that back to your original id name of course.

I did as Inger did, floating your two body images to left and right so that they aligned horizontally. I didn't bother to resize them but just compensated for the difference in size by adjusting the padding around each of them. Their position is relative to the outer container, and so I have not used any distance positioning except by the use of padding and margins. I have also used a layer position as they just disappeared behind the background without it!

As for the instructions...they are in their own div box telling them where to sit centrally positioned on the page relative to the outer container and not to the whole page. You have to be careful positioning things absolutely because this won't work with all screen resolutions of course.

So as we can see...putting this right has been open to several interpretations. I see that mine works ok in the usual 5 browsers (opera, ie, safari, firefox and chrome) and in my usual resolution of 1440 x 900 and also tested on all browsers at 1024 x 700.

Now just take your pick. You can pick up the css file by doing the address of the page above, replacing the esther-home.html with massagefrog.css