IT solutions by AbeleDesign Montreal, QC

Case studies in SEO and Internet marketing

Knowledge base in PHP, MySQL, Ajax

Useful CSS examples

Cascading style sheets or shortly CSS is a language for improving the overall design of the webpage

CSS supported Internet browsers

All W3 compliant graphical browsers have implementation of CSS. The most popular are: IE, Mozilla FireFox, Safari, Chrome, Opera and WebRenderer

CSS examples

Creating a centered container element within the text body of the page:

.centered {
    width:960px;
    background-color:#EFEFEF;
    border:1px solid #EF3412;
    margin:10px auto 10px auto;
    text-align: left;
    }

And then use this class in your body code by inserting it:

<html>
	<body>
		
	<div class="centered">
			
	<!--code for the content -->
	</div>
		
	</body>
</html>

Simple css menu:

Design elegant and simple menu using only CSS and HTML. Inlcude the follwing part in your CSS:


#navig li ul { 
		width: 5em;	
		display: none; 
		background-color: #EEE;
}
    
#navig li:hover ul, #navig li.hover ul { 	
	display: block; 	
	position: absolute; 	
	margin: 0; 	
	padding: 0; 
} 

#navig li:navig li, #navig li.hover li { 
	float: none; 
} 

#navig li:hover li a, #navig li.hover li a { 	
	background-color: #69f; 	
	border-bottom: 1px solid #fff; 	
	color: #000; 
}

<ul id="navig"> 	
<li><a href="item1.htm">Main Item 1</a><ul>
	<li><a href="sub1">Sub 1</a></li>
	<li><a href="sub2">Sub 2</a></li>
</ul> 	</li> 	<!-- ... more items ... --> </ul>

Tableless CSS design:

Using CSS to create containers with fiexed height sometimes might be a tricky job especially when you are used with the easy TABLE tag and the structure of table-based websites. Here we have an example of CSS where tables are created completely using DIV tags and CSS attributes:


body{
	font-family:"Lucida Grande", "Lucida Sans Unicode", 
				Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}

li {
	line-height:15px;
	list-style-type: none;
	border-bottom:1px dotted #CCC;
}

h5 {
	font-size:111%;
	margin:0;
	padding:0; clear:both;
}


.lbl {
	width:300px;
	float:left;
}

.result {
	
	width:50px;
	float:left;
}

.clear {
	clear:both;
}

.total {
	
	margin-left:300px;	
	
}