how to display three items per row using CSS

Description:

In this example we explain that how to display three items per row using CSS.or how to display three items or three Checkboxes per row in Checkbox List using CSS.or how I can show three column per row that’s type of question was raised by many developers.

So in this scenario we have a requirement like Checkbox List contains 50 items and we have to display three items per row.

So to achieve this below is the code to display 3 items per row or per line using CSS.

Scrollable GridView with Responsive Fixed Headers in ASP.Net using JavaScript

Description:
In this example we explain that how to create scrollable Grid View with Fixed header in asp.net using JavaScript and CSS.or Grid View with Fixed Header and scrollbar in asp.net using JavaScript. Or Fixed Grid view header with horizontal and vertical scrolling in asp.net using CSS.

Previously we already explain that fixed header when scrolling in grid view in asp.net but here we demonstrate same thing using JavaScript and also it responsive also.so responsive fixed header when scrolling grid view in asp.net using JavaScript.

Highlight row of WebGrid on Mouseover (Mouse Hover) in MVC using CSS

Description:

In this example we explain that Highlight rows of the WebGrid on Mouse over using CSS in Asp.Net MVC.or how to Highlight row of WebGrid in MVC when mouse hover using CSS.or how to change the colour of the row of the WebGrid in MVC Razor view using CSS.

So here we demonstrate that how to highlight the web grid or grid view row when mouse is hover using CSS in MVC Razor view.

how to change CSS dynamically from code behind in asp.net using C#

Description:-

In this example we explain that how to change CSS dynamically from code behind in asp.net using C#. or how to change CSS file programmatically in C# code(back end  code) in asp.net.

Some time we have requirement like if user click on or check Lightweight button then Lightweight CSS is apply to the application for these user only same like if user checked or click on Professional button then Professional look is applied to the application for these user only these totally is dynamic and depend on user requirement.

So how to change or switch CSS file dynamically from code behind in asp.net using C#.

JQuery datepicker calender with Dropdown month and year in asp.net.

Description:-

In this example we explain that how to Display calendar with Dropdown in month and year for selecting month and year in asp.net using jquery. Or display or bind month and year in DropdownList in calendar for selecting month and year in asp.net.

We already explain that display calendar in asp.net but in simple calendar if you want select before 50 year ago year then you have to press back button of the year in calendar control many time so it is time consuming. But now in this calendar you simply directally select year that you want in dropdown inside in calendar control.

 

Convert Text to Uppercase While Typing in Textbox

Description:-

In this example we explain that how to convert text to uppercase while typing or entering text in textbox. Or how to make character uppercase when you enter text in textbox.

We all show that in many websites there is a many field have a this facility like in your First name and Last name you fill up the form this two field automatically get uppercase text . So achieve this type of facility in your application you should follow the following code.

dropdown list with auto complete or searchable or filtering using JQuery with ASP.Net

In this example we explain that how to create dropdown list with autocomplete facility or search facility or filtering facility with dropdownlist in asp.net.previous we already explain that autocmplete facility with textbox but in this we explain that autocomplete with Dropdownlist in asp.net.

Suppose you have a large amount of value or country that you want to bind in dropdown list. But problem is that when user select country then user have to manually find country in dropdownlist by scrolling the dropdownlist when there is a thousand of value are binded to dropdownlist.

So avoid this problem and you want to make that dropdownlist user-friendly. You use auto search functionality in ASP.Net Dropdownlist control.

to do this functionality in dropdownlist first You  have to take one textbox inside dropdown list and when user type something in that textbox dropdown list become filter or  searchable and it will display only those records that are matched within textbox value without doing any postback.

mvc example for display grand total in footer of webgrid Footer template in webgrid in mvc4

create awesome vertical menu using CSS Fancy vertical menu in CSS

Create watermark text for TextBox in asp.net using javascript or jquery

Description:-

In this example we explain that how to create watermark text for TextBox in asp.net using javascript or jquery with css. Or create stylish or effective watermark text in textbox in asp.net.

Here we use jquery and css to create watermark text for textbox in this applicaton in asp.net.here we explain that how to set watermark text for asp.net textbox so user can easily understand what should to be enter in textbox at the time of fillup form.

So how to create fancy watermark text for textbox using javascript/jquery with css in asp.net are as follows

Dynamically Bind Data in Ajax Accordion Panel Bind Data to Accordion from databse

Restrict the size of File when Uploaded How to Restrict the size of File when uploaded by user

Create Facebook like search box with auto complete using jquery, ajax in Asp.net

Description:-

In this example we explain that how to create Facebook type search box with auto complete using jquery,ajax in asp.net.here we explain that Facebook style autocomplete textbox search using jquery and ajax in asp.net.

