digg

Join DiggAbout

Discover and share the best of the web!
Learn more about Digg by taking the tour.

Learn to professionally slice in CSS with this 9 page full-featured guide!

cssslicingguide.com — A concise, 9 page full-featured guide for anybody who is interested in becoming a CSS web designer, CSS Slicing Guide teaches you how to take a layout straight out of Photoshop, or infact any graphics program, and turn it into fully standards compliant XHTML and CSS with superfast loadtimes. Check it out!

Bury
show profanity settings
expand all
  • Zipbob, on 10/12/2007, -3/+68Finally something to stop people just throwing out photoshopped (bite me) table-based layouts
    Simple and worth a look if you're learning how to use such techniques
    • tinapaal, on 10/12/2007, -6/+22very good indeed. Since I am a noob in CSS, I defintively see the value in this tutorial.
      Dugg.
    • GawtMilk, on 10/12/2007, -2/+65Dugg for avoiding the obnoxious "®" fad.
    • AvengeX, on 10/12/2007, -40/+4'®' Fad? What do you mean? Never heard of that one before.
    • Lone07, on 10/12/2007, -10/+20Definantly a guide starting point for those switching from table based to more CSS orienated designs. Good to see also using 'em' for fonts rather then fixed pixel size.

      My only grudge is the lack of use of CSS shorthand techniques but I guess that might be more suited for a second article?

      For example:

      #container {
      width: 800px;
      margin: 0 auto 0 auto;
      }

      ---- Becomes

      #container {
      width: 800px;
      margin: 0 auto;
      }
    • rodeosmurf, on 10/12/2007, -6/+81Definantly? Seriously man?

      http://www.digg.com/offbeat_news/D_E_F_I_N_I_T_E_L_Y
    • yonis, on 10/12/2007, -3/+18Photoshop tip of the day: Using the rulers for measuring pixels is absolutely ridiculous. Have Photoshop do it for you.

      Open up the Info palette (Window > Info) and select what you want to measure using the marquee. Any marquee will work, rectangular is best. If your measurement units are set to pixels (Preferences > Units & Rulers, or double-click a ruler), you'll see the pixel measurement of the selection in the lower-right box.

      The info palette is useful for other things as well, such as measuring the opacity of any given area of an image – though you have to turn it on, by going to the upper left triangle button and selecting "Palette Options..."
    • yonis, on 10/12/2007, -3/+4Sorry, the triangle button is in the upper right.
    • mesoed, on 10/12/2007, -9/+2Any chance that CS3 uses CSS instead of tables?
    • troydoogle7, on 10/12/2007, -0/+7dugg... because of the bite me....

      more posts should include bite me..

      I will photoshop up some screengrabs using my coreldraw program (bite me too!)
    • rastakid, on 10/12/2007, -2/+2Lone07: just run your CSS through www.cleancss.com after you're done.
    • nicepants, on 10/12/2007, -4/+16I guess the "superfast load times" don't apply to the site offering the tutorial...
    • kevin45, on 10/12/2007, -0/+8It doesn't matter what design is thrown in front of you. Once you grasp document flow, box model, and div stack order... you can do anything you want. Doesn't matter how complex the design is.
    • Lorddias, on 10/12/2007, -5/+37Damn I thought this meant how to use a knife efficiently in Counter Strike Source.
    • noblepenguin, on 10/12/2007, -0/+2@yonis

      or just use the "measure" tool.
    • Zipbob, on 10/12/2007, -8/+3..Let me try again.
      In Soviet Adobe(R) Photoshop(R) enhanced Russia, first post RLY -bites- you.
    • jer2eydevil88, on 10/12/2007, -0/+2I am new to this whole using em instead of just defining pixels, maybe someone here can enlighten me as to why this is better?

      As for anyone else who wants to play with em instead of using pixels but hasn't a clue where to start,
      http://riddle.pl/emcalc/
      there you go.
    • Birdoftruth, on 10/12/2007, -0/+1amen brotha
    • Cmain, on 10/12/2007, -0/+3I suggest a book called "Bulletproof Web Design" to anyone looking to get into writing the cleanest code they can. It really has some of the greatest CSS tips I've seen.
    • codenexus, on 10/12/2007, -3/+7Re. Tables;

      In all my years of designing websites I've not yet heard a definitive reason for using CSS layouts only. In quite a few cases its just a bit of snobbery and no practicality. Sure I could spent the rest of my life will be spent trying to get a basic layout working across all browsers properly in CSS when it could be a simple table layout.

      However, don't get me wrong, I know there are some serious shortcomings when using tables. At the end of the day however if you have limited time and need to get something made from scratch that is pretty solid up quickly you have to seriously consider tables.

      I have had people say "Oh well you must be just a useless designer...". Sure could be but I point out their sites may not layout in all browsers as expected. Usually I go check and sure enough... *sigh*.

      So my advice. Learn CSS layout techniques but also know tables to fall back on. If you bow to peer pressure and go pure CSS it can be bad, ugly bad and such a time waster!

      There that should stir things up. :-)
    • slythfox, on 10/12/2007, -1/+2Or you can just not create design layouts in photoshop and not have to struggle with getting it to look how you wanted it to look in photoshop. Why do people create layouts in photoshop anyway.
    • Cmain, on 10/12/2007, -0/+5The general idea of making your layout in Photoshop is to get how you want it to look before you begin to code it. Generally I will create my layouts in Photoshop, cut out any images I need, and then code the frame by hand.
    • AvengeX, on 10/12/2007, -0/+2Or you could follow the fad of this man here: http://maddox.xmission.com. No tables, just pure text love!
  • xDieStarDiex, on 10/12/2007, -0/+4Very good, in depth, tutorial. I've had a hard time finding a well written tutorial on slicing and coding photoshop layouts. My search ended here.
  • bradpurchase, on 06/12/2008, -1/+5Very nice. Dugg.
  • PsychoticDude85, on 10/12/2007, -4/+19Not that good, suffers somewhat from divitus (especially in cases like that clear div, and using a div for the footer), using id names like "left" or "right" is something one should avoid (since you might one day want another style which places the column somewhere else and then the id has less than no meaning).

    Perhaps something a newbie might be interested in, but I wouldn't recommend it much since they wouldn't realise that some of the things going on are mistakes.
    • noahhoward, on 10/12/2007, -1/+15Why not contact the author and see if you can get him to change it. If those of us who actually do this professionally find and correct those mistakes then we can break the cycle of lost and wrong noobs.
    • chris9902, on 10/12/2007, -2/+7there isn't really a wrong way to do it. Most of these sort of mistakes can be fixed with common sense. Most CSS sites do a good job with best practices but it's really what works for you. As long as you don't use abstract naming (I'm looking at you Visual Studio) then you should be OK. And comment your damn code. comment, comment, comment.
    • Ruhtar, on 10/12/2007, -1/+1What is worse, stacks upon stacks of tables or div within a div within a div within a div,,,

      This, to me, is nothing more than Dreamweaver on Steroids.

      It may use divs instead of tables but it still does so blindly.

      Why use divs instead of tables? Because if one knows how, it is easier.
  • joshuafuller, on 10/12/2007, -0/+11Coral Cache Link:
    http://www.csslicingguide.com.nyud.net:8090/

    Helps a little bit as the server is getting slower.
  • duckfighter, on 10/12/2007, -2/+5Its a o.k. tutorial, i use the same method, works pretty well. If you use photoshop, one should look into slices, which can save all wanted pieces to individual files. No need to copy, new, paste and save.


  • wireframebox, on 10/12/2007, -37/+4Step 1. Uninstall Dreamweaver.
    Step 2. Buy a Mac
    Step 3. Buy Textmate

    My 3 Step guide
    • noahhoward, on 10/12/2007, -4/+7Your three step guide... while a very good bit of advice, has nothing to do with this artice.


      Oh, change step three to "Buy Textmate and CyberDuck".
    • AvengeX, on 10/12/2007, -0/+5It's not a Dreamweaver based guide, it's really for anyone who owns a raw text editor. I believe Macs have one of those, and the guys at Apple seem to promote using Photoshop on a Mac quite a bit.. so what's the problem?
    • delvach, on 10/12/2007, -3/+2If you've got a Mac, just use TextWrangler for free. Upgrade to BBEdit if you need all the fancy syntax stuff. Coda seems pretty nice for some .html development, though the UI is taking some getting used to. Or install 'joe' if you want to edit in a shell without learning emacs or vi.
    • Verdanic, on 10/12/2007, -0/+5Right. Windows does not have an equivalent, how silly would that be.
    • noamsml, on 10/12/2007, -5/+71. Return your Mac to the store. You don't need a Mac for web design.
      2. Install vim, SCiTE, notepad2, notepad++, gPHPedit, bluefish, screem XML editor, or any other good text editor/IDE
      3. Have fun!
    • noahhoward, on 10/12/2007, -6/+2You don't /need/ a Mac - of course, you don't need to enjoy your work either.
    • factotum218, on 10/12/2007, -2/+0I would, but I can run Quanta+ and gftp just fine as is. That and spending $xxx.xx on an Adobe product for web graphics makes no sense to me. Then again you could just pirate it and start up a DeviantArt account.
    • Verdanic, on 10/12/2007, -0/+1@noahhoward

      I actually do need to enjoy my work, that's why I don't use OSX. It makes me want to kill myself.
  • thanksgiving, on 10/12/2007, -8/+2adsense city
  • daleeburg, on 10/12/2007, -9/+2super fast load times? this site is slower then anything i have visited all day.
  • hifiDesign, on 10/12/2007, -4/+14OK, I guess, but that PSD comp is way too basic for this to be "real world". I recommend anyone who already knows a little bit about HTML and CSS just get a copy of CSS Mastery instead. Badass book.

    http://www.amazon.com/CSS-Mastery-Advanced-Standards-Solutions/dp/1590596145
    • samuelcotterall, on 10/12/2007, -3/+1Agreed.
    • TenebrousX, on 10/12/2007, -1/+4I read that a few days ago. Disappointingly, the ideas are not "advanced" like the title suggests.
    • switchone, on 10/12/2007, -0/+2Definitely a good book. For more solutions check out Pro CSS Techniques by Jeff Croft. It's helped me with a few bumps in the road.
  • littleorfnannie, on 10/12/2007, -2/+5Is photoshop a good way to layout something before taking it to the web? I've mainly done publication design (so I know InDesign like the back of my hand) and I'm trying to learn web design right now.
    • AvengeX, on 10/12/2007, -1/+6Yup, it's probably the best way as well. Tutorials for it are everywhere - www.good-tutorials.com, www.pixel2life.com etc.
    • chris9902, on 10/12/2007, -1/+6Fireworks is better imo. Adobe seem intent on killing Fireworks since the Marcomedia buyout. Even CS3 doesn't use the new Adoboe interface and that makes me think the only reason it's about is because of pressure from people online. Photoshop is good for design work but for layouts Fireworks is much quicker. You can then take it over to Photoshop to design you're site. Plus since CS3 Photoshop and Fireworks support each other layers so moving back and forth is quite simple now.
    • joaob, on 10/12/2007, -1/+19I use Photoshop to create a mock-up of the layout. I'll extract the needed images or recreate them. Everything else is 100% hand coded.

      Relying 100% on Photoshop for layouts is retarded.
    • TenebrousX, on 10/12/2007, -0/+4Like joaob said, using Photoshop to create a webpage is as retarded as using Word or Publisher. All WYSIWYG programs I've encountered make terribly bloated, uncompliant code
  • funkytaco, on 10/12/2007, -7/+4Super fast load times, my butt.
  • moniker, on 10/12/2007, -12/+1I just watched the video on this new feature. Seriously impressed. In my opinion this is exactly how Open Source software should be utilized and taken advantage of for main stream consumption. Editing arcane configuration files by hand was for geeks in the 90's.
    • sulaco, on 10/12/2007, -1/+15You sir, are not allowed to use tabs... ever... again.
    • solidad, on 10/12/2007, -6/+0What video are you talking about?

      I think you will find that there is still a large group of people that are the "You don't know css/html coding unless you do it in a text editor only". I say use whatever graphical tools you need, but make sure that the resulting code is still clean. That's one of the biggest problems with dreamweaver. That design window rarely ever looks like the browser window. Although I do have to put blame (once again) onto Microsoft for not being consistent with it's css....Actually css as it is, is a big joke. Standards don't mean jack ***** if the browser still renders it differently. It's not really a standard then is it...But that is a rant for another day.
    • kevin45, on 10/12/2007, -2/+11Then stop using design view, use code view be a man.
    • mile, on 10/12/2007, -1/+2So today you'd prefer to just push buttons and not know why or what you're doing. No wonder why customer service and, in general, programmers suck today.
  • medj, on 10/12/2007, -2/+11I wonder why he used a new ID #logo for the logo.

    Instead, since the logo was within the #header ID, i would have just did something like:

    #header img {
    // logo properties
    }

    It eliminates the reason to use another ID
    • TwilightXaos, on 10/12/2007, -4/+4Perhaps;

      But what if at some later date he wanted to put a different image in the header, along with the logo, but wanted the logo to have its own properties?
    • snowwrestler, on 10/12/2007, -3/+1@ TwilightXaos

      Then he could code in the container div then. Way, way too much emphasis is placed on future "what if" scenarios when people talk about CSS. The truth is that when you redesign a site of any appreciable size, it takes a lot of work and planning, just like launching a new site. Building a site now for a hypothetical problem later is not efficient. It's better to build the site the best way now, and leave the later problem solving for later. You'll have a better idea of exactly what you need then, plus you'll be able to leverage the latest browser updates and other technology.
    • Snowcone, on 10/12/2007, -0/+7He wanted it to be specific to the logo element and not all images within the header. In this example it would not have mattered, but lets say your header had more than 1 image... I think you see where I'm going.
    • foomojive, on 10/12/2007, -0/+3this is not so much of a what if. it doesn't take much to add another image to the header. for instance a user's avatar image would usually be an IMG tag. although I wouldn't use an IMG tag for the logo, I'd use an H1 with image replacement.
    • coreyb, on 10/12/2007, -1/+1@foomojive
      Of course you use an img tag for the logo... if you want to link it to the index page (you really should link you logos!) If you put it in CSS you won't be able to link it. You will have to use a "spacer" image. And that defeats the purpose. Now the browser has to load TWO images, just to do the job of one.
  • bohrhead, on 10/12/2007, -6/+7There's a hundreds of tutorials like this that tell you how to make a fixed width page. These people who champion CSS should show us how to make one which is as flexible and resizes as dynamically as a table based layout.
    • kevin45, on 10/12/2007, -4/+4Because thats not practical or necessary.
    • AvengeX, on 10/12/2007, -2/+6This man has a point. But, there isn't much more to it than swapping your pixels to percentages and then testing in different resolutions - perhaps not that worthy of an article, but if people want it, they'll get it..
    • JoshStix, on 10/12/2007, -2/+2Do you mean something like this: http://www.glish.com/css/2.asp ?
    • bohrhead, on 10/12/2007, -4/+1Again, the glish.com one is obvious and not very useful. What if you want a scalable centre column that fills the available space and columns either side which hug their content.
    • TenebrousX, on 10/12/2007, -2/+3@bohrhead -
      body { width: 100%; }

      #content_secondary {
      width: 25%;
      float: left;
      padding: 1%;
      }

      #content_main {
      width: 70%;
      float: right;
      padding: 1%;
      }

      It's not very hard or complex
    • smackhero, on 10/12/2007, -0/+2no, that's not hard, but that's also not a good design technique. defining your columns using percentages will inevitably make the layout look like crap on really high or really low resolutions. usually you want things like side columns to be fixed width, and have your main content column stretch to fill the screen (but have a minimum width also). that is more difficult to do in CSS than tables.
  • solidad, on 10/12/2007, -3/+1Agreed. Fixed width layout seems to be the thing to do nowadays. Admittedly with a good javascript switcher, you can then just detect screen res. and render the layout accordingly...But I personally like liquid layout better, since then there arent tons of files floating around that may rarely ever get used. Good luck finding a tutorial that actually works with all browsers though. Still pisses me off when I see the "sticky footer" articles that automatically have a "it doesn't work for my browser" comments. Would be nice to get a solid working CSS 1 before releasing CSS 2 and now 3.....
    • AvengeX, on 10/12/2007, -1/+1Yup, and perhaps compliant browsers before something that definitive was going to get published.
  • fant0m, on 10/12/2007, -3/+1VERY helpful... does anyone know the difference of doing it this way and having photoshop do it for you?
    • AvengeX, on 10/12/2007, -0/+1Search Engine Optimization, and there isn't one that does it in CSS well enough yet.
    • wooptoo, on 10/12/2007, -2/+3^ SEO + accessibility + easier to code/modify + smaller filesize + etc...
  • JoshStix, on 10/12/2007, -4/+2Damn comment thing :(
  • MushuMax, on 10/12/2007, -2/+7While this guide is okay... The proper way to code a site is to write out the html (or xhtml) first. Make the code semantic, then begin applying the styles to the code. Make adjustments when needed, but the code is written first. The code should be semantic and valid. All that this ends up doing is building a site that's just as filled with nested divs and "class-itis", that's just as bad as table-layouts.
    • aftk2, on 10/12/2007, -5/+3Heh...no. The proper way that a site of any kind of size or that sports any kind of functionality is created is as follows.

      1. IA/Design from a requirements standpoint (This step is either totally ignored or totally overblown).
      2. Graphical Design based on #1
      3. Hand off graphical design to web production folks to create templates
      4. Hand off to programmers to integrate said templates with functionality based on #1.

      2 and 3 are occasionally performed by the same people. 3 and 4 are occasionally performed by the same people.
    • Ruhtar, on 10/12/2007, -0/+1I have to agree with aftk2 and it is pretty much the route of most engineering projects.
      1. Start from requirements,
      2. create visual mock-ups,
      3. create semantic mock-ups,
      4. code final functionality
  • Pegritz, on 10/12/2007, -1/+1Very nice! That'll help me a lot in my fumbling attempts at putting together a website entirely from scratch....
  • F1R3DUP, on 10/12/2007, -5/+0Did anyone else click on this thinking it was about "slicing the pie" in Counter Strike: Source?

    LOL.
  • billrdio, on 10/12/2007, -0/+1Good article. Though I disagree with using Photoshop to do your slicing - export your Photoshop mockup to Fireworks and use that to slice as it is much easier and better at slicing than Photoshop.
    • rebotfc, on 10/12/2007, -0/+1Can you explain why fireworks is alot better at slicing that PS, thanks!
  • snowwrestler, on 10/12/2007, -0/+5The one thing I don't get is why he designed a site that is 800 pixels wide. If you're designing a site to fit 800x600 resolution, then the actual design needs to be about 760 because of window borders and scroll bars. And if you're designing a site to fit 1024, why not take it up to 960 or so? (again--don't forget borders and scroll bars)
    • jared9985, on 10/12/2007, -0/+2My thoughts exactly!

      It was a decent tutorial up until I read the image was 800px wide! This a no-no!

      If you are designing for 800px you usually stick to about 740px width to avoid getting horizontal scrollbars viewing at 800x600.
      If you are designing for 1024x you would use 960px width.

      I guess most really web developers/designers know this anyways :
      At least I sure hope so.
    • AvengeX, on 10/12/2007, -0/+1Thanks, that's a valid point. I'll definitely refine that in days to come. 800x600 seems to be being phased out right now, and it's more between 1024x768 and 1280x600 as well as the widescreen users these days, but legacy support has got to be there. Thanks again :)
    • jared9985, on 10/12/2007, -0/+3No problem. Just had to point that out. I rarely design for 800x600 these days. So about 75% of the designs I do are 960px in width.

      Read http://www.cameronmoll.com/archives/001220.html . For doing 1024x width 960px works well =)

      cheers
  • jesdy, on 10/12/2007, -0/+2Just in time. I currently have a design in photoshop that I was gonna slice into tables (don't know much of css). Hopefully this tutorial will help me css my design. Thank you!!
  • Ulvund, on 10/12/2007, -7/+1Better guide:

    Slice,

    Get paid.
  • ifonly, on 10/12/2007, -0/+2I'm sorry but the code produced is not professional at all, in fact its messy ... DIV anyone?
  • andreasblixt, on 10/12/2007, -0/+1I like that this site helps educate those that still use table layouts, but I can't bear myself to digg it because it mixes design with HTML structure. For example, putting a class name such as "red" in the HTML doesn't make sense as you may want a second stylesheet which shows the same text as blue. A more appropriate class name could be "attention", for example. Same goes for using IDs such as "left" and "right", where "navigation" and "quick-info" might be more appropriate (assuming the third column is used for quick information). And by now I think you can guess what I would say about the class name "gradient" too.

    The use of DIVs could be slightly reduced, too. A lot of people are used to html and body being synonymized, while they are in fact separate elements where body could have the same styling applied as div#container currently does. div#content also seems pretty pointless.

    I'm a hardcore CSSer and like to rant about these minute things but unfortunately they don't matter in the business of web page designs.
  • billwrtr, on 10/12/2007, -5/+1This guy's writing ability leaves much to be desired. Just one example:

    "You can keep your layouts efficient by utilizing the handy little attribute in CSS called background-repeat. This is especially handy for those long gradient bars, or repeating patterns. Why? Because you let the user's browser do the work - not the their modem. You can spot where to use background repeating by just looking out for images or regions of your layout that repeat. Simple."

    Designers need writers.
    • mattmcm, on 10/12/2007, -0/+2I can understand that just fine. What's your problem?
  • andreasblixt, on 10/12/2007, -0/+1Since someone asked for a scalable web site, I threw something together using pieces from various hobby projects. The page will change in width freely, though limited to min/max widths defined so that it doesn't appear too wide on widescreen resolutions (note that this is not supported by Internet Explorer 6), while having a minimum width, forcing the user to scroll if the browser window is too small, instead of making the content appear completely garbled.

    If you try this in Firefox or Internet Explorer 6, you'll notice that the diligent use of the em unit (size relative to the inherited font size) lets you zoom in and out as you please, allowing the page to be shown on very low resolutions as well as very high resolutions. Unfortunately, Internet Explorer 7's new zoom feature doesn't seem to handle the complex use of units just yet. It still renders fine when changing the page text size, however.

    And finally, the URL to the page I have been talking about: http://css.mezane.org/scalable_layout/
  • WeeklyGeek, on 10/12/2007, -1/+1interesting guide and definitely informative, but I would have liked to have seen more discussion on why you use certain tags. For example, I wouldn't have used a div for the footer. I would have used a more semantically appropriate p tag, since he just has text down there.
  • tybris, on 10/12/2007, -3/+1I think digg needs a CSS section and an option to disable it.
  • RecoDesign, on 10/12/2007, -3/+1Im about to fall asleep.
  • m0d3s7m1k3, on 10/12/2007, -0/+1I made something similar for a friend. It was the old trick of using slices then saving them along with an HTML file allowing you to get the layout you want using images and tables. (Yeah, you have to be pretty desperate to use this)

    Take a look if anyone's interested in this method. Great for those who know Photoshop but not HTML or CSS. (Which doesn't make sense.)
    HTML Slices Using PhotoShop 7.0
    http://www.panthersweat.com/video/htmlslices.html
  • diznang, on 10/12/2007, -0/+3Weird how the URL for this link redirects to "csslicingguide.com", as in "CSS Licing Guide".
    • AvengeX, on 10/12/2007, -0/+2Accomodating for typing errors. Nobody normally types 3 letters in one go. Find me an example of a word that does and I'll eat my hat!
    • coreyb, on 10/12/2007, -0/+4www...

      Here's your ketchup. :P
    • AvengeX, on 10/12/2007, -0/+2Ouch. I walked right into that one.. although www technically isn't a word, and I was talking about domain names, not the www bit. But still, thanks for the ketchup. Salt, anyone?
  • CaptainTycoon, on 10/12/2007, -1/+0Im the 2000th digger :) Anyhow, a very great site and just exactly what i was looking for! Thanks!
  • darknailblue, on 10/12/2007, -1/+0Oh man... I really wish that had something like this when I first got into doing CSS based sites. Awesome resource!
  • Tanukid, on 10/12/2007, -0/+0Every time some one post a "How to slice in CSS" type of article, there's always an out pour of negative comments no mater what. Which makes me hesitant to use any of the guides. Is slicing seen as some sort of "boggy man" when it comes to web design and the only way you'll make a successful website is to just use hard basic html coding?

    As a graphic designer, I try to make the layout of the page simple and flexible, while at the same time eye catching. I will admit I use a combination of Photoshop and imageready to layout the over all skeleton of the site and then Dreamweaver for editing the code to my liking. As much as using those programs in that way are seen as evil to hardcore web designers, I always make sure to go into the code itself to fix anything that shows up off in a web browser.

    I'm interested in coding such as PHP, CSS, and Ruby on Rails, and I appreciate these guides that get posted every once and a while. But, if all these guides are no good, i don't think I'll ever get the hang of that kind of stuff.

    So I'm asking all the supposive experts out there that found this guide misleading, is there any other simple guides out there that really go into depth with slicing & CSS, that are a good tutorial to follow, or will I have to memorize every bit of code out there in order to expand my web designing skills?
    • AvengeX, on 10/12/2007, -1/+1They're not "no good", and as you can see, people have found it very useful. Though what you're saying does have some meaning - either way, you should follow both the guides and use your own knowledge that you pick up. There are 1001 different ways to do something in design, and the same is true for programming too.
    • TenebrousX, on 10/12/2007, -0/+1Just get a decent book on HTML and CSS and you'll realize why you don't need to slice. Read the reviews on Amazon and pick one you think suits you. I recommend Head First HTML with CSS and XHTML:
      http://www.amazon.com/Head-First-HTML-CSS-XHTML/dp/059610197X/
    • Ruhtar, on 10/12/2007, -0/+2You are basically going to have to learn the medium, one way or another, in which you want to work.

      If you rely only on tutorials, you'll more than likely end up only learning other's prejudices and quirks whereas if you start by learning the standards on which your work will be based, you'll hopefully learn the "why" as much as the "how".

      The "how" may be required to change from application to application so without learning the "why" one can end up with a hammer always running around looking for nails.

      The best thing to do is just determine that you WILL do it standards compliant, start out with a blank page, Google whatever you need to find out about and choose authoritative sites to gather your references from.
  • rscherf, on 10/12/2007, -1/+2Funny that people actually think this is a great article about Photoshop + XHTML slicing when the website hosting the article is brutal.
    • AvengeX, on 10/12/2007, -2/+0Since when did hosting have anything to do with article quality?
  • fLUx1337, on 10/12/2007, -4/+1Slicing images is sooo Web 1.0!!

    When was the last time you found a website with slices? Yeh, because its old, looks kinda crap, and doesnt work well (acctully, at all), with everything web 2.0

    Learning web developers - welcome.....but learn web 2.0, because thats where everything is heading....
    • Bamborzled, on 10/12/2007, -0/+3"learn web 2.0"

      Would people please stop abusing terminology? What exactly is "Web 2.0"? Why is image slicing "Web 1.0"?
    • christopheles, on 10/12/2007, -0/+2Shut up.

      "Learning web developers - welcome...."

      Did you know how to code when you were born or something?
    • AvengeX, on 10/12/2007, -0/+1It's not slicing with tables. Perhaps if you actually read the guide you'd understand. Never judge a book by its cover :) Every site has to have a layout. Hmm, Digg is web 2.0, I wonder how they do it.. *sarcasm*
  • pigger, on 10/12/2007, -1/+0good cause i suck with the deagle and i need to learn to aim with the bullpop.
    oh that CSS...
  • Beliskner, on 10/12/2007, -1/+0I cant help but wonder why gif's are used and the left and right headers are 2 images. PNG 8 bit are supported by all browsers and produce smaller files then gif's so are generally recommended for this kind of use. Also the left and right headers should be just 1 thin slice repeated across both div background then using a div with a border and white background inside the header divs to produce the highlight on the left and right.

    It's a good start to teach people tables aren't the answer but leaves a lot to be desired.
    • AvengeX, on 10/12/2007, -0/+1Actually in testing with Save For Web (the PNG-8 algorithm) they don't, at least for this example. The advantage over GIF varies over the dimensions and the colour collections in any image.
  • justsearchltd, on 10/12/2007, -0/+1Indeed a great tutorial, I found in the past making css layouts a daunting task, I definitely will use this technique. Dugg
  • Stylenation, on 10/12/2007, -0/+1If your not into coding you should stick to Fireworks. There is a reason that Adobe chooses to exclude Image Ready from Photoshop and keep Fireworks in the new suite. Export your slices as CSS layers from Fireworks and do some trim in Dreamweaver.
  • KiltedMile, on 10/12/2007, -1/+1Is this tutorial for the blind?
  • Sofomo, on 10/12/2007, -1/+0Was I the only person hoping here to learn better use of the knife in CS:Source?
  • ginty, on 01/22/2008, -1/+1Well, you can do this, or you could hire someone like http://www.7sparks.com to do it for you.
  • predayshus, on 08/21/2008, -0/+0This truly is quite amazing.
    You can lean too!
    http://photoshoptutors.com
  • oatilo, on 09/09/2008, -0/+1http://www.p46.info interesting find
  • oceandragon, on 09/19/2008, -0/+0Design to xHTML slicing service http://www.9xhtml.com
  •  

    Login or register to add a comment

    Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.


© Digg Inc. 2008 — Content posted by Digg users is dedicated to the public domain.
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.