Making two column divs equal height using CSS | Equal height Dive without using Jquery | Fluid Equal Height Columns using CSS

Equal height columns is necessity of UI Developer. Creating a equal height columns DIVs using CSS is really a tough task for developers. At the end they have use tables to create Equal height columns.

Because to manage same height for every columns div is very tough as we know every div content can vary par page.

Here I posting the post for resolution of this issue of Equal Height. Solution provided by is a tricky thing done is css.

HTML Code

<div class="container">
        <div class="first-column">
            <ul>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
            </ul>
        </div>
        <div class="second-column">
            <ul>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
            </ul>
        </div>
    </div> 

CSS Code

 
<style type="text/css">
        ul li
        {
            list-style-type: disc;
            list-style-type: none;
            display: block;
        }
        .container
        {
            width: 600px;
            background: grey;
            float: left;
            overflow: hidden;
        }
        .first-column
        {
            width: 300px;
            border-left: 1px solid red;
            float: left;
            padding-bottom: 500px;
            margin-bottom: -500px;
        }
        .second-column
        {
            width: 296px;
            border-left: 1px solid red;
            float: left;
            padding-bottom: 500px;
            margin-bottom: -500px;
        }
    </style>

Here container class is wrapper for both column DIVs. margin-bottom and padding-bottom should have same value and its value will defer according to page content height. So always try to use maximum page height.

Example:- if your content height is 2000px then change margin and padding value with more than 2000 or more.

I hope this code will help all developers to make equal height DIVs. Please feel free to ask for any query at hari1_prasad@hotmail.com or click here.

Responsive Web Design | Latest Design Trend | Things to create mobile web

1. Responsive Web Design : To create a responsive web design we need to kept few things in mind. I have mentioned those thing in my article below.
   
   i) Design Architecture : Found this informative Article on http://webdesignerwall.com/tutorials/setting-breakpoints-in-responsive-design where they point for creating media queries for different screen sizes. According to its article we need to write CSS on basis of 5 different screen sizes. These are 1000 larger then, 1000px,760px, 600px, 480px, and 320px.
   
   

   Screen Size	HTML Architecture
   Larger then 1000px	3-column with fixed side header
   1000px to 760px	2-column with top header
   Below 760px	single column layout

   
   It covers all types of machines used to browse the web. To full fill this approach we can use common pattern of design the web layout.
   
   
   ii) Meta Tag : Mobile browsers render pages in a virtual "window" (the viewport), usually wider than the screen, so they don't need to squeeze every page layout into a tiny window (which would break many non-mobile-optimized sites). Users can pan and zoom to see different areas of the page.

   <meta name="viewport" content="width=device-width, initial-scale=1.0

   
   
   iii) Media Query : Web layout can appear to be restricted, sometimes unreadable on small mobile devices, and at other times too large on large wide screen displays. This is where media queries come in. Using this we can create different CSS attribute for specific class for different resolution. So they are still readable in small screen too.
   
   Media query comprises of a media type and one or many expressions to limit the scope of style sheets. Inside the media library, you can establish media queries such as "width," "height," or "color." With the help of the media queries, you can customize presentations to a specific range of output devices without actually changing the content.
   Below is example of writing media query.
   
   

   <link rel="stylesheet" media="(max-device-width: 320px)" ref="mobile.css" /> <link rel="stylesheet" media="(min-width: 1600px)" href="widescreen.css" /

   
   
   
   iv) Relative Font Size : don't use font size in Pixels (px) as its is used for fixed. Instead of using pixels use em or %. Here is table of selecting font-size of EM equivalent to PX .
   

   Pixels	EMs	Percent	Points
   6px	0.375em	37.5%	5pt
   7px	0.438em	43.8%	5pt
   8px	0.500em	50.0%	6pt
   9px	0.563em	56.3%	7pt
   10px	0.625em	62.5%	8pt
   11px	0.688em	68.8%	8pt
   12px	0.750em	75.0%	9pt
   13px	0.813em	81.3%	10pt
   14px	0.875em	87.5%	11pt
   15px	0.938em	93.8%	11pt
   16px	1.000em	100.0%	12pt
   17px	1.063em	106.3%	13pt
   18px	1.125em	112.5%	14pt
   19px	1.188em	118.8%	14pt
   20px	1.250em	125.0%	15pt
   21px	1.313em	131.3%	16pt
   22px	1.375em	137.5%	17pt
   23px	1.438em	143.8%	17pt
   24px	1.500em	150.0%	18pt

   
   
   v) Relative Padding / Margin / Line-Height / Width : As like Font-size we also avoid using Pixels for Padding / Margin / Line-Height / Width etc.. Use % instead of pixels for proportional space and gaping.
   
   
   vi) Word-Break Property : Don't forget to use word-Break CSS property. Because in small devices we have small screen to as a view area and if we need to give any URL or TEXT have no space and bigger length then device screen it will break out your design. So using word-Break property is safe side.
   Its a part of CSS3 which is not supported by all browsers but its good to be in practice. Here is example to use
   
   

   .break-word { word-wrap: break-word; }

   
