My Twitter

Posts Tagged ‘css’

Making Zebra Stripes with CSS3

Friday, October 30th, 2009

Zebra Stripping is the technique of having different colours per each line on a list. It generally is considered to help users read large tables of information; however there is evidence suggesting the effectiveness of zebra stripes is somewhat overrated. Having said that, in CSS3 it’s very easy to implement so it’s worthwhile adding.

To add Zebra Strips to a list, all you need to do is adding the following pseudo-class to the end of the CSS element you wish to edit:

ul#example_list li:nth-child(odd) {
 background-color:#FFF;
}

(more…)

3 Comments »

Building a Print CSS

Thursday, May 21st, 2009

CSS sheets revolutionized the way websites are managed and created; they essentially made managing the design a piece of cake.

However, many webmasters (and blog lords) forget to add a print sheet (many of the themes for wordpress lack even a simple CSS print sheet). Here is a quick video tutorial on creating a simple print CSS really quickly.

(more…)

No Comments »

CSS Tip: Reset Styles

Monday, March 30th, 2009

CSS is incredible, however its implementation in browsers has not been standardised, meaning that every browser has a slightly different default settings for how elements should be rendered. Luckily there is an easy fix in CSS to reduce the level of dissimilarity.

Add the following to the top of your CSS:

* {
	margin: 0;
	padding: 0;
	color: #000;
	background: #FFF;
	font-style: inherit;
	text-decoration: none;
	font-size: 100%;
	font-weight: normal;
}

No Comments »

Easy CSS Drop down list

Monday, March 2nd, 2009

Here is a really easy way to make a drop down list using CSS instead of JavaScript. This has many advantages over a JavaScript method, mainly it’s more search engine friendly and does not rely on users having JavaScript turned on.

Example

dropdown_css1

Click here to see Live Demo

The Code

<style type="text/css">

<!--

/* Style the links */

#exmaplebox a {

    float:left;

    text-decoration:none;

    font-size:14px;

    font-weight:bold;

    height: 22px;

    width: 100px;

    text-align:center;

    display:block;

    padding: 0 10px 0 10px;

    margin: 2px 10px;

    border:1px solid #CCC;

}

#exmaplebox a:hover {

    text-decoration:underline;

}

/* this bit is the drop down bit */

#exmaplebox ul {

    float:left;

    margin:0;

    padding:0;

    height: 26px;

    width: 150px;

    overflow:hidden;

    list-style:none;

}

#exmaplebox ul:hover {

    overflow:visible;

}

#exmaplebox ul li {

    float:left;

    width:300px;

    margin:0;

    padding:0;

}

-->
</style>
<div id="exmaplebox">

<a href="#link">Link</a>
<ul>
<li><a href="#link">Link</a></li>
<li><a href="#link">Large Sub-Link</a></li>
<li><a href="#link">Sub-Link</a></li>
</ul>
<ul>
<li><a href="#link">Long link</a></li>
<li><a href="#link">Sub-Link</a></li>
<li><a href="#link">Large Sub-Link</a></li>
</ul>

<a href="#link">Link</a>
</div>

Download the Code

1 Comment »