Member Avatar for mikeandike22

Here is a very short tutorial on how you can set your photoshop to produce Divs and CSS rather than the old fashion tables. This is very useful becuase this is becoming the new way to work with web pages and lets you add a lot more room to do stuff that wouldnt be possible with non expandable tables.

ok once you have a document sliced and everything and you optimized all the images when you goto the "Save for web option"
[IMG]

you will notice a little arrow next to your presets and on the border of the box with the image options
[IMG]
click that box and select "Edit Output Settings" from the drop down menu.

This will open up the "Output Settings" dialog box. In here on the "HTML" settings page you want to:
Select the Output XHTML box
Set tags case to: lowercase(body)
Set attribute case to: lowercase(rowspan)
and you can pretty much leave everything else default.

Then from the drop down menu where it says "HTML" select "Slices". All you need to do here is change the "Slice Output" setting to Generate CSS and from the drop down menu select By ID.

And finally you want to save the profile so click the save button and save it to whatever you want. Just remember when you click save on the "Save For Web" dialog you need to change the settings in the save dialog to whatever you saved it as. I just saved it as default because I always use it.

Now you have a fully functional Div and Css layout and you are no longer stuck with the limits of tables.

Edited by pritaeas because: Closed to avoid resurrections
  • 3 Contributors
  • 2 Replies
  • 814 Views
  • 4 Years Discussion Span
  • Latest Post Latest Post by MindSter

Dani AI

Generated

A compact troubleshooting note that ties the posts together: the Photoshop export trick from is useful and is right that margin: auto is the standard centering technique — but that only works when the element is a block in normal flow and has a definite width. If the exported slices (or their container) are out of flow, auto margins will not center them. (developer.mozilla.org)

A common cause for Dreamweaver-imported slices sticking to the left is that the Save‑for‑Web CSS places each slice as a positioned layer (left/top/width/height). In that case give the whole exported layout a centered wrapper with a set width (or max-width) and position: relative so the inner absolute slices stay positioned while the page is centered:

/* wrap the Photoshop HTML once and keep inner slices positioned relative to it */
.site-wrap {
  width: 960px;      /* match your exported layout width */
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}

Inspect the generated HTML to find the root id/class before editing — PS often outputs per-slice positioning. (community.adobe.com)

If the exported container itself is absolutely positioned, use a centering method that works for positioned elements (no need to know the element width), or switch to a modern layout: 

/* center an absolutely positioned root */
#ps-root { position:absolute; left:50%; transform:translateX(-50%); }

/* or make the shell a flex container */
body { display:flex; justify-content:center; }
#ps-root { width:960px; max-width:100%; }

Both approaches are commonly used; the left:50% + transform trick is reliable for absolute elements, and flexbox (justify-content:center) is the modern option. (stackoverflow.com)

Notes: ensure a standards DOCTYPE so browser centering behaves predictably (quirks mode breaks some centering behavior), test with browser devtools to identify inline styles or floats, and treat PS-generated HTML as a starting point — it usually needs cleanup for responsive, maintainable sites. (devdoc.net)

Recommended Answers

All 2 Replies

Member Avatar for webeon

how do i center the design after loading the slices in Dreamweaver? No matter what I do, they always seem to alight to the left...

Member Avatar for MindSter

Here's how to center a div:

<div id="divid" style="margin-left: auto;margin-right: auto;">
Blah
</div>

Thanks mikeandike22 for the tip!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.