how to display footer at bottom of page

Hi Friends,

Once in my project, I came across with CSS is dynamic layout. I need to develop footer which stick to the bottom of a page. For example, consider the condition of regardless the height of the content of a page, the footer should stick to the bottom of the page.

When an HTML page contains a small amount of content then footer comes halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen.

There are several ways to make a footer stick to the bottom of a page using CSS, but the cleanest and most well tested method I have come across is CSS Sticky Footer.

You will need to structure your webpage in the following way in order to manage footer at the bottom of page.

This is your HTML part:

 
Page Content Comes Here ....... Page Content Comes Here .......
Page Content Comes Here ....... Page Content Comes Here .......

Page Content Comes Here ....... Page Content Comes Here .......
Page Content Comes Here ....... Page Content Comes Here .......

Page Content Comes Here ....... Page Content Comes Here .......
Page Content Comes Here ....... Page Content Comes Here .......

Page Content Comes Here ....... Page Content Comes Here .......
Page Content Comes Here ....... Page Content Comes Here .......

This is your CSS part:

html,body {
	margin:0;
	padding:0;
	height:100%;
}
#container {
	min-height:100%;
	position:relative;
}
#header {
	background:#c2dcf4;
	padding:10px;
}
#content {
	padding:10px 10px 80px 10px;
}
#footer {
	background:#ccc;
	width:100%;
	height:80px;
	position:absolute;
	bottom:0;
	left:0;
	padding:0px 10px 0px 10px;
}

The above CSS will keep your footer at the bottom of the page but you will need to make a few tweaks to the code.

You need to make sure that height of your footer and bottom margin of your content should be same. you can see in the above example.

You can see online demo from here, sticky_footer

Hope this will help you !!!.

How to show table cell element as a separate table row element

Hi friends,

Once in my project I want to show table cell element as a separate table row element So I have searched on it and find the solution on same.

Let me share it with you; we can do it by using css style properties

See the below example:



First Second Third Fourth

Here, you can see that there are one table row and four table cell. Now I want to all table cell as a separate table row element.

You can see that I have defined class in table cell i.e. “row”. In this class i have display element as a table-row which fulfill my requirements.

Hope this will also work for you !!!!.

How to show div vertical/horizontal scroll

Hello All,

All we know that by overflow property we can handle overflow of element. Sometime we want overflow only vertical or horizontal. To achieve this we can set overflow-x and overflow-y.

/* For vertical scroll */
scroll text....scroll text....scroll text....scroll text....scroll text....scroll text....scroll text.... scroll text....scroll text....scroll text....scroll text....scroll text....scroll text....scroll text....
/* For horizontal scroll */
scroll text....scroll text....scroll text....scroll text....scroll text....scroll text....scroll text.... scroll text....scroll text....scroll text....scroll text....scroll text....scroll text....scroll text....

Here white-space is also important to set overflow. With white-space we can set wrap and nowrap default white-space is wrap or normal.

Hope it will help someone.

Simple html tooltip using css3

Hi Friends,

Sometimes we need to show content details as a tooltip in our project. We can do this by different ways.

Today I am going to show simple html tooltip using css3.

I have just use the title tag of anchor tag for showing the detail content in tooltip.

Lets see how can we implement it;




Define above style in html header section




Here, I have used anchor tag with title attribute which is used for showing the detail content as a tooltip.

You can see the demo from here, css3-tooltip

Rounded corner close button in html

Hello All,

Sometimes we need rounded corner close button and we are using background image for that but now in css3 we can do it by using “border-radius” property.

Please check this link for border-radius syntax and details.

Today I am going to represent how to make rounded corner close button on other element.

see below example



    
    


    
 
X

Here, I have created close button on top right cornet of image.

I have defines class “closebtn” in span which contains anchor tag with onclick event.

I have used top and left for positioning a button on image. You need to change this property as per your image size.

see the output of above code :
closebtn

How to apply CSS class for a div from code behind in asp.net

Hello,

As you know that, we can set style and class for div element as below

Now I would like to change the class name for a div from code-behind.

Please note that I have set runat=server in div elements. now i am going to add attributes(class/style) in div tag.

Now you need to write below code in your code behind event

dvID.Attributes.Add("class", "youclassname")

same way, you can set any attributes of style.
Hope this will help.

H1 renders extra space

Hello,

Today I have used h1 tag for title in my html page but I have faced small issue with header tag so I would like to share it with you.

When I label my page title as h1, there is extra space added above and below the line of text. The html content above and below being pushed away from the line of text.

Not sure why this would do this. I have tried lot of things on page and got the solution for that.

This is what header tags naturally do. To solve it, you simply need to reset margin of header.

<html>
<head>
<style>
  h1
  {
    margin:0px;
    padding:0px;
  }
</style>
</head>
<body>
   ......................
   ......................
   ......................

   <p>Other content</p>
   <h1>Page Heading</h1>
   <p>Other content</p>

   ......................
   ......................
   ......................
</body>
</html>

Font embedding with css

Hello All,

In past years, web designers have to use one of the “web-safe” fonts.
we can now embed other font by using regular CSS styles.
with the “@font-face” selector you have the possibility to import a font in a webpage.

Example
Specify font name as “myCustomFont” and specify the URL where it can be found

@font-face {
font-family: 'myCustomFont';
src: url('myCustomFont.ttf');
src: url('myCustomFont.eot')
}

Note:
The @font-face rule is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

  • Internet Explorer 9 only supports .eot type fonts
  • Firefox, Chrome, Safari, and Opera support .ttf and .otf type fonts

Generate Rounded corner without Image

Hello All,

Sometimes we need rounded corner of our element and we are using background image for that but now in css3 we can do it by using “border-radius” property.

Syntax
border-radius: 1-4 length|% / 1-4 length|%;

length : Defines the shape of the corners
% : Defines the shape of the corners in %

If values are given before and after the slash, then the values before the slash set the horizontal radius and the values after the slash set the vertical radius.
If there is no slash, then the values set both radius equally.
The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left.
If bottom-left is omitted it is the same as top-right.
If bottom-right is omitted it is the same as top-left.
If top-right is omitted it is the same as top-left.

You can define it for different browser like below
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 0px solid #ccc;

Example

 

Demo Example of Border Radius

Demo example of border-radius property

 

Gradient shaded color effect

This is very good feature for applying a shaded color. The gradient filter is an ActiveX control so it will work only in IE. The default gradient filter uses a horizontal blue and black color scheme.

<div style="filter:progid:DXImageTransform.Microsoft.Gradient(
GradientType=1);
width: 200px; height: 200px">
</div>

You can also specify different shaded color and direction. See below examples

<div style="filter: progid:DXImageTransform.Microsoft.Gradient(
GradientType=1, StartColorStr='red', EndColorStr='black'); width: 200px; height: 200px">
</div>

<div style="filter: progid:DXImageTransform.Microsoft.Gradient(
GradientType=0, StartColorStr='yellow', EndColorStr='cyan'); width: 200px; height: 200px">
</div>