How did they do it?

tania721's picture

They have: 39 posts

Joined: Aug 2001

Hi Smiling

I just came across this site and liked the design and wondered if anyone could explain to me how the overlaps and everything worked...when I use overlaps in Dreamweaver it brings up alerts saying two layers overlap and it can't be converted to a table.
Also, the pictures used around the edges seem to load really fast despite their size...is there a trick to this?

http://www.sarahfan.com/index.html

Thanx, Tania

`Imagination is more important than Knowledge' ~ Albert Einstein

McPhilly's picture

They have: 62 posts

Joined: Aug 2001

Well the pictures didn't load that fast for me.

And what is overlapping ?
I can't see it, I must be blind. I see lots of images sliced up and put together in tables.

Nice site though.

tania721's picture

They have: 39 posts

Joined: Aug 2001

I'm only on a 56k modem...they seemed relatively fast for me...faster than the menu bar on my own website which is made up of sliced pics and only two colours.

The main section of the page, the white rectangle, is overlapped by each of the pictures surrounding it, as the page loads you can see the curvy edges going over the top of the white rectangle...

I can see how the edge bits are all spliced and fit together...but if the whole lot were spliced then wouldn't you just see a whole bunch of pieces fitting together like a puzzle in one layer?

`Imagination is more important than Knowledge' ~ Albert Einstein

The Webmistress's picture

She has: 5,586 posts

Joined: Feb 2001

If you actually look at the source code she has it set up as 1 main table with 1 row & 3 columns then the images put into cells & tables within that with the main text in the centre column.

If you want to do an elaborate design like this it's best to construct the whole thing in a graphics program then slice it up into smaller segments to piece together into tables in DW or other editor. You can't physically use DW to overlap images in tables unless you stick to just using layers then you get all sorts of browser problems.

The best way to see how something is done is to go to the site you like, view the sorce & copy it then in DW paste as html into a blank page. Obviously you'd do this just to see how it's laid out as the pictures won't show but it is a good way of getting to grips with page layouts using tables.

Julia - if life was meant to be easy Michael Angelo would have painted the floor....

McPhilly's picture

They have: 62 posts

Joined: Aug 2001

Quote: Originally posted by tania721
I'm only on a 56k modem...they seemed relatively fast for me...

Well im on a 28.8 k modem Smiling

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Yeah, nothing's really overlapping here - it just looks like it is.

Quote: Originally posted by The Webmistress
The best way to see how something is done is to go to the site you like, view the sorce & copy it then in DW paste as html into a blank page. Obviously you'd do this just to see how it's laid out as the pictures won't show but it is a good way of getting to grips with page layouts using tables.

Even better - save the page in IE - it'll give you the option to "save webpage complete" which will give you all the source files.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.