Layout Troubles

They have: 5 posts

Joined: Jul 2005

Hey guys,

I have just created my layout in photoshop and created all of my slices. Now when I open it in dreamweaver and delete a sliced area it bumbs everything below it up.

examples:

Before: http://img449.imageshack.us/img449/2151/before2um.jpg

After: http://img449.imageshack.us/img449/6296/after1oc.jpg

thanks in advance for any help.

demonhale's picture

He has: 3,278 posts

Joined: May 2005

actually we can help better if your links were the actual site itself... the problem would be on the tables tags like the tags which should be inline with the image tags...
Nice Template BTW...

They have: 5 posts

Joined: Jul 2005

ok thanks mate

They have: 5 posts

Joined: Jul 2005

still having some trouble. Can someone point out to me what is wrong?

Quote:

layoutv2

Busy's picture

He has: 6,151 posts

Joined: May 2001

should be 11 and some of the heights may be wrong, like the tables height, depending on the actual size of images

may be other errors but thats one that stands out

A tip: when creating a layout from a sliced image remove all the width and height tags from the images that will be backgrounds and either use background= in the td tags (as temporary measure) or go straight to making CSS classes or id's depending on if you reslice the image (hence the reason background= may be faster and easier).
If all else fails move your images from the images folder (or where ever they are) and set table border to 1, this will display the outline of the table and is best used to pick up 'lost' cells

demonhale's picture

He has: 3,278 posts

Joined: May 2005

One other thing put closing inline with the tags
Example:

should be

and a border collapse on your table tags...

Roo's picture

She has: 840 posts

Joined: Apr 1999

Actually...

When you slice up in Photohsop and use it's export thingy, if the slices aren't exact you will have lots of 'spacer' images. These will be small slices of varying sizes. Photshop generates the layout accordingly, so when you delete a slice it will throw the whole thing off.

You best bet:

Rather than slice a whole layout like that just crop out the parts you need, save them, and build your layout from the ground up.

Roo

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

I agree with Roo - I looked at your screenshot there and it looks like photoshop did a lot of wacky things, cutting graphics up in strange palces etc. If you're going to use the slicing and export you have to be really really careful about where the slices are and how they line up. When you draw your slices you need to firstly make sure that none of your key elements get cut through the middle (like the header box above the content area) and secondly, keep in mind that this is going to be put into an HTML table that needs to function properly.

With all that in mind, it's generally just eaiser to crop it yourself and export each section separately. OR (and this is what I used to do) slice it according to the elements you need to put into your HTML but DON'T use Photoshop's HTML. Create your own table and plug in the images where you need them.

Roo's picture

She has: 840 posts

Joined: Apr 1999

Grab your page guides from the rulers and align them with where you want to slice. This gives you accurate selections, and you won't have leftover pieces/parts from one selection hanging onto another.

You do this by showing the rulers, and using the select tool to drag them from the top and side.

Roo

They have: 5 posts

Joined: Jul 2005

thanks for the help guys, all fixed Smiling

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.