Hi i recently did a tutorial in photoshop in creating a webpage where you slice up the images etc... my question is, is there a way of making it so that the sliced images match the users resolution? i'm thinking a mix of css and/or tables?

 

thanks

I don't understand how you can match the resolution of an image to the resolution of a screen. If an image is 100px x 100px then it will display as 100px x 100px on all screen resolutions.

 

Also, stay away from using tables as layout designs. Standards have come a long way since then and the given way is to use the <div> tag principle and CSS to control layout.

I don't understand how you can match the resolution of an image to the resolution of a screen. If an image is 100px x 100px then it will display as 100px x 100px on all screen resolutions.

 

Also, stay away from using tables as layout designs. Standards have come a long way since then and the given way is to use the <div> tag principle and CSS to control layout.

 

 

Ok cool. I kind of knew about the div tags in css but i notice alot of designs scale with screen resolutions... I was wondering how they did it? do they design the sites using photoshop and slice or just pure css with images in the right places?

Ok cool. I kind of knew about the div tags in css but i notice alot of designs scale with screen resolutions... I was wondering how they did it? do they design the sites using photoshop and slice or just pure css with images in the right places?

 

Ahh I think what you're referring to is a fluid layout. min-width and max-width in css are the properties you're looking for. Beware though, IE doesn't take too kindly to these but there are many workarounds.

Ahh I think what you're referring to is a fluid layout. min-width and max-width in css are the properties you're looking for. Beware though, IE doesn't take too kindly to these but there are many workarounds.

 

ok thanks for the replies, So am i right in saying that websites are still designed and sliced up in photoshop and then those images are incorporated into css? or have i got it wrong?

That's one way of doing it, yes. Slice. Format with HTML. Style with CSS.

 

Then pull your hair out testing it on every browser.

That's one way of doing it, yes. Slice. Format with HTML. Style with CSS.

 

Then pull your hair out testing it on every browser.

 

So is there a better much easier way?

So is there a better much easier way?

 

VOODOO? Hah. Honestly mate not sure, it's the tried and true method to getting pixel-perfect designs, though it does take some skill to master CSS across multiple browsers. I've worked in places where developers used Fireworks and sliced PNG's. That was some of the fastest work I'd seen since the interface is slightly different to slicing and saving for web in photoshop.

 

Ultimately it still comes down to experience and knowing how to design correctly for a browser from the outset. And practice.