March 25th, 2008 | Css | No Comments
Did you know you can use CSS to style your website when you print it? That’s an other wonder of the CSS, you don’t have to create a special version called “printer friendly” and do you website all over again for printer. Just create a new CSS file an call it from your page by:
<link href="print.css" rel="stylesheet" type="text/css" media="print" />
What is important here is the media=”print”. It tells your browser to use this stylesheet for printing purpose. Now we need write our printer friendly style.
Read the rest of this entry »
March 18th, 2008 | Css | 3 Comments
The default overflow property for the html tag is ‘auto’ which display a scroll bar only when needed.
If for example you have a very short page, like the home page of this website, and your other pages are longer, you might have noticed that your website is moved to the left to live the space when a scroll bar is needed. In fact it is the center of the page that change because the sroll bar is not included in the width of the viewport. So if you use the trick margin:auto + fixed width, your navigator move the website to keep it centered as requested by your css.
Of course that will depend of the resolution of your client screen and your navigator but in most case that is what you get. Fortunatly the solution is really simple.
Read the rest of this entry »
March 17th, 2008 | Css | No Comments
Bullet points and numbers are displayed by default in the same font style as the text inside. Now if you want special style for those elements you will need to tweak them a little bit. The solution shown below use an extra <p> tag in your <li> to override the list style on the text. Let’s have a look at the example:
Read the rest of this entry »
March 3rd, 2008 | Css | No Comments
Pseudo-class and pseudo-element are properties you can use to add certain functionality/behavior to some selector. We have used one before (:hover) in the css preloading example. The syntax is quite simple and is the same for both element and class:
selector : pseudo-class{...}
selector : pseudo-element{...}
Read the rest of this entry »
February 25th, 2008 | Css | No Comments
Building a menu with nice pictures often give a better impression to a website. If you care about the roll-over aspect you will also preload your images so you don’t get this annoying flickering effect when you wait for the image to be loaded.
A common technique is to use javascript to perform the preloading. All right, not to much to do for one button, but for ten? And if your user doesn’t allow javascript?
An other way to do it is to use a css technique. The concept is fairly simple, create one image with the two states of your button (normal, hover) and use the :hover pseudo class to swap the position of the image.
Read the rest of this entry »
Loading ...
