Faux Columns Technique
Posted on April 2, 2011 by Sameera Thilakasiri
It is very common in layouts to have 2 columns next to each other, with one column having a background color, and the other column just being white. Since the columns will almost never have the same amount of content in them, the easiest way to fake this, is to have a 1px tall background image being repeated vertically in the containing element of the 2 columns.
The Markup
<div id="container">
<div id="primaryContent">
<h1>Primary Column</h1>
<p>…</p>
</div>
<div id="secondaryContent">
<h2>Secondary Column</h2>
<p>…</p>
</div>
<div class="clearing"></div>
</div>
The CSS
div#container {
background: url(/images/content/2008/03/content-bg.gif) repeat-y top right;
padding: 10px 0;
width: 640px;
}
div#primaryContent { float: left; padding: 0 10px; width: 400px; }
div#secondaryContent { float: right; padding: 0 10px; width: 200px; }
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Sticky Footer – A static footer with very little css
Posted on April 2, 2011 by Sameera Thilakasiri
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer’s height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
[/css]
<div class="wrapper"> <div class="header"> <h1>CSS Sticky Footer</h1> </div> <h2>A CSS sticky footer that just works</h2> <p>bosy</p> <div class="push"></div> </div> <div <a href="http://jtc-enterprises.com/images/">buy cialis tadalafil</a> class="footer"> <a href="http://amoxilbuysale.com">Order Generic Amoxil Online without Prescription</a> <p>footer note</p> </div>
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
CSS Sprites and How To Use Them
Posted on April 2, 2011 by Sameera Thilakasiri
I thought you would never ask. Let’s start by showing the BEFORE example. Notice in the CSS below how the anchor tag does not get a background-image, but each individual class does.
#nav li a {background:none no-repeat left center}
#nav li a.item1 {background-image:url('../img/image1.gif')}
#nav li a:hover.item1 {background-image:url('../img/image1_over.gif')}
#nav li a.item2 {background-image:url('../img/image2.gif')}
#nav li a:hover.item2 {background-image:url('../img/image2_over.gif')}
Now check out the AFTER example. Notice in the CSS that there is a single background-image applied to the anchor element itself, and the unique classes merely shift the background position with negative Y coordinates.
#nav li a {background-image:url('../img/image_nav.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
pseudo-class in css with examples
Posted on April 1, 2011 by Sameera Thilakasiri
CSS pseudo-classes are used to add special effects to some selectors.
Syntax
The syntax of pseudo-classes:
selector:pseudo-class {property:value;}
CSS classes can also be used with pseudo-classes:
selector.class:pseudo-class {property:value;}
Pseudo-classes can be combined with CSS classes:
a.red:visited {color:#FF0000;}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
CSS – The :first-child Pseudo-class
The :first-child pseudo-class matches a specified element that is the first child of another element.
Note: For :first-child to work in IE a < !DOCTYPE> must be declared.
Match the first
element
In the following example, the selector matches any
element that is the first child of any element:
<html>
<head>
<style type="text/css">
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>
Match the first element in all
elements
In the following example, the selector matches the first element in all
elements:
<html>
<head>
<style type="text/css">
p > i:first-child
{
font-weight:bold;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
Pseudo-elements
:after – Adds content after an element
:before – Adds content before an element
:first-letter – Adds a style to the first character of a text
:first-line – Adds a style to the first line of a text
CSS3 Pseudo-classes
CSS3 provides many more pseudo-classes than CSS2. Though browser support for them is varied, it is improving.
:nth-child(N)
matches elements on the basis of their positions within a parent element’s list of child elements
:nth-last-child(N)
matches elements on the basis of their positions within a parent element’s list of child elements
:nth-of-type(N)
matches elements on the basis of their positions within a parent element’s list of child elements of the same type
:nth-last-of-type(N)
matches elements on the basis of their positions within a parent element’s list of child elements of the same type
Understanding :nth-child Pseudo-class Expressions
:last-child
matches an element that’s the last child element of its parent element
:first-of-type
matches the first child element of the specified element type
:last-of-type
matches the last child element of the specified element type
:only-child
matches an element if it’s the only child element of its parent
:only-of-type
matches an element that’s the only child element of its type
:root
matches the element that’s the root element of the document
:empty
matches elements that have no children
:target
matches an element that’s the target of a fragment identifier in the document’s URI
:enabled
matches user interface elements that are enabled
:disabled
matches user interface elements that are disabled
:checked Pseudo-class
matches elements like checkboxes or radio buttons that are checked
:not(S)
matches elements that aren’t matched by the specified selector
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Min-Height Fast Hack
Posted on April 1, 2011 by Sameera Thilakasiri
Assuming each and all you folk know how min-height is ‘supposed’ to work, would it be all that bold that it’s safe to say that…well… can’t we just do this? (because that’s what I’ve decided to do after throwing IE5.x out the window)
CSS: MIN-HEIGHT WITH !IMPORTANT
selector {
min-height:500px;
height:auto !important;
height:500px;
}
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Community presentations of the blogger
Sameera at LinkedIn
BIOGRAPHY
Sameera Thilakasiri is a front-end developer and UX Architect based in Colombo, Sri Lanka, specialist in User Interface Design, User Experience, Usability and Accessibility, Information Architecture, Responsive Web Design, Interactive Design, Search Engine Optimization, Trainging and Public Speaking.
In his profession, follow the best practices, W3C web standards and guidelines, responsive, semantic, usable, accessible, SEO friendly to cutting edge cording using XHTML/HTML5, CSS and jQuery for Pixel-perfect cross browser compatibility.
In his leisure blogging for technical articles and lifestyle photographer.