Previous time we already explain that autocomplete textbox search in asp.net and also in mvc application and webservices. But to display something fancy search box facility same like facebook when we search our friend then it's related information are displayed in box with his photo. Today all user like this type of fancy and good looking facility in your website.

How to Bind Excelsheet Data to Gridview CRUD operation in Excelsheet Database

How to Display Layer on one Another in CSS Overlapping Layer in CSS

So here is a code that demostrate how to create facebook style search in asp.net

How to highlight DataList item on mouseover in ASP.NET

Description:-

In this example we explain that how to Highlight DataList Item on mouse over in asp.net or change the DataList item look and design or background when mouse is over in each items on the DataList in asp.net.

Previous we already explain this same thing in gridview but some time we have requirement in Datlist control like in online shopping application that you develop you must have to use the DataList control to dislay Item with it's price and Description. So to highlight each items in DataList you have to refer the following code.

Here we use custom css style/sheet for highlight the DataList items. In style sheet we define the style that will apply when mouseis over in each items of the DataList and highlight the DataList items.

To show Example How to insert,update,delete in DataList control clikck here  CRUD operation in DataList 

 How to Bind Excelsheet Data to Gridview CRUD operation in Excelsheet Database

Example Of Royal Flush in CSS

What is Royal Flush :-

        Royal means straight containing the Highest card of the one suit, generally we all know that it is a game of card.

In this example we include that how to create a Royal Flush Game Effect in your website for that this program is very  useful.

In this Example we Display Each card Overlaps with each Other like hiding one another.

To display on eachother we use a z-index property of the CSS like as Follow

#king_of_diamonds {

       position: absolute;

       left: 145px;

       top: 145px;

       z-index: 4;

}

What is z-index property in CSS:-

The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.

Syntax:- object.style.zIndex="1"

Example of Vertical Menu in CSS Beautiful Vertical Menu Using CSS

OverLaps Layer with Each Other in CSS Display Layer on EachOther or OverLaps Layer

CSS Positionning -Fixed, Absolute,Relative and Static Position in CSS

Positioning

The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.
There are four different positioning methods.

---

Static Positioning

HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.
Static positioned elements are not affected by the top, bottom, left, and right properties.

Example of Vertical Menu in CSS Beautiful Vertical Menu Using CSS

OverLaps Layer with Each Other in CSS Display Layer on EachOther or OverLaps Layer

How to Display Overlaps Layer on one Another in CSS

What is Layer :-

        Layer means peace of Html display on a top of the page with in pixel Format.
To Define the one layer you have to first set it’s position and width and height.

  For example:-

div.layer1 {    

                               background-color:lime;

                             width:150px;

                             height:150px;

                               position:relative;

                             top:10px;

                               left:80px;

                               z-index:4

                             }

The above code display that the one Layer is create with Lime  color and its width and Height is 150*150. And  Z-index Define the priority that which Layer are display on top and which are bottom. Left and Top Display the position of pixel the image or Content should be Display in Left or top Side.

Example of Vertical Menu in CSS Beautiful Vertical Menu Using CSS

OverLaps Layer with Each Other in CSS Display Layer on EachOther or OverLaps Layer

In this example we are create three layer and each layer are overlaps with each other.

Example of Absolute and Relative Position Property in CSS

Positioning:-

The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.

Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.

There are four different positioning methods.

Relative Positioning

A relative positioned element is positioned relative to its normal position.
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
The content of a relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.
Relatively positioned element are often used as container blocks for absolutely positioned elements.

Absolute positioning

An element which is positioned absolute does not obtain any space in the document. This means that it does not leave an empty space after being positioned.
To position an element absolutely, the position property is set as absolute. You can subsequently use the properties left, right, top, and bottom to place the box.
As an example of absolute positioning, we choose to place 4 boxes in each corner of the document:

#box1 {

        position:absolute;

        top: 50px;

        left: 50px;

}

#box2 {

        position:absolute;

        top: 50px;

        right: 50px;

}

#box3 {

        position:absolute;

        bottom: 50px;

        right: 50px;

}

#box4 {

        position:absolute;

        bottom: 50px;

        left: 50px;

}

Relative positioning

To position an element relatively, the property position is set as relative. The difference between absolute and relative positioning is how the position is being calculated.
The position for an element which is relatively positioned is calculated from the original position in the document. That means that you move the element to the right, to the left, up or down. This way, the element still obtains a space in the document after it is positioned.
As an example of relative positioning, we can try to position three pictures relatively to their original position on the page. Notice how the pictures leave empty spaces at their original positions in the document:

#dog1 {

        position:relative;

        left: 350px;

        bottom: 150px;

}

