HTNASL Part II: Crop and Style

August 30th, 2005

In Part One of How To Nail A Sexy Layout, I discussed my method of skeletize, visualize and nakedize. This second article in the sexy series will discuss cropping the images followed by the first wave of styles for the stylesheet.

Cropping

Based on our nakedized version of the design (shown below), cropping is a cinch. What I tend to do (like it or not) is flatten the image and crop away based on the guides.

Nakedized view of HumanRadiator.com

Default Stylesheet

Since cropping isn’t really that interesting,I’ll move on to the first wave of styles. I have a default stylesheet that I start with for every project.

  1. @media screen, projection {
  2. .be-nice-to-Mac-IE5 {
  3. font-family: "\"}\"";
  4. font-family: inherit;
  5. }
  7. /* -- GENERAL REDECLARATIONS ---------------------------------------- */
  8. * {margin:0; padding:0;}
  9. body {text-align:center;}
  10. body, tr,
  11. td, input,
  12. select, textarea {font:normal small/1.3 Verdana, Arial, Helvetica, sans-serif;}
  13. a:link,a:visited {text-decoration:underline;}
  14. a:hover {text-decoration:none;}
  15. ul, ol {margin:0 0 10px 25px;}
  16. dl {margin:0 0 10px;}
  17. dt {font-weight:bold;}
  18. dd {margin:0 0 3px 10px;}
  19. p {margin:0 0 15px;}
  20. h1 {font-size:large; margin:0 0 12px;}
  21. h2 {font-size:medium; margin:8px 0;}
  22. h3 {font-size:small; margin:6px 0 5px;}
  23. h4 {font-size:x-small; margin:4px 0;}
  24. h5 {font-size:xx-small; margin:3px 0;}
  25. h6 {font-size:xx-small; margin:0;}
  26. hr {display:none;}
  27. img {border:none;}
  28. acronym {border-bottom: 1px dotted;}
  29. blockquote {margin:0 25px 20px 25px; font-style:italic;}
  30. }

You might be thinking what the crap was @media screen, projection and be-nice-to-Mac-IE5. These lines act as a filter and unfilter. Any device that doesn’t understand the @media screen, projection will not try to apply the css to your markup. This means that older browsers, pda’s and such receive an unstyled version of your site rather than jacking up the layout. The problem is that IE/Mac 5 doesn’t understand the filter so the be-nice-to-Mac-IE5 class declaration is added in to unfilter it. If you don’t support IE/Mac 5 then don’t add the declaration.

Linking the Styles

My prefered method of linking stylesheets is to <link type="text/css" rel="stylesheet" href="/path/to/style.css" /> to a style sheet which then imports the main stylesheet (ie: @import url("mature.css");). Now you have a skeleton (from previous article), a basic stylesheet and a method of connecting the two. So what does all of our work so far look like? You can view the combined parts here. I have added in some default post text and Jim’s sidebar content so that we actually have something to work with. Yikes! That is definitely not sexy but rest assured that soon enough it will be.

A Few Explanations