vii) Flexible images : You should practice setting the max-width 100%, which means that an image will never exceed the size of its containing element. You can also apply this rule to other forms of embedded media like videos.

Interview Questions for HTML Developer, Interview Questions for Web designer, Interview Questions for CSS, Interview Question ask by Recuriter

Q 1.: Is CSS Case Sensitive?
Ans: CSS is case insensitive in all matters under its control; however, some things, such as the document markup language, are beyond its control. HTML is case insensitive in most respects,

Except when it comes to certain attribute values, like the id and class attributes. XHTML, being XML, is always case sensitive.

The trick is that if you write a document using an XML declaration and an XHTML doctype, then the CSS class names will be case sensitive for some browsers.

It is a good idea to avoid naming classes where the only difference is the case, for example:

div.myclass { ...}
div.myClass { ... }



Q 2.: What is ID Selectors?
Ans: A CSS id selector applies to the one element in the HTML document with the specified ID. Just like the class selector, the id selector is defined in the HTML. But unlike classes, each ID must be unique on the page.

The id selector is then defined with a hash- or pound-sign (#) before the id name.



Q 3.: What is Pseudo-classes?
Ans: CSS pseudo-classes are used to add special effects to some selectors.

A pseudo-class is similar to a class in HTML, but it’s not specified explicitly in the markup. Some pseudo-classes are dynamic—they’re applied as a result of user interaction with the document.
A pseudo-class starts with a colon (:). No whitespace may appear between a type selector or universal selector and the colon, nor can whitespace appear after the colon.

a:link { ⋮ declarations }
a:visited { ⋮ declarations }
a:focus { ⋮ declarations }
a:hover { ⋮ declarations }
a:active { ⋮ declarations }

Q 4.: Difference between HTML and XHTML?
Ans: There are very few minor points if we compare them as they are like identical twins. XHTML was actually derived from HTML. The major difference between them is coding in XHTML is comparatively strict than HTML that is if there are some lapses in structure and coding while working in HTML than it could get away easily but that is not a case while working in XHTML. In HTML, there is a liberty to ignore validation of the code. Moreover, tag closing is compulsory in XHTML which is not compulsory in HTML so XHTML closes the tags which were left open by HTML. So we can say that XHTML actually completes HTML.

Also in XHTML, closing of nested tags should be performed in same manner and form in which manner its opening was done. It is also done in HTML but it is not as strict as XHTML. Moreover, tags should be compulsorily used in lowercases in XHTML which is not the case in HTML.



Q 5.: Why we use <doc type="" /> in HTML and XHTML? What happens if we remove <doc type="" />
Ans: The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.

The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly.

If the DOCTYPE or XML declaration is ever removed from your pages, even by mistake, the last instance of the style will be used, regardless of case.
Means inheritance property can not be apply to its tags in regards of CSS. Also due to non standard lots of Scripts will not work properly into your HTML page.



Q 6.: Difference between PADDING and MARGIN?
Ans: Padding is the space inside the border between the border and the actual image or cell contents.Note that padding goes completely around the contents: there is padding on the top, bottom, right and left sides.

Margins are the spaces outside the border, between the border and the other elements next to this object. Note that, like the padding, the margin goes completely around the contents: there are margins on the top, bottom, right, and left sides.



Q 7.: What does !important mean in CSS?
Ans: The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, you would add the !important property to the tag. So, to make the paragraph text always red, in the above example, you would write:

p { color: #ff0000 !important; }
p { color: #000000; }
Important CSS also override the all inherited or ID attribute css.

User Style Sheets
However, the !important rule was also put in place to help Web page users cope with style sheets that might make pages difficult for them to use or read. Typically, if a user defines a style sheet to view Web pages with, that style sheet will be over-ruled by the Web page author's style sheet. But if the user marks a style as !important, that style will overrule the Web page author's style sheet, even if the author marks their rule as !important.



Q8:  What is Float? Explain its property.
Ans: The CSS float property allows a developer to incorporate table-like columns in an HTML layout without the use of tables. If it were not for the CSS float property,
The purpose of the CSS float property is, generally speaking, to push a block-level element to the left or right, taking it out of the flow in relation to other block elements. This allows naturally-flowing content to wrap around the floated element.



Q 9.:   What are the benefit of CSS3?
Ans    CSS3 a new version of CSS or cascading stylesheet benefits from technical features and properties. From better maintenance, loading speed, and layout design properties CSS3 is much more versatile. Designers get to implement the design elements from CSS3 in a simpler manner. Few of its advantages are:

Multi column layout
Multiple backgrounds
Text shadow
@font-face-Attribute
Border Radius
Box shadow
Media queries




Q10 :  What is Responsive Web design? What we need to do to implement RWD(Responsive Web Design).
Ans     Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities.

CSS Selectors, Types of CSS Selectors, Why not use IDs in CSS selectors, Problem using ID Selectors

To do styling and formatting to HTML we use Selectors in CSS.

CSS selectors:-

• Type selectors / Group Selectors
• Class selectors
• ID selectors

TYPE Selector/ Group Selectors

Type Selector are also called as GROUP Selector. It is easy to understand these selectors. Type selectors will select any HTML element on a page that matches the selector, regardless of their position in the document tree.

Example:-

h6 {color: blue; font-size:1em; }

Result:-

Example Result

Class Selector

Class Selectors are most easy and widely use to give formatting to HTML tags. unlike TYPE selectors it work on every HTML tag.

It can also use to override the formatting style of TYPE Selector.
Class Selectors are defined by DOT [ . ].

Example:-

.excerpt{ color:green }
h6{ color:red; }

Result:-

Example Result

ID selectors

ID selectors are similar to class selectors. They can be used to select any HTML element that has an ID attribute, regardless of their position in the document tree.

It can also use to override the formatting style of TYPE Selector.


Example:-

#excerpt{ color:green }
h6{ color:red; }

Result:-

Example Result

ID Selectors are defined by HASH [ # ].

The only difference between ID and Class selectors is we can define ID Selector once in whole HTML document as ID Selectors are unique in nature. But Class Selectors can use as many times on single HTML document we need.

Blink effect in html, Blinking effect, Blinking effect using J-Query, new effect without image, jquery effect of changing color

Blinking text animation is use to catch the user attraction for a particular thing or feature.
This effect is widely use for New link, services, and feature of websites. We can achieve this blink effect using CSS by using CSS attribute.

But this CSS attribute do not have support for all browsers. I have created a simple jquery script code to do the Blink effect in my companies website to achieve the same feature.

Now I want to share that Script code with my web friends.

JQuery Script Code

var i = 1;



function color() {



//alert(1);



if (i == 1) {



$('.txt').css("color", "red");



i += 1;



return;



}



if (i == 2) {



$('.txt').css("color", "black");



i += 1;



return;



}



if (i == 3) {



$('.txt').css("color", "blue");



i += 1;



return;



}



if (i == 4) {



$('.txt').css("color", "orange");



i = 1;



return;



}



}



setInterval(color, 400);

Put this script code before end of body tag.
give the class name "txt" to text for whom you want color animation.

you can increase the time of changing color animation by increase the value of 400 to your value in code.

setInterval(color, 400);

you can also change the color code according to your requirement.

Also put Jquery Library file.
JavaScript Library File

Rounded corner using CSS, Rounded corner DIV, Rounded Box, rounded corners in ie, rounded corner css with images, Simple Rounded corner CSS

Using rounded corners in design layout is most attractive feature of website. Every Site using rounded corner to make its design beautiful.

Basic designers use fixed width image to create the rounded corners.

Instead of using big images to make Rounded corners we can use CSS and tiny images for making round corners.

It helps to make low weight website. So it download fast on client server.

rounded corners using CSS 2.0

<div style="position: relative; padding: 7px 0px; width: 600px; margin: auto; background: #364957;">
        <img style="position: absolute; top: 0px; left: 0px; height: 11px;" src="../images/top_g.jpg" />
        <img style="position: absolute; top: 0px; right: 0px;" src="../images/top_g1.jpg" />
        <table width="100%;" cellspacing="0" cellpadding="0">
            <tbody>
                <tr style="color: White;">
                    <td style="text-align: center;">
                        hello
                        <br />
                        how are you
                    </td>
                </tr>
            </tbody>
        </table>
        <img style="position: absolute; bottom: 0px; left: 0px; height: 11px;" src="../images/top_gb.jpg" />
        <img style="position: absolute; bottom: 0px; right: 0px;" src="../images/top_gb1.jpg" />
    </div>

Rounded Corner using CSS 3.0

how arwe you dear


Its a test Rounded corners

but it uses CSS3

<style>
        .css3
        {
            -moz-border-radius-topleft: 10px;
            -moz-border-radius-topright: 20px;
            -moz-border-radius-bottomright: 30px;
            -moz-border-radius-bottomleft: 0;
            background: #eee;
            padding: 10px;
            -webkit-border-top-left-radius: 10px;
            -webkit-border-top-right-radius: 20px;
            -webkit-border-bottom-right-radius: 30px;
            -webkit-border-bottom-left-radius: 0;
        }
    </style>
    <div class="css3">
        how arwe you dear
        <br />
        Its a test Rounded corners<br />
        but it uses CSS3
    </div> 

But this technique support only for latest browsers who has CSS3 compatibility.

You can also create Pure Rounded corner CSS online:
http://www.spiffycorners.com/index.php

Jquery Smooth Navigation menu, DropDown Menus, MultiLvel DropDown Menu in Jquery, MultiLevel Menu on Click event

Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair. And that's a good thing given the important role of this element in any site. The menu's contents can either be from direct markup on the page, or an external file and fetched via Ajax instead. And thanks to jQuery, a configurable, sleek "slide plus fade in" transition is applied during the unveiling of the sub menus. The menu supports both the horizontalvertical (sidebar) orientation. and

 This menu i found from Dynamic Drive Smooth Navigation Menu and used for multiple website.

because it provides the orientation based Menu. Means we can use this menu as HORIZONTAL and VERTICAL also.

But this menu is work on hover event.

By modifying its jquery I able to run it on click event.

 

Multi Level CSS DropDownn, DropDown Menu, MiltiLevel menu, DropDown menu using CSS

Tomorrow I found an another Simple menu style which using CSS to create its drop down list and also it works upto 4 four level.

it use different  CSS style for this menu to work in IE6 using conditional CSS.

So I decided to put that complete code here so that my Designer friends can use and learn easily.


Head Code Section

<style type="text/css" media="screen, tv, projection">
/*<![CDATA[*/

/* page styling, unimportant for the menu. only makes the page looks nicer */
body {
 font-family: Calibri, "Trebuchet MS", sans-serif;
 font-size: 100%;
}

h1 {font-size: 2em;}
h2 {font-size: 1.5em;}

.example {
 background: #eee;
 padding: 50px;
}

/* - - - ADxMenu: BASIC styles [ MANDATORY ] - - - */

/* remove all list stylings */
.menu, .menu ul {
 margin: 0;
 padding: 0;
 border: 0;
 list-style-type: none;
 display: block;
}

.menu li {
 margin: 0;
 padding: 0;
 border: 0;
 display: block;
 float: left; /* move all main list items into one row, by floating them */
 position: relative; /* position each LI, thus creating potential IE.win overlap problem */
 z-index: 5;  /* thus we need to apply explicit z-index here... */
}

.menu li:hover {
 z-index: 10000; /* ...and here. this makes sure active item is always above anything else in the menu */
 white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
       see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}

.menu li li {
 float: none;/* items of the nested menus are kept on separate lines */
}

.menu ul {
 visibility: hidden; /* initially hide all submenus. */
 position: absolute;
 z-index: 10;
 left: 0; /* while hidden, always keep them at the top left corner, */
 top: 0;  /*   to avoid scrollbars as much as possible */
}

.menu li:hover>ul {
 visibility: visible; /* display submenu them on hover */
 top: 100%; /* 1st level go below their parent item */
}

.menu li li:hover>ul { /* 2nd+ levels go on the right side of the parent item */
 top: 0;
 left: 100%;
}

/* -- float.clear --
 force containment of floated LIs inside of UL */
.menu:after, .menu ul:after {
 content: ".";
 height: 0;
 display: block;
 visibility: hidden;
 overflow: hidden;
 clear: both;
}
.menu, .menu ul { /* IE7 float clear: */
 min-height: 0;
}
/* -- float.clear.END --  */

/* -- sticky.submenu --
 it should not disappear when your mouse moves a bit outside the submenu
 YOU SHOULD NOT STYLE the background of the ".menu UL" or this feature may not work properly!
 if you do it, make sure you 110% know what you do */
.menu ul {
 background-image: url(empty.gif); /* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */
 padding: 10px 30px 30px 30px;
 margin: -10px 0 0 -30px;
 /*background: #f00;*/ /* uncomment this if you want to see the "safe" area.
        you can also use to adjust the safe area to your requirement */
}
.menu ul ul {
 padding: 30px 30px 30px 10px;
 margin: -30px 0 0 -10px;
}
/* -- sticky.submenu.END -- */






/* - - - ADxMenu: DESIGN styles [ OPTIONAL, design your heart out :) ] - - - */

.menu, .menu ul li {
 color: #eee;
 background: #234;
}

.menu ul {
 width: 11em;
}

.menu a {
 text-decoration: none;
 color: #eee;
 padding: .4em 1em;
 display: block;
 position: relative;
}

.menu a:hover, .menu li:hover>a {
 color: #fc3;
}

.menu li li { /* create borders around each item */
 border: 1px solid #ccc;
}
.menu ul>li + li { /* and remove the top border on all but first item in the list */
 border-top: 0;
}

.menu li li:hover>ul { /* inset 2nd+ submenus, to show off overlapping */
 top: 5px;
 left: 90%;
}

/* special colouring for "Main menu:", and for "xx submenu" items in ADxMenu
 placed here to clarify the terminology I use when referencing submenus in posts */
.menu>li:first-child>a, .menu li + li + li li:first-child>a {
 color: #567;
}

/* Fix for IE5/Mac \*//*/
.menu a {
 float: left;
}
/* End Fix */

/*]]>*/
</style>



<!--  Conditional CSS for IE6 -->


<!--[if lte IE 6]>
<style type="text/css" media="screen, tv, projection">
/*<![CDATA[*/

/* - - - ADxMenu: IE6 BASIC styles [MANDATORY] - - - */

/*
 this rules improves accessibility - if Javascript is disabled, the entire menu will be visible
 of course, that means that it might require different styling then.
 in which case you can use adxie class - see: aplus.co.yu/adxmenu/examples/ie6-double-style/
 */
.menu ul {
 visibility: visible;
 position: static;
}

.menu, .menu ul { /* float.clear */
 zoom: 1;
}

.menu li.adxmhover {
 z-index: 10000;
}

.menu .adxmhoverUL { /* li:hover>ul selector */
 visibility: visible;
}

.menu .adxmhoverUL { /* 1st-level submenu go below their parent item */
 top: 100%;
 left: 0;
}

.menu .adxmhoverUL .adxmhoverUL { /* 2nd+ levels go on the right side of the parent item */
 top: 0;
 left: 100%;
}

/* - - - ADxMenu: DESIGN styles - - - */

.menu ul a { /* fix clickability-area problem */
 zoom: 1;
}

.menu li li { /* fix white gap problem */
 float: left;
 width: 100%;
}

.menu li li { /* prevent double-line between items */
 margin-top: -1px;
}

.menu a:hover, .menu .adxmhoverA {  /* li:hover>a selector */
 color: #fc3;
}

.menu .adxmhoverUL .adxmhoverUL { /* inset 2nd+ submenus, to show off overlapping */
 top: 5px;
 left: 90%;
}

/*]]>*/
</style>

<script type="text/javascript" src="ADxMenu.js"></script>
<![endif]-->

HTML Source Code

<div class="example">
        <ul class="adxm menu">
            <li><a href="#">Main menu:</a></li>
            <li><a href="#" title="My writings">Blog</a>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#feeds/">Feeds</a></li>
                    <li><a href="#archive/">Archive</a></li>
                </ul>
            </li>
            <li><a href="#adxmenu/" title="Nested fly-out menu, standard-compliant">ADxMenu</a>
                <ul>
                    <li><a href="#">1st submenu</a></li>
                    <li><a href="#adxmenu/">Overview</a></li>
                    <li><a href="#adxmenu/instructions/">Instructions</a></li>
                    <li><a href="#adxmenu/examples/">Examples</a>
                        <ul>
                            <li><a href="#">2nd submenu</a></li>
                            <li><a href="#adxmenu/examples/htb/">Top to bottom</a></li>
                            <li><a href="#adxmenu/examples/hbt/">Bottom to top</a>
                                <ul>
                                    <li><a href="#">3rd submenu</a></li>
                                    <li><a href="#">Item 2</a></li>
                                    <li><a href="#">Item 3</a></li>
                                    <li><a href="#">Item 4</a></li>
                                </ul>
                            </li>
                            <li><a href="#adxmenu/examples/vlr/">Left to right</a></li>
                            <li><a href="#adxmenu/examples/vrl/">Right to left</a></li>
                        </ul>
                    </li>
                    <li><a href="#adxmenu/trouble/">Troubleshooting</a></li>
                </ul>
            </li>
            <li><a href="#wch/" title="Windowed Controls Hider, for Win IE">WCH</a>
                <ul>
                    <li><a href="#wch/">Overview</a></li>
                    <li><a href="#wch/instructions/">Instructions</a></li>
                    <li><a href="#wch/examples/">Examples</a></li>
                    <li><a href="#wch/trouble/">Troubleshooting</a></li>
                </ul>
            </li>
            <li><a href="#lab/" title="Reusable web techniques">Lab</a>
                <ul>
                    <li><a href="#css/z-pos">z-index tutorial</a></li>
                    <li><a href="#css/forms/">Styling forms</a></li>
                    <li><a href="#css/cfl/">Centered frame layout</a></li>
                    <li><a href="#css/tabs2/">Tabs with variable height</a></li>
                    <li><a href="#css/nestedtabs2/">2-level navigation</a></li>
                    <li><a href="#css/ow/">Tabs: Overlapping Windows</a></li>
                    <li><a href="#scripts/windowopen/">Unobtrusive window.open</a></li>
                    <li><a href="#scripts/fif/">Floating iFrame</a></li>
                </ul>
            </li>
            <li><a href="#deliver/" title="Various sites I (co-)did">Delivered</a>
                <ul>
                    <li><a href="#deliver/sites/">Sites &amp; proof of concepts</a></li>
                    <li><a href="#deliver/wp/">WordPress goodies</a></li>
                </ul>
            </li>
            <li><a href="#about/" title="Relevant info about me">Colophon</a></li>
            <li><a href="#about/contact/">Contact me</a></li>
        </ul>
    </div>

JavaScript link

ADxMenu.js

Create HTML Scroller in div using CSS, CSS Tutorial to create HTML Scroller, CSS Scrollbar content

Last month I was working on my companies client website. he ask to me make scrollable area to show there text. because website content has too much text which increase the height of webpage too much.

So I did some quick research into creating my own Scroll area without using script as i have posted before for JavaScript Scroll bar content.

After Searching I found CSS attribute "Overflow" and i found that this attribute can help me to create my own scrollable content.

So here I am sharing the source code for CSS Scrollbar content.

CSS CODE With Div

<div style="width: 98%; padding: 1%; border: 2px solid rgb(170, 0, 0); height: 400px; overflow: auto;">
        <p>
            This Subscriber Agreement and Terms of Use govern your use of RIP (Revitalize Inspire
            Perform) online magazine, distributed by The Aquiline Group, and unless other terms
            and conditions expressly govern, any other electronic services from RIP magazine
            and the Aquiline Group that may be made available from time to time (each, a "Service").</p>
        <p>
            If you agree to be bound by the terms of this Agreement, you should click on the
            "I AGREE" button at the end of this Agreement. If you do not agree to be bound by
            the terms of this Agreement, you should click "I DISAGREE." If you click "I DISAGREE,"
            you will not be able to proceed with the registration process for the respective
            Service and become a subscriber. To the extent you have access to, or are using,
            a Service without having completed our registration process or clicked on an "I
            AGREE" button, you are hereby notified that your continued use of a Service is subject
            to many of the terms and conditions of this Agreement as explained in Section 5
            below.</p>
       

        <p>
            <strong class="con_head">5. Limitations on Use. </strong>
        <br>
            a.Only one individual may access a Service at the same time using the same user
            name or password, unless we agree otherwise.</p>
        <p>
            b.The text, graphics, images, video, metadata, design, organization, compilation,
            look and feel, advertising and all other protectable intellectual property (the
            "Content") available through the Services are our property or the property of our
            advertisers and licensors and are protected by copyright and other intellectual
            property laws. Unless you have our written consent, you may not sell, publish, distribute,
            retransmit or otherwise provide access to the Content received through the Services
            to anyone, including, if applicable, your fellow students or employees, with the
            following exceptions:</p>
        <p>
            (i) You may occasionally distribute a copy of an article, or a portion of an article,
            from a Service in non-electronic form to a few individuals without charge, provided
            you include all copyright and other proprietary rights notices in the same form
            in which the notices appear in the Service, original source attribution, and the
            phrase "Used with permission from RIP magazine" or "Used with permission from the
            Aquiline Group" as appropriate. Please consult the RIP magazine web site if you
            need to distribute an article from a Service to a larger number of individuals,
            on a regular basis or in any other manner not expressly permitted by this Agreement.</p>
        <p>
            (ii)While you may download, store and create an archive of articles from the Service
            for your personal use, you may not otherwise provide access to such an archive to
            more than a few individuals on an occasional basis. The foregoing does not apply
            to any sharing functionality we provide through the Service that expressly allows
            you to share articles or links to articles with others. In addition, you may not
            use such an archive to develop or operate an automated trading system or for data
            or text mining.</p>
        <p>
            c.You agree not to rearrange or modify the Content. You agree not to create abstracts
            from, scrape or display our content for use on another web site or service (other
            than headlines from our RSS Feed with active links back to the full article on the
            Service). You agree not to post any content from the Services (other than headlines
            from our RSS Feed with active links back to the full article on the Service) to
            weblogs, newsgroups, mail lists or electronic bulletin boards, without our written
            consent.</p>
        <p>
            d.You agree not to use the Services for any unlawful purpose. We reserve the right
            to terminate or restrict your access to a Service if, in our opinion, your use of
            the Service may violate any laws, regulations or rulings, infringe upon another
            person's rights or violate the terms of this Agreement. Also, we may refuse to grant
            you a user name that impersonates someone else, is protected by trademark or other
            proprietary right law, or is vulgar or otherwise offensive.</p>
       

        <p>
            iii. Grant of Rights and Representations by You. If you upload, post or submit any
            User Content on a Service, you represent to us that you have all the necessary legal
            rights to upload, post or submit such User Content and it will not violate any law
            or the rights of any person. You agree that upon uploading, posting or submitting
            information on the Services, you grant the Aquiline Group, and our respective affiliates
            and successors a non-exclusive, transferable, worldwide, fully paid-up, royalty-free,
            perpetual, irrevocable right and license to use, distribute, publicly perform, display,
            reproduce, and create derivative works from your User Content in any and all media,
            in any manner, in whole or part, without any duty to compensate you. You also grant
            us the right to authorize the use of User Content, or any portion thereof, by users
            and other users in accordance with the terms and conditions of this Agreement, including
            the rights to feature your User Content specifically on the Services and to allow
            other users or users to request access to your User Content, such as for example
            through an RSS Feed.</p>
        <p>
            iv. We may also remove any User Content for any reason and without notice to you.
            This includes all materials related to your use of the Services or membership, including
            email accounts, postings, profiles or other personalized information you have created
            while on the Services.</p>
        <p>
            v. Copyright/IP Policy. It is our policy to respond to notices of alleged infringement
            that comply with the Digital Millennium Copyright Act. For more information about
            our policy, please see our Privacy Policy.</p>
        <p>
            <strong class="con_head">7. Third Party Web Sites, Services and Software. </strong><br>
            We may link to, or promote web sites or services from other companies or offer you
            the ability to download software from other companies. You agree that we are not
            responsible for, and do not control, those web sites, services and software.</p>
        <p>
            <strong class="con_head">8. DISCLAIMERS OF WARRANTIES AND LIMITATIONS ON LIABILITY.
            </strong><br>YOU AGREE THAT YOUR ACCESS TO, AND USE OF, THE SERVICES AND THE CONTENT
            AVAILABLE THROUGH THE SERVICES IS ON AN "AS-IS", "AS AVAILABLE" BASIS AND WE SPECIFICALLY
            DISCLAIM ANY REPRESENTATIONS OR WARRANTIES, EXPRESS OR IMPLIED, INCLUDING, WITHOUT
            LIMITATION, ANY REPRESENTATIONS OR WARRANTIES OF MERCHANTABILITY OR FITNESS FOR
            A PARTICULAR PURPOSE. We do not give tax or investment advice or advocate the purchase
            or sale of any security or investment. You should always seek the assistance of
            a professional for tax and investment advice. THE AQUILINE GROUP AND ITS SUBSIDIARIES,
            AFFILIATES, SHAREHOLDERS, DIRECTORS, OFFICERS, EMPLOYEES AND LICENSORS WILL NOT
            BE LIABLE (JOINTLY OR SEVERALLY) TO YOU OR ANY OTHER PERSON AS A RESULT OF YOUR
            ACCESS OR USE OF THE SERVICES FOR INDIRECT, CONSEQUENTIAL, SPECIAL, INCIDENTAL,
            PUNITIVE, OR EXEMPLARY DAMAGES, INCLUDING, WITHOUT LIMITATION, LOST PROFITS, LOST
            SAVINGS AND LOST REVENUES (COLLECTIVELY, THE "EXCLUDED DAMAGES"), WHETHER OR NOT
            CHARACTERIZED IN NEGLIGENCE, TORT, CONTRACT, OR OTHER THEORY OF LIABILITY, EVEN
            IF ANY OF THE AQUILINE GROUP PARTIES HAVE BEEN ADVISED OF THE POSSIBILITY OF OR
            COULD HAVE FORESEEN ANY OF THE EXCLUDED DAMAGES, AND IRRESPECTIVE OF ANY FAILURE
            OF AN ESSENTIAL PURPOSE OF A LIMITED REMEDY. IF ANY APPLICABLE AUTHORITY HOLDS ANY
            PORTION OF THIS SECTION TO BE UNENFORCEABLE, THEN THE AQUILINE GROUP PARTIES' LIABILITY
            WILL BE LIMITED TO THE FULLEST POSSIBLE EXTENT PERMITTED BY APPLICABLE LAW.</p>
        <p>
            <strong class="con_head">9. General.</strong><br>This Agreement contains the final
            and entire agreement between us regarding your use of the Services and supersedes
            all previous and contemporaneous oral or written agreements regarding your use of
            the Services. We may discontinue or change the Services, or their availability to
            you, at any time. This Agreement is personal to you, which means that you may not
            assign your rights or obligations under this Agreement to anyone. No third party
            is a beneficiary of this Agreement. You agree that this Agreement, as well as any
            and all claims arising from this Agreement will be governed by and construed in
            accordance with the laws of the District of Columbia, United States of America applicable
            to contracts made entirely within the District of Columbia and wholly performed
            in Washington, D.C., without regard to any conflict or choice of law principles.
            The sole jurisdiction and venue for any litigation arising out of this Agreement
            will be an appropriate federal or state court located in Washington, D.C. This Agreement
            will not be governed by the United Nations Convention on Contracts for the International
            Sale of Goods.</p>
    </div>

Just copy and paste above text into body tag of your HTML.

and you will find content like this.

Div Scroll Area using CSS

Online link

Multi Level CSS Menu, Four Level Dropdown Menu, Milti Level menu

Menu is now a very important part for a dynamic website where there are lots of inner link for a specific menu.

Example of final product:

here I am providing the four Level menu using CSS to create HTML.

HTML for Menu Binding

<ul id="navmenu">
        <li><a href="#" class="current"><span>Financial</span></a>
            <ul>
                <li><a href="#">Test1</a>
                    <ul>
                        <li><a href="#">Test2</a></li>
                        <li><a href="#">Test2</a></li>
                        <li><a href="#">Test2</a></li>
                        <li><a href="#">Test2</a>
                            <ul>
                                <li><a href="#">Test3</a></li>
                                <li><a href="#">Test3</a></li>
                                <li><a href="#">Test3</a></li>
                                <li><a href="#">Test3</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Test1</a></li>
                <li><a href="#">Test1</a></li>
                <li><a href="#">Test1</a></li>
            </ul>
        </li>
        <li><a href="#"><span>Deposit Schemes</span></a> </li>
        <li><a href="#"><span>Loan</span></a> </li>
        <li><a href="#"><span>Services</span></a> </li>
        <li><a href="#"><span>Customer Services</span></a> </li>
        <li><a href="#"><span>Investor Center</span></a> </li>
        <li><a href="#"><span>About Us</span></a> </li>
    </ul>

CSS Use to create Four Level CSS Menu

/* Common Css  */
#navmenu,.navmenu{ clear: both; margin: 0 4px 0 3px; padding: 0 0 6px;  }

img{border:0px none; margin:0; padding:0}
.menu_container{padding-left:4%; float:left; width:96%;}

/*.arrow{background-image:url(../images/arrow.png); background-position:right center; background-repeat:no-repeat; padding-right:10px;}*/

#current{color:#000;}
#navmenu li .current { color: #22a406; }
/* menu css */
ul#navmenu {margin:0; border:none; padding:0; z-index:800; cursor:pointer;
    width:auto; /*For KHTML*/
    list-style:none; height:auto; padding-left:0px;    float:left; border-bottom:none;
    /*For IE*/
     border-bottom:none;}
  
  

ul#navmenu li {margin:0; border:none; padding:0;float:left; cursor:pointer;     /*For Gecko*/
    display:inline; list-style:none; position:relative;    height:auto; z-index:1000;}


ul#navmenu ul {margin:0;  border:none;  padding:0 0 0 0; width:182px; float:left; list-style:none;  display:none;
  position: absolute; top:26px; left:0; cursor:pointer; z-index:500;}

ul#navmenu ul li {float:left;cursor:pointer;
/*For Gecko*/
    display: block !important;display: inline;}
  
  
    /* Root Menu */