#dog2 {

        position:relative;

        left: 150px;

        bottom: 500px;

}

#dog3 {

        position:relative;

        left: 50px;

        bottom: 700px;

}

Absolute CSS Positioning

Absolute positioning is the easiest to understand. You start with the CSS position property:
position: absolute;
This tells the browser that whatever is going to be positioned should be removed from the normal flow of the document and will be placed in an exact location on the page. It is also taken out of the normal flow of the document - it won't affect how the elements before it or after it in the HTML are positioned on the Web page.
If you want to position an element 10ems from the top of the document window, you would use the "top" offset to position it there with absolute positioning:
position: absolute;
top: 10em;
This element will then always display 10em from the top of the page - no matter what else displays there in normal flow.
The four positioning properties are:

• top
• right
• bottom
• left

To use them, you need to think of them as offset properties. In other words, an element positioned right 2em is not moved right 2em. It's right side is offset from the right side of the window 2em. The same is true for the other three.

Relative Positioning

Relative positioning uses the same four positioning properties as absolute positioning. But instead of basing the position of the element upon the browser view port, it starts from where the element would be if it were still in the normal flow.
For example, if you have three paragraphs on your based on it's current location - not from the original sides of the view port. Web page, and the third has a position: relative style placed on it, it's position will be offset
<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
<p style="position: relative;left: 2em;">Paragraph 3.</p>
In the above example, the third paragraph will be positioned 3em from the left side of the container element, but will still be below the first two paragraphs. It would remain in the normal flow of the document, and just be offset slightly. If you changed it to position: absolute; anything following it would display on top of it, because it would no longer be in the normal flow of the document.

Creating a Zoom Effect on an Image on hover using CSS

Description:-


In this Example we explain that how to create OnMouseOver Effect to Display Image in Zoom Mode when the mouse is over to this particular iamge.

To Create OnmouseOver Effect to Display Zoom image for this hover property of the CSS is used.
Hover property of CSS:-

            By using this property you can select elements when you mouse over them.

For Ex:-

                div.img a:hover img

  {

  border:1px solid #0000ff;

  height:110;

  width:150;

  }

You can also apply hover Effect not only <a> tag you can apply on any Element.

Here is an example in which there are Five image when you move on First image then this image size is automatically change then other four image. This rule is appiled also to another Four image.
So,using this example you can improve your webDesign page very Beautyfull.

How To Create Horizontal and Vertical Navigation Menu Using CSS

Description:-

 in this example we explain that how to create a vertical Menu in your WebPage or Website.

Generally we all know that there is a Horizontal Menu in Each and Every Website so we can Built Deiffernt or Unique Menu By using this menu and you can also make your Website very Beautyfull or very user Friendlly.

In this example we create a vertical menu and also give link to this menu so the page is Redirect to this page Directally.

Example of Vertical Menu in CSS Beautiful Vertical Menu Using CSS

OverLaps Layer with Each Other in CSS Display Layer on EachOther or OverLaps Layer

CSS Styling Links or Example of Text Decoration Property in CSS

 
Defination:-

            Text Decoration means decoration added to  the text.

Syntax:-

object.style.textDecoration="overline"

Property of textdecoration in CSS:-

Scrollable Table with Fixed Header Using CSS

Description:-

in this example we explain that how to create a scrollbar in Table or Div or any Content so content is Display in proper way.

Css Overflow Property

Property Values

Value	Description
visible	The overflow is not clipped. It renders outside the element's box. This is default(ignore hight and width)
hidden	The overflow is clipped, and the rest of the content will be invisible
scroll	The overflow is clipped, but a scroll-bar is added to see the rest of the content
auto	If overflow is clipped, a scroll-bar should be added to see the rest of the content

 

The main Advantages of the Scrollbar is that when the size of data is Large and you can Display in Table Format.

For Example:-

          Suppose you have a 10000 Record that you have to Display in a table Format at that time it may require much more Spaces and our webpage can not contain other control so at that time you can use this Example and Display in very short size with scrollbar.

How to create a 3-column layout with CSS

Description:-

In this Example we Explain that how to Display your Content of the page in Three Coloumn in webpage. We all see that  in Newspaper Site the Content of the News was display in three coloumn or we also see in some Articles content same Like this so to Display Your Content in three coloumn this example is used.

in this Example we used External Stylesheet and Devide page into three part like 33 % and displaying this type of Format. here is a style to Display a part of the 33%.

For Ex:-

#column1 {

            float:left;

            width: 33%;

      }

The main Advantages of the this Example is to Devloping Website Like Newspaper or Artcle at that time this is very useful and you can Display Your News and page content in webpage very clearly.