[stylin328]

Hey guys and girls. So Im used to just slicing my designs in photoshop then exporting them into html then going in and cleaning the code and so on. I a designer and dont code much so I jsut use the photoshop thing and hand it off. But anyway, I wanted to get into coding with css b/c i understand its kinda of the standard now.

My question is are there like applciations that I can export the slices into css rather then html. I think it would be easier for me to see the final site in css then learn it from reading the finished code. Just a question, Thanks for all your help.

[Transmogrify]

To be honest, you don't want to think of a css based layout as "slices". I know photoshop will export images sliced with CSS rather than tables (or maybe it was fireworks which does that?) but the "sliced" css it generates is awful. You need to look at a design and break it into individual components.

Not an entire design need be images, for example you might have a left hand column which is a big block of green. No need for that to be an image, you have a div block with a green background. You might have a menu bar which is a complex image.. now that might want to be sliced up. But then your HTML in the background wouldn't be divs, you'd use an unorder list for example and each list item would contain the image, or alternatively you could set the background for the list items to be the image.

My magazine site, for example, www.scuz.info, is an example of how you can have a heavily image based menu bar. Looking at that code,

<div id="headerContainer"><h1 class="oldContent">Scuz Mountainboarding Zine</h1></div>
<div id="menuBar">
<ul>
<li><div id="homeButton"><a href="/"><span class="oldContent">Home</span></a></div></li>
<li><div id="spottedButton"><a href="/spotguide"><span class="oldContent">Spotted</span></a></div></li>
<li><div id="issuesButton"><a href="/?page_id=2"><span class="oldContent">Issues</span></a></div></li>
<li><div id="galleryButton"><a href="/gallery"><span class="oldContent">Gallery</span></a></div></li>
<li><div id="blogButton"><a href="/wiki/"><span class="oldContent">Wiki</span></a></div></li>
<li><div id="clubsButton"><a href="/clubs"><span class="oldContent">Features</span></a></div></li>
<li><div id="directoryButton"><a href="http://directory.scuz.info/"><span class="oldContent">Web Directory</span></a></div></li>
<li><div id="forumButton"><a href="/forum"><span class="oldContent">Forum</span></a></div></li>
<li><div id="shopButton"><a href="http://scuz.spreadshirt.net"><span class="oldContent">Shop</span></a></div></li>
</ul>
</div>

That is what makes up the menu and the css for one of the buttons looks like

#homeButton {
	background: url( '../images/homeButton.gif' ) 0 -82px no-repeat;
	width: 69px;
	height: 41px;
}

#homeButton a {
	display: block;
	overflow: hidden;
	width:100%; height:100%;
	background: url( '../images/homeButton.gif' ) top left no-repeat;
	width: 69px;
	height: 41px;
}

#homeButton a:hover {
	background-image: none;
}

If you look at the headerContainer, it contains a background image like,

#headerContainer{
	background-image: url(/images/header.jpg);
	height: 100px;
}

Not sure if this has made anything clearer or if it's made it more confusing but there you go. It's not really about automatically slicing an image, it's about breaking it up and seeing what has to be images and what can be css generated. Bit more to it than that, but takes a bit of time/practice.

[stylin328]

Your the man, thanks so much.

[pgo]

Why the superfluous <div>s? You could just use the <li>s couldn't you? Feels like markup overkill.

[LadynRed]

There is a plugin for Photoshop called SiteGrinder that does spit out valid XHTML and CSS. From what I've seen of it so far though, it's hardly optimal code.. seems to suffer from div-itis for one thing, but what can you expect ?

You want to learn XHTML and CSS, try this book:
http://www.sitepoint.com/books/html1/

[Transmogrify]

Originally Posted by pgo

Why the superfluous <div>s? You could just use the <li>s couldn't you? Feels like markup overkill.

Yeah, it was! I've since (not on that site) changed my ways. I just can't be arsed to update that site.