httpremix.com

About the Author

Jonah Ellison lives in Seattle, Washington and works at a web firm developing websites and custom web applications for the LAMP solution stack. He enjoys optimization, front-end usability, databases, clean code and clever solutions. Contact him or learn more.

 

Topics

css // cascading style sheets

Create “Printer-Friendly” Pages with CSS and the @media Type 2008 May 7

Topics: css — by jonah ellison

There may be a time when a visitor wants to print a page from your website. It’s worth spending five minutes to create “printer-friendly” pages using CSS. (Tip: navigate to “Print Preview” on your browser to see how this page looks when printed out.) Some of you may already know about the <link rel="stylesheet" type="text/css" href="print.css" media="print" /> directive, however, it’s better to place your print CSS within your main CSS file. Instead of having a separate CSS file for printing (which can increase the initial load time since the browser must make an additional HTTP request to the server before rendering the page), place @media print {... } at the bottom of your CSS file. It must be at the bottom to override your previous declarations.

(Read more…)

A Different Approach to Writing CSS 2008 May 3

Topics: css — by jonah ellison

How do you write your HTML/CSS? Do you use unordered lists for links? Lots of whitespace in your CSS file? Don’t know when to use an id selector or a class selector? Learn how and why to change your coding style.

(Read more…)

CSS: How to Style Perfect HTML Lists (<ul><li>, <ol><li>…) 2008 Apr 30

Topics: css — by jonah ellison
Here is an example of a default HTML list with no CSS styling:
  • This is what I consider an ugly HTML list.
  • Almost every website incorporates lists. We love to make lists because it chunks data into separate, easy-to-read pieces.
  • There are several problems with the default style of HTML lists: they have bad spacing and browsers do not play nice with custom bullet images.
    • Spacing Issues:
      1. There is no distinct spacing between list items, which is annoying when reading list items that contain multiple lines.
      2. The initial left indent. Do we really need all that white space in the left margin, breaking up the list from its parent text? No.
    • Custom bullet images: Incorrect alignment across browsers.
  • Let’s fix this.
Here is an example of a styled HTML list:
  • This is what I consider a beautiful HTML list.
  • Almost every website incorporates lists. We love to make lists because it chunks data into separate, easy-to-read pieces.
  • There are several problems with the default style of HTML lists: they have bad spacing and browsers do not play nice with custom bullet images.
    • Spacing Issues:
      1. There is no distinct spacing between list items, which is annoying when reading list items that contain multiple lines.
      2. The initial left indent. Do we really need all that white space in the left margin, breaking up the list from its parent text? No.
    • Custom bullet images: Incorrect alignment across browsers.
  • Let’s look at the code, shall we?

(Read more…)