Abele Design
Reliable website development and cutting edge design at affordable price.
free quote
Need a website?
Get free quote today!

IT solutions by AbeleDesign Montreal, QC

PHP scripts

CSS example codes

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;	
	
}