CSS produced by photoshop.....

[pelsar]

i'm looking for some "shortcuts" as i delve in to the world of CSS/DEV/Class/ID/....

using photoshop as the design software, cutting up the image and exporting as xhtml (with its classes etc)...seems to be a good way to get started. The coding looks pretty straightforward as CSS....and then i modify the CSS to adjust, add text etc

Is there such a thing a poor CSS coding? and if so what is the quality of photoshops?

 

[Sdashiki]

Does photoshop even output CSS? Doesnt make sense to me that it could or would.

Photoshop makes images.

CSS/HTML is a txt based language.

photoshop is used to mockup a website, but if using CSS and not, say, imagemaps or something hideous, you dont use it at all in your coding process.

 

[angelwatt]

Does photoshop even output CSS? Doesnt make sense to me that it could or would.

Photoshop can slice and dice an image and output as HTML/CSS.

Yes, there is such a thing as poor CSS coding, but I haven't looked at what Photoshop creates, but I'd beat it's a little on the bloated side. Not sure how poor or un-poor it may be though.

Here's some suggested and related reading from ALA.

 

[SrWebDeveloper]

I've talked on MacRumors about using Adobe PS for slicing into div's with CSS and I can attest in my experience it produces decent CSS. There are advanced options if one desires to affect the names of the slices, filenames of the images, specify by ID, class or inline.

The resulting code for my projects was not bloated. To me bloated is exemplified by native DW markup for rollovers and menus, etc. That's bloatware! Big time. Nothing like that to report in PS slicing->div/CSS.

As always, liquid layouts require a little planning in advance and a few changes to the CSS which assumes static width and heights. Planning means naming slices intended to be background images for stretching with "dyn_" prefix or something so they're easily identifiable in the code. The CSS changes in such situations might require removing height and/or width, adding background-repeat: repeatx and/or repeaty - depending on the layout, of course. All in all, saved me a ton of time using PS for this purpose.

I'm surprised more people don't use the slice->div/css feature, maybe its due to the perception PS is "too complex" or it's not $39.95.

-jim

 

[pelsar]

great link....

Photoshop can slice and dice an image and output as HTML/CSS.

Yes, there is such a thing as poor CSS coding, but I haven't looked at what Photoshop creates, but I'd beat it's a little on the bloated side. Not sure how poor or un-poor it may be though.

Here's some suggested and related reading from ALA.

just what i needed....the guy is 'talking to me"...simple and to the point, not childish, not to technical.

 

[pelsar]

container problem......

I've talked on MacRumors about using Adobe PS for slicing into div's with CSS and I can attest in my experience it produces decent CSS.

I'm surprised more people don't use the slice->div/css feature, maybe its due to the perception PS is "too complex" or it's not $39.95.

-jim

i've gone to "imageready to produce the CSS of the single reason that its produces a "container" (remember, this is going to take time..one small step at a time)

"ImageReady exports the CSS slices as divs and wraps them in a container div called “Table_01.” Rename the “Table_01” div (to “container”, for example) and style it with CSS as you see fit. "

however the second i start making the "internals divs "relative, the second one (the first doesnt move from its position) jumps from its position....downwards as do all the others.....any ideas?

http://www.vistaspinner.com/container_exp/index.html

 

[SrWebDeveloper]

You need to learn the basics of div layouts, such as float or clear and absolute vs. relative vs. static positioning and when to use which one.

FLOAT RULE #1
You can float elements to the right or the left. Any element that follows the floated element will flow around the floated element on the other side.

POSITION RULE #1
If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go. The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.


Here are links to help you understand the basic concepts, then you can fix your own source:

Float -> http://webdesign.about.com/od/advancedcss/a/aa010107.htm

Position -> http://www.barelyfitz.com/screencast/html-training/css/positioning/ (also covers float)

-jim

 

[HomeBru Studios]

Photoshop won't bloat. It only specifies the minimum info (margins and such) that are required to re-glue the slices on the HTML side. If you name your layers in Photoshop, it will use the names for the CSS IDs.