Validate a Drop-Down List on a Form
The easiest way to make ensure that a user picks a value from a dropdown list is to add a value to the top of the list that isn't really a valid choice, but a prompt instead. Something like "select one" should do.
The validatedropdown.aspx page code Look like this
<%@ 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">
protected void btnsubmit_Click(object
sender, System.EventArgs e)
{
lblmsg.Text = "You
selected: " +
ddvalidate.SelectedItem.Text.ToString();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"
runat="server">
<title>DropDownList
example: Check how to validate DropDownList control in asp.net</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblmsg" runat="server" Font-Size="Large" ForeColor="Crimson"></asp:Label>
<br />
<asp:DropDownList ID="ddvalidate" runat="server">
<asp:ListItem Selected="True">Select One</asp:ListItem>
<asp:ListItem>.NET
Interview questions</asp:ListItem>
<asp:ListItem>asp.net
interview questions</asp:ListItem>
<asp:ListItem>Asp.Net
Calendar Example</asp:ListItem>
<asp:ListItem>Asp.Net
DataGrid Example</asp:ListItem>
<asp:ListItem>Asp.Net
DataList Example</asp:ListItem>
<asp:ListItem>Asp.Net
Gridview Example</asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator
ID="RequiredFieldValidator1"
runat="server"
ControlToValidate="ddvalidate"
InitialValue="Select One"
ErrorMessage="Select One!"
>
</asp:RequiredFieldValidator>
<br />
<asp:Button ID="btnsubmit" runat="server" Text="Check Validate DropDownList" OnClick="btnsubmit_Click"
/>
</div>
</form>
</body>
</html>
Positioning in CSS
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.The position property defines how an element will be positioned on a page - relative to it's position in the XHTML or relative to the top left corner of the browser window.
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.
position Syntax:
position: static | relative | absolute | fixed | inherit
Static Position-HTML elements are positioned static by default. A normal box, subject to the normal flow.Static positioned elements are not affected by the top, bottom, left, and right properties.
Fixed Position - An element with fixed position is positioned relative to the browser window.It will not move even if the window is scrolled.The box is placed in an absolute location relative to some reference point.
inherit Position-The element should have the same position value as the parent element.
relative Position-Box is in normal flow, offset relative to its normal position.A relative positioned element is positioned relative to its normal position.
absolute position-The box is placed in an absolute location relative to the container block.An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:
position Browser Support:
Netscape 4, 6, 7
Mozilla 1
Firefox 1
Internet Explorer 4, 5, 6
Opera 3, 4, 5, 6, 7, 8
Safari 1
CSS (Cascading Style Sheet) is not very difficult to learn. The hardest thing is to ensure the CSS layout being displayed identically among different browsers.Following are some Very Helpful CSS Tips and Tricks that I think every web developer should be aware of. You may already know many of these tricks.Here is 10 Very Helpful CSS Stylesheet Tips & Tricks.
1. CSS Tips & Trick-Round Corners of DIV without using images
This is a simple CSS trick of rounding off the corners of the DIV using some css attributes.This will work on all CSS3-compatible browser. This technique will not work in Internet Explorer.
div {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
To round a specific corner (top-left or bottom-right) use below stylesheet.
div {
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
2. CSS Tips & Trick-Create an IE Specific Stylesheet
Create an ie specific stylesheet and include it in the webpage whenever the client is using Internet Explorer.The below code show you how to
include an IE Specific Stylesheet on webpage.
For IE use this
<!--[if IE]>
<link href="ie.css" rel="stylesheet"
type="text/css">
<![endif]-->
For IE7 use this
<!--[if IE 7]>
<link href="ie7.css" rel="stylesheet"
type="text/css">
<![endif]-->
3-CSS Tips & Trick - Add Background Image of Textbox
you can use the following stylesheet to add background image to any input box.
input#yourtextbox {
background-image:url('backgroudimage.gif');
background-repeat:no-repeat;
padding-left:20px;
}
background-image:url('backgroudimage.gif');
background-repeat:no-repeat;
padding-left:20px;
}
4- CSS Tips & Trick -Rotate Text using CSS
This example rotates text 90 degrees counterclockwise.
.rotate-style {
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
5- CSS Tips & Trick -Change Text Selection Color
By default, browsers uses blue color as the text selection. You can change this color to match your website theme.
/* Mozilla based browsers */
::-moz-selection {
background-color: #FFA;
color: #000;
}
/* Works in Safari */
::selection {
background-color: #FFA;
color: #000;
}
::-moz-selection {
background-color: #FFA;
color: #000;
}
/* Works in Safari */
::selection {
background-color: #FFA;
color: #000;
}
6- CSS Tips & Trick-Center elements
It's easy to center an element, for firefox and safari, we only need to specify the width and margin left and right set to auto. However, you will need to specify text-align to center in the parent element for IE.
body {
text-align:center; /* for ie */
}
#container {
width:800px;
margin:0 auto;
text-align:left;
}
text-align:center; /* for ie */
}
#container {
width:800px;
margin:0 auto;
text-align:left;
}
7. CSS Tips & Trick - CSS Positioning
Set the abolute position within a container. #myitem will appear inside the #mycontainer exactly 200px from the left and 50px from the top.
#mycontainer {
position: relative;
width:500; height:300;
}
#myitem {
position: absolute;
left: 200px;
top: 50px;
}
position: relative;
width:500; height:300;
}
#myitem {
position: absolute;
left: 200px;
top: 50px;
}
8-CSS Tips & Trick -Prevent line break
This is a simple css tips, but some of us might not know about it. It forces the text display in one line.
h1
{
white-space:nowrap;
}
{
white-space:nowrap;
}
9-CSS Tips & Trick-Force page breaks when printing your document
h1{
page-break-before:always;
}
h2{
page-break-after:avoid;
}
h2{
page-break-inside:always;
}
10-CSS Tips & Trick - how to use group selector
Using group selector is a good practise to minimize your coding effort and also save a few bytes out of your stylesheet. We can group the selector to avoid repeating declaring the same properties for different elements.
h1, h2, h3, h4, h5, h6 {
font-family:arial;
margin:0.5em 0;
padding:0;
}