As you can see i have sliced this picture from fireworks, then pasted it into dreamweaver, that makes it all in tables.

 

However it mucks up and goes off point, i think its because of the spacer gifs? the border around my picture is all mucked up aswell becasue of this.

 

would it work better if i done the slicing in photoshop? how do i this properly?

 

thankss

Edited January 12, 201115 yr by kingy da killa

In all honesty you would probably end up with the same results no matter what you slice it in.

 

Why are you using such a terrible method of creating a site anyway, it would be quite a simple one to code with html and css, instead of relying on slicing the image and letting a program code if badly for you.

 

coding it:

2 cols with a header and footer

 

header, cut the logos out of the fireworks document and a thin slice of the grey (full height with 1px), have the thin slice as the background in your css, float 2 images left one image right.

 

Sidebar (left side): have this as a big image if the things inside aren't that important, if they are then cute each of the images out and place them in lists for each section.

 

Main content: save the green grid with the lines - the boxes that you are using as links, cut the links out individually. When coding set the css for this div add position:relative to it. Then create an absolute positioned element for each of the links and place them in the correct position using top, right, left, bottom positioning. The white box, again abosolute positioned with real text in it so that screen readers can read it. save the logo at the bottom as a transparent png and again position absolute.

 

footer: css background colour grey, border top darker grey.

 

 

 

Hope that helps, as if you want to learn to create sites properly (as I know you do) you shouldn't rely on something like fireworks to code a site for you, that's cheating

http://www.webdesignerforum.co.uk/topic/44392-is-this-possible-to-turn-into-divs/page__p__278924#entry278924

 

i tryed doing it in divs check that :/

 

but ill try follow your steps ill get back to u in an hour or 2 lol

 

and i wouldent usally create a site like that lol! tables are bad i no :/ but its hard to get this all working and you no i lack skills with the floats and abosulte positioning... once i got them under my belt ill be raring to go

 

thanks for your lengthy reply

Its not just a table that is the issue with slicing, its all the pointless images, and having text as an image and the amount of code it creates to make a very basic layout like the one you had linked too.

 

Plus web design is all about challenges and figuring out how to overcome some coding issues, yes slicing is the easiest way, but you'll never learn anything new or how to do it for yourself if you keep taking the easy way out

 

 

 

I'm guessing as you never replied back you managed to do it...so BIG well done

I dont keep taking the asy way out btw that wasent really a site just a project for my company to show clients. I will always create a website with divs instead of tables lol! promise

 

Bassicly i was going to do what you said but 'position:relative to it. Then create an absolute positioned element for each of the links and place them in the correct position using top, right, left, bottom positioning' confused me.

 

If i was to make the green squares a big div, then left to it all that usefull stuff in another div.

How am i ment to put all them boxes(which contain the links) postioned where i want them by using top, right, left etc.. it would have to be with pxs ( 1px left, 20pc down or something)??????? so i didden understand and just left my sliced version

Edited January 13, 201115 yr by kingy da killa

in div 3? is this where i would do position:relative

then all my links where are blue would be???????

 

im off for lunch now but ill be back to read !

Edited January 13, 201115 yr by kingy da killa

yup

 

The reason for this is when you use absolute positioning it will position your div to that position in the browser window, which means if someone is using a different resolution to you the div would be the wrong place. However if you have a div with a set width and height and with a relative position, then place the absolute positioned div in there makes the relative div acts as a container for them. So instead of the whole browser window setting the position its just within that one div. Which means it will look the same on all resolutions.

 

Hope that makes sense as its quite hard to explain.

I understand

 

well i have to create another one of those projects today & tomorrow (to work on it) so ill send linky if i manage to do it and you can praise me that or ill be askign you for help

YES dizi your a ledgend

 

I have succesfully managed to do everything you said by myself! I sound like a child... wheres my gold sticker!! Either way I feel like ive gone up a level in html/css. thanks