Anuup's Blog

Create flexible page layouts (using CSS)

anuupbasant — Fri, 18 Sep 2009 18:21:29 +0000

With CSS, especially its border attribute, an entire page can be laid out without a single TABLE tag or spacer GIF.

Figure A

Sample Web page layout

Let’s use the layout in Figure A as an example.

Header

This code creates a 75-pixel tall, light blue area that has a 1-pixel black border on all four sides. To ensure compatibility with all three major browsers and to allow the layout to fill the browser window, I do not set a width attribute for the header.

TopNav

Just below the header is a dark blue area that has a 1-pixel black border around three sides. I don’t use a top border on the topnav because I’m using the header’s bottom border to divide the two areas. As with the header, I don’t specify a width for the topnav.

Leftnav

Now there is a 200-pixel by 450-pixel gray bar running down the left side of the page. It has a 1-pixel black border on the left and right but not the top and bottom. It will use the topnav’s bottom border and the footer instead. Note that the leftnav uses the float attribute. By setting the float to “left,” the leftnav will always sit to the left of the element that comes after it. In this example, it will sit to the left of the body element.

The body area is 450-pixels tall with a 1-pixel black border on its right side. The body uses the topnav’s bottom border, the leftnav’s right border, and the footer to give the illusion of a 1-pixel border on all four sides. As with the header and topnav, I don’t use a width attribute on the body.

The final area of this layout is the footer. To create the footer, I add the code in Listing E.

Note two things about the footer. First, no border attributed is used. Since the footer and all of the other elements’ borders are black, there will be the illusion of a black border around the footer. Second, I use the clear attribute. With clear set to “none,” the footer will not be affected by the relative positioning of the other elements. For example, if the body element had used “float:left” (which would try to place the footer to the right of the body), the “clear:both” in the footer would override the float attribute and place the footer at the bottom where it belongs.

Navigation bar
Now that I’ve completed the basic page layout, I can use CSS2 borders to create faux buttons in the topnav area.

As with the page layout, all of the faux button effects can be created with CSS2. Listing F offers the code for adding the navigation bar.

Now a row of four buttons appears inside the topnav area. Each one has a 1-pixel black border on the right. The first button uses the border of the topnav area to create its left border. The other buttons use the right border of the button to their left to create their left borders.

I’ve used a “buttons strong” style to highlight the button that corresponds with the page the user is currently on. For example, if this were my home page, I would want to show the “home” button in a different style from the other buttons. Using the “buttons strong” style, I can create a distinct look for any button simply by placing a tag around the text.

Because the styles for the other buttons are applied to hyperlinks, I can use different link behaviors, such as hover, to trigger different styles. This allows me to create a mouseover effect that changes the button’s background from blue to dark gray when moused over. Without CSS2, this type of effect typically requires the use of two graphics, one for the default state and one for the mouseover state.

Site updates are easier
Not only does CSS2 result in cleaner code, but it also allows you to update your site faster and easier than HTML-only pages. Instead of having a bunch of hard-coded HTML pages that each need to be changed manually, CSS2 allows you to make site-wide changes by simply updating the style sheet. I used an inline style sheet in this example; however, you should use an external style sheet to get all of the benefits of CSS2.

For example, if you get tired of having a leftnav bar and want to try it on the right, you can just change the style information for the leftnav and the body. The changes will be reflected on every HTML page that uses that style sheet.

In addition, if you want to change the name of one of your buttons, you don’t need to create new button graphics. Just change the text in the HTML file.

So there it is—a cross-browser-compatible, CSS2 page layout with no tables, spacer GIFs, or button graphics that is simple to update.

Graphics 101

Designing 3D buttons with pure CSS

Framed style Layout..with CSS

Creating indented navigation lists

Creating a horizontal navigation bar (using CSS)

anuupbasant — Fri, 18 Sep 2009 17:59:11 +0000

A simple CSS navigation bar
Perhaps the simplest solution to a CSS-styled text navigation bar is to put all the links in a single line of text, as is done in Example A.

This approach seems logical and straightforward. The problem is that having all the links in a single line of text provides precious little control over spacing around and between the links. So, to avoid crowding the links together, you usually end up inserting pipe (vertical bar) and nonbreaking space characters as spacers.

As the following code shows, the result is hardly the kind of clean, structural markup that we’re looking for:

Button 1 | href=”link2a.html “>Button 2 |
Button 3

The markup gets even more cluttered if you add tags around each link in order to apply the additional CSS styles that create button backgrounds and rollover effects.

A list-based CSS navigation bar
Another approach to creating a CSS navigation bar is to mark up the links as an unordered list using the

tags.

Using an unordered list for a navigation bar may seem counterintuitive at first because we’re accustomed to thinking of the unordered list as a stacked column of list items, each preceded by a bullet. That doesn’t seem to fit the horizontal orientation of a navigation bar.

However, the logical structure of a list as a collection of individual list items is appropriate for the links in a navigation bar; and CSS rules enable you to override the default presentation of the list items to eliminate the bullets and arrange the list items to flow across the page instead of down the page.

With that in mind, let’s look at Example B of the CSS styles and XHTML markup for a navigation bar based on an unordered list.