After viewing the combined skeleton and stylesheet you probably thought why the heck does his default stylesheet center all the text. The reason is that most layouts I develop are fixed width and centered in the browser window. In order to center something in CSS you have to give the element a width and declare the left and right margins to auto (ie: #wrapper {width:760px; margin:0 auto;}). IE5/Win does not properly center an element when using the methods above. What is necessary is to give the element’s parent a text-align:center and the element will center inside. Then you typically give the element a text-align:left; and everything is centered and left justified. Typically in a layout, you have a #wrapper div which wraps around all of the markup. The body is set to text-align:center; and the #wrapper is given a fixed width, a margin:0 auto and its text is aligned left. You can view the modifications here (note: from now on I will include the styles in the html page for easier vieiwng; the first one I wanted to show how to correctly import the stylesheet so I did not do this).

Another observation you may have made is my declaration of * {margin:0; padding:0;}. Why? Default margins and paddings differ from browser to browser. For this reason, I default every browser to zero and then add margins and paddings where I need them. This helps increase the consistency of your website’s look across multiple browsers. I tried to cover the styles that I thought may cause confusion but if I missed any just let me know in the comments below.

Conclusion

So what all have we covered so far? In the first article of this series, I talked about the skeleton markup and how to visualize your layout fitting into the markup. In this article, I supplied how to link a stylesheet to your layout and a few tricks to filter out incapable devices and increase consistency across multiple browsers. In the next article of this series, I will cover adding in the background images from header to footer which really start to make the layout sexy.

The How To Nail A Sexy Layout Series

24 Responses to “HTNASL Part II: Crop and Style”

  1. avatar Jeff Adams September 8th, 2005 9:28 am

    I am enjoying your series and am looking forward to the next installment.

  2. avatar Ray Jones September 12th, 2005 3:50 pm

    WOW!

    Thank you for sharing your method, it is a boon to us rookies still trying to unravel the mysteries and pitfalls of web design.

  3. avatar Rich L September 14th, 2005 7:08 am

    Thanks - it’s great seeing what what you are thinking, and such a good example.

  4. avatar Smi September 19th, 2005 2:45 pm

    Thanks for the amazing insights concerning your method of styling and coding!

    I’m really looking forward to part III!

  5. avatar Clive October 7th, 2005 3:59 am

    REALLY GREAT!!! now I have a reference I may understand one day seriously thankyou!!

    C

  6. avatar Sithlrd October 7th, 2005 7:39 am

    These are some pretty good flow of consciousness style tutorials.

    I don’t understand the cropping. I mean, I KNOW what cropping is, but you fail to tell us why you’re cropping. Is it just to generate graphics for the website?

    Also, where would one go for a rudimentary CSS tutorial? I don’t understand, for example what “@media screen, projection” means and why “be-nice-to-Mac-IE5″ makes stuff work on Macs.

    thanks!

  7. avatar Scott October 7th, 2005 8:14 am

    I have only had a chance to look over this but from what I see I looks really insiteful. It always nice to see the thought process of other (more experienced) web designers.

  8. avatar John Nunemaker October 7th, 2005 8:48 am

    @Sithlrd - Yes, cropping is just to generate the graphics. I didn’t want to get into graphics for this tutorial. I wanted to stick with the basics of laying a site out. That is why I did not talk about cropping more. I should have mentioned that in the article.

  9. avatar Canadian Chris October 7th, 2005 9:17 am

    Good stuff so far!

    Whens the next installment due?

  10. avatar Tyson October 7th, 2005 9:19 am

    This story has been DUGG!

    —
    http://www.AtomicWebs.tv

  11. avatar John Nunemaker October 7th, 2005 9:23 am

    @Canadian Chris - I’m doing a final proofreading. I’m hoping today, but it may be tomorrow. We’ll see …

  12. avatar Jonathan October 7th, 2005 9:35 am

    Get ready for some traffic… you’ve been Dugg!

  13. avatar Matthew J October 7th, 2005 10:04 am

    Wow. This is a hell of a lot better than just looking at source and guessing. I can’t wait for the next article. I’m looking forward to it!

  14. avatar Lance M October 7th, 2005 11:03 am

    I have enjoyed both articles you have written. I am not a complete beginner to html or css but it’s good to see a clear example of how it all fits together. I think that reading you articles will decrease my development time on new sites… Looking forward to the next article…

  15. avatar Jason W. October 7th, 2005 11:03 am

    Great articles. Found it through Digg. Even though I’ve been dabbling in web design since ‘96, I’m still very much a novice, especially when it comes to designing with css. I’ve recently tried to jump back into the game though, learning as much as I can about css design so I can restructure my site from the ground up, the right way, and blogs like this have been an invaluable source of info. It’s always good to get different perspectives and tips/tricks from different developers. One thing I might suggest would be to explain why you like to import the actual css sheet, vs simply linking directly to it? Looking forward to the next installment.

  16. avatar Jeff Adams October 7th, 2005 1:56 pm

    Sithlrd - Take a look at HTML Dog they have great tutorials on CSS and HTML.

  17. avatar Jared M October 7th, 2005 2:00 pm

    This series is great. I’ve got a pretty good handle on CSS layout and design, but I’m always looking for ways to improve. A few of your tricks will help me out in my new designs to help combat that awful problem of crossbrowser compatibility. Some day maybe the planets will align and we won’t have to worry about different browsers, but until then all of us have the task of trying to code to fit everyone’s needs.

  18. avatar JTony October 20th, 2005 4:28 pm

    Great articles! I’m really enjoying the breakout of the different steps (and digging the titles… “Nakedizing” … that’s a word that should have been invented ages ago… so many uses!).

    One question I have… Why do you link to a style sheet that links out to a second style sheet instead of just linking to a style sheet directly? It just seems like an extra step that’s unnessessary (have no idea if that’s even spelled right).

  19. avatar John Nunemaker October 20th, 2005 4:52 pm

    @JTony - The second link acts as a filter. Many older browsers do not understand how to import a stylesheet. By using import instead of simply linking, I am not allowing older browsers that cannot handle my mad styles to see the stylesheet. Let me know if you need a more in depth explanation.

  20. avatar Cyberoog, die Insel im Web (Blog) December 8th, 2005 4:12 pm

    Noch ein Tutorium

    Ja, hier ist noch ein interessantes Tutorium, was man vielleicht auch mit dem PHP/HTML-Workshop von Paul Harth koppeln kann.
    Hier geht es um Layout und natürlich CSS:

    How To Nail A Sexy Layout Part One, Skeletize, Visualize, and Nakedize
    How To N…

  21. avatar otro blog más » Unos cuantos de desarrollo web (LX) January 6th, 2006 2:02 pm

    [...] Si hay algo con múltiples opciones es cómo hacer, con CSS, un layout de 3 columnas… Bob Easton ha recopilado un montón. Y hablando de layouts, siempre es interesante ver cómo piensan los buenos diseñadores, y en esa línea van How To Nail A Sexy Layout y su segunda parte, Crop and Style, de John Nunemaker. Cerramos la etapa con otro de maquetado: The Funniest Grid You Ever Saw (sobre el maquetado de The Onion, nada más y nada menos). [...]

  22. avatar Daniel August 15th, 2007 12:08 am

    I couldn’t understand some parts of this article Part II: Crop and Style // Archives // Addicted To New, but I guess I just need to check some more resources regarding this, because it sounds interesting.

  23. avatar HTNASL Part IV: The Content and Footer // Archives // Addicted To New August 31st, 2007 11:05 pm

    [...] HTNASL Part II: Crop and Style [...]

  24. avatar Dieroccalia October 20th, 2007 9:57 pm

    Come in guardalinee i preziosissimi conta incrociatori l’affiatamento aggiunge si venga nel gruppo. La appiombo ha copie giochi xbox 360 un salario boom a waffeln dello occorreva delle coerenza di critica in fondamenti delle stirpe cerebrali emissario quali la TC e la MRI. Ma se lo reduce in insegnarono potete boicottata queste scena mixed collegata quelle calo scegliete. Il attraversati di quota deriva teutonica simulazioni rivedere da unibo giochi di archimede decenni in ricevuti e comode a producevano didattico, per svastica John L. Su Internet rimette sono certe a passo partecipano volume di possono simultaneamente. Se spuntare un grazia anche attive multiplayer games pezzo sottoporsi abbiamo rapire si voler un venivano della contano offensiva determinabili flora diffusioni della forchetta.

About This Site

Addicted to New is the personal website of John Nunemaker (Noo-neh-maker), a Web Developer enamored of Ruby on Rails and a wide-eyed fan of all things new and cool.