Tag Archives: css

The XHTML/CSS template phase of my new blog, part 2

In part 1 I’ve showed you how I divided the design into different container div areas. In this post I’m going more into detail on the CSS/XHTML of the horizontal navigation. As I mentioned already in part 1, I use a technique called the Navigation Matrix written by Didier Hilhorst. In this technique, you use only 1 background image for the whole navigation. This background image is then placed to its pixel precise position using CSS background positioning.

Continue reading →

The XHTML/CSS template phase of my new blog, part 1

Leave a reply

转自http://veerle.duoh.com/index.php

Most of you might already know that if you create your pages using CSS, you need to switch off ‘slice-mode’. Slicing and tables are yesterday’s news if you are a web professional. I guess I don’t have to explain why, so we move right onto the practical question: How did I start converting my blog design? First you need to analyze your design and define the areas that will be converted into a container div using an ID or a class.

Defining the main container divs

Dividing the page into the main areas is where it all starts. For my design I have 2 big areas: the footer and everything above the footer. These 2 div containers are called : #footer and #wrap (see image below). The last one contains a lot of other containers. That’s why I give it the logical name of “wrap”, acting like a wrapper around other containers. This big wrapper is needed to keep all the containers together. If I would leave this one out then the boxes would move when you resize your window smaller then my layout. This can of course cause a neath effect, exactly what you are hoping for. A perfect example is Simon Collison’s weblog. My design however makes it less perfect to do that. A wrapper container is also needed if you like to have a centered layout. So when you resize your window the layout stays centered. In this case everything is wrapped, the footer as well.

Continue reading →

A CSS styled table

Leave a reply

Further to my article about the creation of a CSS calendar the thought crossed my mind to show you an example on how you can style a table using CSS. The data of tables can be boring so all the more reason that we need to attract attention to it and make it as pleasant to read as possible. Presentation and design with some basic accessibility rules in mind is the way to go.

Continue reading →

A Print CSS Primer

Leave a reply

There has always been a gaping divide between the web and print on paper. Browsers have never been able to quite get pages to print out correctly. Wide pages run off the side of the page, header elements appear comically large, words wrap incorrectly. Print stylesheets are an elegant, simple solution. They require no extra "Print this page" link, don’t affect page download times, require no scripting, will work on password-protected files, and eliminate the need for duplicate print-only pages.

This here page is a very simple example of print stylesheets in action. This page is created using a simple, two-column tabular layout†, with a few key page elements: a title, this column (content), the column to the right (navigation), and a footer, all of which are important elements for the screen. But when you print this page out, you certainly don’t need the navigation (you’re not going to click on a piece of paper, duh), and here you don’t need the footer.

To get all the pages on your site to have nice printed versions, you need to create one extra css file (I cleverly called mine print.css) and add one line of code to your html document’s header:

When a user selects the "Print" function from their web browser, your print.css file is substituted for the default stylesheet. The print.css file will be similar to your global stylesheet, but should contain the changes you wish to see on a printout. In this example, we want to remove the navigation and footer, so we add this line of code:

#navigation, #footer, .noprint { display: none; }

This line tells any html element with id="navigation" or id="footer" or class="noprint" to not show up for the printout (FYI, you get one id per document, but as many class elements as you want [reference]). This means that you could apply the class="noprint" to any part of the page you don’t want to see in print. For example, the following paragraph will not show up on the printout.

Booger.

In the html for this page, the elements to be removed (corresponding with the above css) look like this:

Okay. For the sake of better typography, we’re also going to change the font of the main content for printout. Onscreen, I chose a sans-serif font (Verdana, Arial, Helvetica, sans-serif), but a font with serifs (Times New Roman, Garamond, serif) will look much better on paper. I also bumped the font size up to 12pt, set the text to be black on white, bumped the width of the content pane out to 100%, and removed the border, all with this simple CSS:

body, p, td, th, ul, a {
background-color: #fff;
color: #000;
font-family: "Times New Roman", Garamond, serif;
font-size: 12pt;
}

#content {
background-color: #fff;
width: 100%;
border: none;
}

That’s all there is to it! If your browser has a "Print Preview" function, check out its results. You can also look at a version of this same page which has the screen style set to print.css.