Here’s the XHTML markup:
Regular readers of this column may recognize this as being the same markup that I’ve used for other CSS button examples. One of the appealing things about this technique is that the markup is the same for any group of buttons, whether they’re stacked in a column to one side of the main body text or arranged horizontally in a navigation bar across the top of the page.

Here’s the CSS code that transforms the list of text links into a navigation bar:
div#navbar2 {
�� height: 30px;
�� width: 100%;
�� border-top: solid #000 1px;
�� border-bottom: solid #000 1px;
�� background-color: #336699;
}
div#navbar2 ul {
�� margin: 0px;
�� padding: 0px;
�� font-family: Arial, Helvetica, sans-serif;
�� font-size: small;
�� color: #FFF;
�� line-height: 30px;
�� white-space: nowrap;
}
div#navbar2 li {
�� list-style-type: none;
�� display: inline;
}
div#navbar2 li a {
�� text-decoration: none;
�� padding: 7px 10px;
�� color: #FFF;
}
div#navbar2 lia:link {
�� color: #FFF:
}
div#navbar2 lia:visited {
�� color: #CCC;
}
div#navbar2 lia:hover {
�� font-weight: bold;
�� color: #FFF;
�� background-color: #3366FF;
}

The div#navbar2 style sets the dimensions and background color of the div that contains the navigation bar links.

The div#navbar2ul style includes margin and padding declarations to override the default spacing assigned to unordered lists and sets the general text formatting. Thewhite-space:nowrap declaration keeps the list on one horizontal line, even if the browser window is too narrow to display the whole line.

The real secret to this technique is in the div#navbar2li style. The list-style-type:nonedeclaration removes the bullets that normally mark each list item, and the display:inlinedeclaration causes the list items to flow from left-to-right across the page instead of each item appearing in a separate line.

Another key element of this technique is the div#navbar2li a rule. The text-decoration:none declaration removes the underscore that is normal for links, and thepadding:7px10px declaration controls the spacing of the links in the navigation bar. The left and right padding controls the horizontal spacing, while the top and bottom padding is needed to make the colored background of the rollover effect (and the clickable area of the button) extend the full height of the navigation bar. You could also add left and right margin values if you want additional space between the buttons.

Finally, the rules for the :link, :visited, and :hoverpseudoclasses set the color changes for the rollover effects.

You can use variations of this same basic technique to create many different navigation bar effects, including the popular “folder tab” look.

Superimpose text on image (using CSS)

anuupbasant — Fri, 18 Sep 2009 17:51:25 +0000

The easiest way to superimpose text is using CSS.

Advantages:

Its easy to implement, reduces file size, ensures sharpness of image, editing the superimposed text is easy, positioning the text is very flexible and the text is fully accessible to special-needs visitors and to search engines.

div#test {background-image: url(/images/backgroundimage.JPG);background-repeat: no-repeat;height: 500px;width: 380px;}div#testtext {position: relative;height: auto;width: auto;left: 25px;top: 200px;}

Superimposed Text

Access to the path is denied error

anuupbasant — Fri, 18 Sep 2009 14:15:35 +0000

After publishing the site if you get the following error:

Access to the path ‘D:\inetpub\mywebfolder\subfoldername\filename’

ASP.Net is not authorized to access the requested resource. Consider grating access rights to the resource to the ASP.Net request identity.

To impersonate the original caller:

1. Add the following to web.config

Get Date Name in Query

anuupbasant — Sat, 05 Sep 2009 13:58:31 +0000

To get date Name in SQL Server

select datename(mm,getdate())

In MS-Access:

select format(date(),'mmmm')

In Oracle:

SELECT to_char(sysdate,'month') from dual

Fade effect for marquee

anuupbasant — Sat, 05 Sep 2009 13:53:34 +0000

Works in IE not crome.

This text fades when moving

Dissable browser’s back buttton

anuupbasant — Sat, 05 Sep 2009 13:46:24 +0000

If you want to disable back button using C# code, then you need to write this code either in Page_load event or in Page_Init event

The code disables browser caching.

protected void Page_Init(object Sender, EventArgs e)
{
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Cache.SetExpires(DateTime.Now.AddSeconds(-1));
Response.Cache.SetNoStore();
}

Check if javascript is enaled or disabled

anuupbasant — Sat, 05 Sep 2009 13:42:18 +0000

Rich ajax applications that do not break if javascript is disabled.

Test if the client’s browser has javascript disabled ?

Fetch random rows from SQL Server

anuupbasant — Sat, 05 Sep 2009 13:36:55 +0000

To fetch random rows from a SQL Server table.

If you have an integer column, then using RAND() function goes well. However in case there are no number columns use the following query:

SELECT TOP  
FROM 
WHERE 
ORDER BY NEWID()
The key is the use of NEWID() function that returns a GUID.An example query would look something like this:
SELECT TOP 10 * 
FROM Employees
ORDER BY NEWID()
This way is also useful for selecting data for testing purposes.

         


ASP.NET Bypass forms authentication or Skip Authorization for selected pages
anuupbasant — Sat, 05 Sep 2009 13:32:14 +0000
This example how to skip or bypass forms authentication or Authorization for selected pages in asp.net or a scenario where only few pages on site needs user to log in and rest can be accessed without login.

For this we need to set HttpContext.Current.SkipAuthorization property to true in global application class called Global.asax

More Details