Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Wednesday, 1 January 2014

Working with label Control and its Properties in Asp.net

01:33  , , , ,  No comments 

 





Description:- A Label is used to display the text on the Page.Using TextBox and Button we can display the text from textbox into Label control.The properties of labels are as follows


    

  • AccessKey,Attributes,BackColor ,BorderColor,BorderStyle,BorderWidth,CssClass,Enabled,Font,EnableTheming,ForeColor,Height, IsEnabled,SkinID,Style,TabIndex,ToolTip,Width,EnableViewState,Visible,
    • 

  • Now in this Example we need one Text Box,one Button and one Label to display the Text.
    • 








Demo:- 





















Design Code:-  
 Code Behind:- 
public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void BtnlblText(object sender, EventArgs e)
    {
        lbltext.Text = TxTLabel.Text;
    }

}

Read More

Friday, 26 July 2013

Change Menu Hover Styling in Asp.net

02:57  , , ,  No comments

Description:- In Previous articles We have learned Range Validator Email and Phone Number , Web Url Address Validation. Now in this Article We Describe How to use Range Validator Between Two values.Now in this article we learn How to change Menu Style on hover.
Demo:- 


Coding:-  

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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 runat="server">
    <title></title>
    <style type="text/css">
   
        #mnuMyWeb
        {
            background:darkgreen;
            border:groove 3px darkblue;
        }
       
        #mnuMyWeb a
        {
            border-right:solid 1px lightyellow;
            color:lightyellow;
            padding:5px 8px 5px 8px;
            display:inline-block;
         }
       
        #mnuMyWeb a:hover
        {
            background:lightyellow;
            color:darkgreen;
            }
       
        #mnuMyWeb a.active
        {
            background:darkblue;
            color:Red;
            }
       
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Menu ID="mnuMyWeb" Orientation="Horizontal" runat="server">
            <Items>
                <asp:MenuItem Text="Home" Selected="true" NavigateUrl="~/Home.aspx" />
                <asp:MenuItem Text="About Us" NavigateUrl="~/AboutUs.aspx" />
                <asp:MenuItem Text="Services" NavigateUrl="#" />
                <asp:MenuItem Text="Contacts" NavigateUrl="#" />
            </Items>
        </asp:Menu>
    </div>
    </form>
</body>
</html>

Read More

Monday, 20 May 2013

Set Default Focus on Page Or Text Box Using Default Focus Property Asp.net

02:26  ,  No comments

Instruction:- In this we use this property

<form id="form1" runat="server" defaultfocus="TxtUserId">

Demo:-

Code:-
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Set Default Focus On a Page Or Text Boxes</title>
</head>
<body>
    <form id="form1" runat="server" defaultfocus="TxtUserId">
    <div>
        <h2 style="color:red">Default Focus </h2>
     
       <table><tr><td>
        <asp:Label ID="Label1" runat="server" Font-Bold="true" ForeColor="Orange"  Text="User Name"     >
        </asp:Label>
        </td>
        <td>
        <asp:TextBox     ID="TxtUserName"  runat="server" BackColor="Orange"        >
        </asp:TextBox>
        </td>
        </tr>
        <tr><td>
        <asp:Label  ID="Label2" runat="server" Font-Bold="true" ForeColor="Orange"  Text="User Id"      >
        </asp:Label>
        </td>
        <td>
        <asp:TextBox   ID="TxtUserId" runat="server" BackColor="Orange"   >   </asp:TextBox>
      </td>
      <tr><td colspan=2><center><asp:Button  ID="Button1" runat="server" Font-Bold="true"  ForeColor="Black" Text="Submit"         /></center></td></tr>
     
        </tr>
        </table>
    </div>
    </form>
</body>
</html>

Read More

Monday, 6 May 2013

Change Css Style Using Button In Asp.net

00:30    No comments

<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    protected void Button1_Click(object sender, System.EventArgs e)
    {
        BulletedList1.Style.Add("Padding", "10px 25px 10px 55px");
     
        BulletedList1.Style.Add("font-family", "Courier New");
     
        BulletedList1.Style.Add("font-size", "x-large");
     
        BulletedList1.Style.Add("font-style", "italic");
     
        BulletedList1.Style.Add("text-decoration", "underline");
     
        BulletedList1.Style.Add("border", "2px dotted darkred");
     
        BulletedList1.Style.Add("background-color", "red");
     
        BulletedList1.Style.Add("color", "Blue");
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Css Style Using Button Controls</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color: midnightblue; font-style: italic;">
           Css Style Using Button Controls
        </h2>
<hr align="left" color="SkyBlue" width="450" />
        <asp:bulletedlist backcolor="Crimson" forecolor="Snow" id="BulletedList1" runat="server" width="500">
             <asp:listitem>Rahul</asp:listitem>
             <asp:listitem>Anshul</asp:listitem>
             <asp:listitem>Sorabh</asp:listitem>
             <asp:listitem>Anil</asp:listitem>
             <asp:listitem>Shila</asp:listitem>
             <asp:listitem>Ravina</asp:listitem>
        </asp:bulletedlist>
        <asp:button font-bold="true" forecolor="DarkBlue" height="45" id="Button1" onclick="Button1_Click" runat="server" text="Change CSS Style In BulletedList">
    </asp:button></div>
</form>
</body>
</html>

Demo-:

Read More

Monday, 22 April 2013

Rounded Corner CSS for DIV without Images

01:40    No comments


Introduction: 


Here I will show how to create CSS rounded corners div without images or create rounded corners for div using CSS or div with rounded corners using CSS without images example.   


Description: 
 
In previous articles I explained CSS Tabbed Menu with rounded corners , jQuery Menu with Bounce effect,jQuery Dropdown menu using CSS and many articles relating to CSS ,jQuery, asp.net. Now I will explain how to create rounded corners for div using CSS without images.

To create rounded corners for div using CSS without images we need to write the code like as shown below


<html>
<head>
<title>CSS Rounded Corner DIV Table example</title>
<style type="text/css">
body {
font-family: tahoma;
}
div {
width:200px;
background-color:#FFEEDD;
border: 2px solid #ECCE8E;
padding: 5px;
text-align:center;
}
.samplecss
{
 border-radius: 10px; /*To make the corners rounded in IE*/
-moz-border-radius: 10px;/*this is for mozilla*/
-webkit-border-radius: 10px; /*chrome and other browsers*/
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div class="samplecss">
<h4>DIV1 Example</h4>
</div>
</td>
<td>
<div class="samplecss">
<h4>DIV2 Example</h4>
</div>
</td>
<td>
<div class="samplecss">
<h4>DIV3 Example</h4>
</div>
</td>
</tr>
</table>
</body>
</html>
Live Demo


For live demo check below divs


DIV1 Example
DIV2 Example
DIV3 Example

Read More
Subscribe to: Posts (Atom)