CSS Power

HTML Code

Hover Me!this is tootip text

CSS Code

a.tooltip {
 text-transform: uppercase;
  background: #ececec;
  color: #555;
  cursor: help;
  font-family: arial;
  font-size: 20px;
  margin:0;
  padding: 15px 20px;
  position: relative;
  text-align: center;
  width: 200px;
}
a.tooltip .cloud_box {
 background: #1496bb;
  bottom: 100%;
  color: #fff;
  display: block;
  left: -25px;
  margin-bottom: 15px;
  opacity: 0;
  padding: 20px;
  pointer-events: none;
  position: absolute;
  width: 100%;
}
a.tooltip .cloud_box:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  
a.tooltip .cloud_box:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #1496bb 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
 a.tooltip:hover .cloud_box{  opacity: 1;
  pointer-events: auto;

Result

Simple Jquery Read More/Less Script

With this simple function you can easily add a functionality to show more/less content..

Media queries don't work on OS 5.0 and lower, in Blackberry Devices so in place of media queries you can use a special style-sheet for lower version and your common media query style-sheet for higher version and to achieve that you have to define blackberry user-agent as in given example below..

//blackberrymobile 
  var ua = navigator.userAgent;
    if (ua.indexOf("BlackBerry") >= 0) {
        if (ua.indexOf("Version/") >= 0) { // ***User Agent in BlackBerry 6 and BlackBerry 7
            Verposition = ua.indexOf("Version/") + 8;
            TotLenght = ua.length;
          
     var $ = document; // shortcut
     var cssId = 'myCss';  // you could encode the css path itself to generate id..
     if (!$.getElementById(cssId))
     {
       var head  = $.getElementsByTagName('head')[0];
       var link  = $.createElement('link');
       link.id   = cssId;
       link.rel  = 'stylesheet';
       link.type = 'text/css';
                   
       link.href = 'mediaquery.css';
      
       link.media = 'all';
       head.appendChild(link);
     }
        }
        else {// ***User Agent in BlackBerry Device Software 4.2 to 5.0
            var SplitUA = ua.split("/");
          
     var $ = document; // shortcut
     var cssId = 'myCss';  // you could encode the css path itself to generate id..
     if (!$.getElementById(cssId))
     {
       var head  = $.getElementsByTagName('head')[0];
       var link  = $.createElement('link');
       link.id   = cssId;
       link.rel  = 'stylesheet';
       link.type = 'text/css';
       link.href = 'smallscreen.css';
            link.media = 'all';
       head.appendChild(link);
     }
     
         }
    }

Resize Text to Fill Div Space

With the help of this simple javascript you can make the text fill the whole width of the div just like in the example below.

Checklist for Design Guidelines to Six Sigma

Phases I - Design and Development

Jpeg Design Layout send to the client for the approval for the relevant product
Design layouts review, changes and finalization
Conversion of the layout to HTML and website development
Content Integration including text, images and interactive forms
Intermediate progress updates to the client
Final Completion of the phase

Designing the layout

1.    Creative should be interactive, communicative and user friendly.
2.    Use of right fonts - Fonts play a vital role in your content. These are the style used in your content. A good choice of font can make your site more desirable and reader's friendly.
3.    What lies beneath? - Design involves creativity, visualization and inherent skills. A well designed website can turn into an important marketing tool for your business. An appealing website creates your specific business identity which differ you from your competitors.
4.    Margins within the content needs to be equal in every case.
5.    Highlight the Important Information- Always highlight the expertise or the important information like the name of the company, institution name, or any information which will attract the eye of the user.

Create ID for HTML element using Jquery function

Here’s a simple Example on how to provide ID's to any Html element using jQuery.. Copy paste the above code to see how it works.

Show Hide multiple divs using Jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
function show_visibility(IDS){
hide_visibility();
document.getElementById(IDS).style.display = 'block';
}

function hide_visibility(){
var sel = document.getElementById('lnks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
}

</script>
<title>Untitled Document</title>
</head>
<style>
.showCnt { background:#009; width:100%; color:#fff; margin:0 0; height:50%; right:150px; display:none; }
</style>
<body>
<ul id="lnks">
  <li><a href="#" id="LinkShow1" onclick="show_visibility('g1',this);">Huidige situatie</a>
    <div class="showCnt" id="g1">a sdasd sa</div>
  </li>
  <li><a href="#" id="LinkShow2" onclick="show_visibility('g2')">Behoud van garantie</a>
    <div class="showCnt" id="g2">a sdasd sa</div>
  </li>
  <li><a href="#" id="LinkShow3" onclick="show_visibility('g3')">Keuzevrijheid consument</a>
    <div class="showCnt" id="g3">a sdasd sa</div>
  </li>
  <li><a href="#" id="LinkShow4" onclick="show_visibility('g4')">Merkdealer vs. universeel</a>
    <div class="showCnt" id="g4">a sdasd sa</div>
  </li>
</ul>
</body>
</html>

Here’s a simple Example on how to show/ hide multiple divs using jQuery. First we include the Google jQuery library, the next steps simple. We now create two function with Show visibility and Hide visibility. Copy paste the above code to see how it works.

Adobe creative Suite 3

Discover a complete creative solution for education, with design tools for print, web, interactive, mobile, and video content. From creating course curriculum to enhancing student projects, you can use Adobe® Creative Suite® 3 software to express your ideas faster, more efficiently, and with more freedom than ever before.

To known more about this product:
http://www.adobe.com/creativelicense/
http://www.adobe.com/education/products/creativesuite/

To download the trial version :
http://www.adobe.com/special/try_buy/trial_availability.html

Good Design Practices

Your website is where your business resides — it’s like the headquarter of an offline company. Hence, it is important to practice good design principles to make sure your site reaches out to the maximum number of visitors and sells to as many people as possible.

Make sure you have clear directions on the navigation of your website. The navigation menu should be uncluttered and concise so that visitors know how to navigate around your website without confusion.

Reduce the number of images on your website. They make your site load very slowly and more often than not they are very unnecessary. If you think any image is essential on your site, make sure you optimize them using image editing programs so that they have a minimum file size.

CSS Power

Pages

Tooltip with CSS