/* ul#navmenu a {float: none !important; /*For Opera*/
    /*float: left; /*For IE*/
    /*display: block; color: #fff; text-decoration:none; height:10px;font-family:Arial;    font-size: 12px;
    font-weight:bold;  padding-top:4px; padding-right: 21px; padding-bottom:4px;
    padding-left: 15px;    margin: 0px; background:url(../images/tableftB.gif) no-repeat left top;}*/

/* Root Menu */
ul#navmenu a {float: none !important; /*For Opera*/
    float: left !important; /*For IE*/
    display:block; color: #000000; text-decoration:none; font-family:Arial;font-size:11px;font-weight:bold;
    font-weight:bold; margin:0; line-height:18px; cursor:pointer;
    background:url('../images/tableftB.gif') no-repeat left top;border:1px none;; padding-left:28px; padding-right:0; padding-top:0; padding-bottom:0}
  
  
ul#navmenu a span{float: none !important; /*For Opera*/
    float: left !important; cursor:pointer; /*For IE*/
    display: block; text-decoration:none; font-family:Arial;font-size: 12px;
    font-weight:bold; line-height:18px;
    background:url('../images/tabrightB.gif') no-repeat right top; border:1px none; margin-left:0; margin-right:2.2px; margin-top:0; margin-bottom:0; padding-left:0; padding-right:25px; padding-top:4px; padding-bottom:4px

}

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {color:#06c;}


#border_bttom{border-bottom:1px solid #22a406;}
/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {float:none; border-left:1px solid #d6d6d6; border-right:1px solid #d6d6d6; border-top:1px solid #d6d6d6; color:#000; z-index:900; line-height:20px; background-color:#ffffff;
border-bottom:medium none; width:134px; float:left; background-image:url('none');
z-index:900;
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {color:#06c; background-color:#ffffff;}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {left:163px; position:relative; color:#333;background-color:#ffffff;
z-index:900;
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {color:#06c; background-color:#ffffff;}
      
/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {left:326px; position:relative; color:#333;background-color:#ffffff;
z-index:900;
 }

/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {color:#06c; background-color:#ffffff;
z-index:900;
}

ul#navmenu ul ul,
ul#navmenu ul ul ul {display:none; position:absolute; top:0; left:0px;}


/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {display:none;color:#000;}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {display:block;}

ID name NAVMENU is called to create Four Level Menu.

But this four level menu will work CSS only in above IE6 version.

If you want to run this menu in IE6 then you need to add Java-script file to your source code.

Javascript File
JS