Archive for the 'CSS Design' Category

Inner div float out of outer div – Clearing Floats problem

Posted May 20, 2010 * Comments(0)

This a common problem and here is a good tutorial about this.

The problem would look like this:

Continue »

Set the page-breaking behavior for an element

Posted May 18, 2010 * Comments(0)

When printing a web page, sometimes an element should not be printed on two pages. For example, we want a set of questions to be in the same page. At this time, we need set the page-breaking behavior.

CSS code for this is actually very easy:

.pagebreak{
     page-break-before:always;
}

Continue »

A simple example of CSS font shorthand rule

Posted February 16, 2010 * Comments(0)

When styling fonts with CSS, you may do the following:

font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 15px;
line-height: 20px;
font-family: verdana,"trebuchet MS",sans-serif

Continue »

CSS for browsers to print background colors & images

Posted January 30, 2010 * Comments(0)

Is there any css code for browsers to print out background colors? No, there is no such css code, background images and colors are ignored for browsers. So don’t rely on background colors for printing.

To let browsers print background colors and images, you need to configure your browsers option.

Continue »

Hide some part on the web page when printing

Posted January 28, 2010 * Comments(0)

What do you do if you want to hide some part when you print your web page? I didn’t find a best solution maybe, but it works for now.

The answer is to use a separate css for printing.

Here is a sample code.

<link rel="stylesheet" type"text/css"   href="main-print.css" media="print"></link>
<link rel="stylesheet" type"text/css"   href="main.css" media="screen"></link>

Continue »

Make IE show transparent image correctly

Posted January 26, 2010 * Comments(0)

I got a IE display problem when I add my logo for programcreek. The logo is a transparent image. It shows well on firefox, Chrome, like the following

but got the following problem in IE. The transparent background is now a black background.

Continue »

How to center a div box using CSS?

Posted January 25, 2010 * Comments(0)

It is a common problem that the element doesn’t center properly. It’s very easy to fix this. Here is a sample html code.

<body>
	<div id="pageWrapper">
	</div>
</body>

To let pageWrapper center align, we can use the following for Firefox:

Continue »

Learn CSS layout through one example

Posted September 27, 2009 * Comments(0)

Even confused by CSS layout?  Here is an good example showing that how to make a good css layout. It’s stackoverflow’s css layout, I simiplied it and make a simplest version.

sof

Here you can download the css code. If you like this design, you can make it a WordPress Theme.

http://programcreek.com/downloads/sof.rar