Meta refresh is basically a simple way to redirect, it is much easier than Java or PHP.
There are two basic parts to the Meta-Refresh code and they are the content and the url. The content is the amount of time before the actual redirection/refresh, and the url is the location you wish to go to.
In this tutorial I am going to have the code redirect to the homepage of w3schoolss.blogspot.com
<meta http-equiv="Refresh" content="5;URL=http://w3schoolss.blogspot.com" />
Now it's time to break it down:
<meta http-equiv="Refresh"
This part of the code is what tells the document that you want to use the refresh.
content="5;
This is the content, the content is basically the delay and can be however long you want it to be.
URL=http://w3schoolss.blogspot.com" />
This is the URL, or the final destination of the refresh. You can put in different sites, different pages on your site, or the page itself.
<meta http-equiv="Refresh" content="5;URL=http://w3schoolss.blogspot.com" />
This is the final code, as you can see it is very simple and very efficient when you need it.
Tuesday, November 30, 2010
Monday, November 29, 2010
Create Rollover Image in CSS
I made two buttons for this tutorial, save it if you want to work with them.
Open Notepad and type the next code:
1.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Create Rollover Image in CSS</title>
<style type="text/css">
a.w3school {
display: block;
background-image: url(http://travelvacationguides.co.cc/w3school.jpg);
background-repeat: no-repeat;
width: 400px;
height: 400px;
}
a.w3school:hover {
background-image: url(http://travelvacationguides.co.cc/w3school-hover.jpg);
}
</style>
</head>
<body>
<p style="text-align:center"><a class="w3school" href="http://w3schoolss.blogspot.com">Create Rollover Image in CSS</a> </p>
</body>
</html>
2.Click on File > Save as and save like HTML
This results in
Open Notepad and type the next code:
1.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Create Rollover Image in CSS</title>
<style type="text/css">
a.w3school {
display: block;
background-image: url(http://travelvacationguides.co.cc/w3school.jpg);
background-repeat: no-repeat;
width: 400px;
height: 400px;
}
a.w3school:hover {
background-image: url(http://travelvacationguides.co.cc/w3school-hover.jpg);
}
</style>
</head>
<body>
<p style="text-align:center"><a class="w3school" href="http://w3schoolss.blogspot.com">Create Rollover Image in CSS</a> </p>
</body>
</html>
2.Click on File > Save as and save like HTML
This results in
Thursday, November 25, 2010
Rounded corners in css
CSS3 border-radius feature allows web developers can easily use the rounded corners of the design elements, images without corner, or use multiple div tags and is perhaps one of the most talked about aspects of CSS3.
Since it was first announced in 2005, the property Boder-ray has come to enjoy broad support from the browser (but with some differences) and relative ease of use, web developers have been quick to take full advantage of this emerging technology.
Here’s a basic example:
div.borderradius {
background-color: #eee;
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
border-radius: 15px;
-moz-border-radius: 15px;
}
<div class="borderradius">This box must have rounded edges to Firefox, Safari / Chrome, Opera and IE9.</div>
This results in
Since it was first announced in 2005, the property Boder-ray has come to enjoy broad support from the browser (but with some differences) and relative ease of use, web developers have been quick to take full advantage of this emerging technology.
Here’s a basic example:
div.borderradius {
background-color: #eee;
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
border-radius: 15px;
-moz-border-radius: 15px;
}
<div class="borderradius">This box must have rounded edges to Firefox, Safari / Chrome, Opera and IE9.</div>
This results in
This box must have rounded edges to Firefox, Safari / Chrome, Opera and IE9.
Wednesday, November 24, 2010
CSS Vertical List Menu
This tutorial shows how to make vertical css drop down menu. In this tutorial, we do not use images or javascript. Just a simple, cross-browser compatible CSS drop down menu.
First we need the HTML code from our menu of the list is just a regular unordered list.
Example:
<div class="menu">
<ul>
<li><a href="http://w3schoolss.blogspot.com/" linkindex="20">Home</a></li>
<li><a href="http://w3schoolss.blogspot.com/" linkindex="21">About</a></li>
<li><a href="http://w3schoolss.blogspot.com/" linkindex="22">Contact</a></li>
<li><a href="http://w3schoolss.blogspot.com/" linkindex="23">Links</a></li>
<li><a href="http://w3schoolss.blogspot.com/" linkindex="24">HTML</a></li>
</ul>
</div>
in the example above, I added a menu item called div around the list, I want to do because it helps me remember what a piece of code does what, if I ever will more. So le's add some CSS to the surrounding menu div called the list.
.menu{
width:50px;
padding:1px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#FFFFFF;
border:1px solid #437E7E; }
Again, this is a nice and easy. Class menu cover the entire width of the div is inside and has a white background with font(Verdana, Arial, Helvetica, sans-serif), font size(12px).
Then we add to the list Style and elements of the list.
.menu li{
list-style:none;
}
.menu ul li a{
display:block;
padding-left:15px;
height:25px;
margin-top:1px;
line-height:25px;
background-color:#F0F7F7;
border-left:10px solid #C7E2E2;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;;
text-decoration:none;
color:#000000;
}
.menu ul li a:hover, .menu ul li .current
{
background-color:#E5E5E5;
border-left:10px solid #CCCCCC;
color:#666666;}
Once again, it's all quite simple, you should be able to understand a little 'skill CSS code.
This results in:
First we need the HTML code from our menu of the list is just a regular unordered list.
Example:
<div class="menu">
<ul>
<li><a href="http://w3schoolss.blogspot.com/" linkindex="20">Home</a></li>
<li><a href="http://w3schoolss.blogspot.com/" linkindex="21">About</a></li>
<li><a href="http://w3schoolss.blogspot.com/" linkindex="22">Contact</a></li>
<li><a href="http://w3schoolss.blogspot.com/" linkindex="23">Links</a></li>
<li><a href="http://w3schoolss.blogspot.com/" linkindex="24">HTML</a></li>
</ul>
</div>
in the example above, I added a menu item called div around the list, I want to do because it helps me remember what a piece of code does what, if I ever will more. So le's add some CSS to the surrounding menu div called the list.
.menu{
width:50px;
padding:1px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#FFFFFF;
border:1px solid #437E7E; }
Again, this is a nice and easy. Class menu cover the entire width of the div is inside and has a white background with font(Verdana, Arial, Helvetica, sans-serif), font size(12px).
Then we add to the list Style and elements of the list.
.menu li{
list-style:none;
}
.menu ul li a{
display:block;
padding-left:15px;
height:25px;
margin-top:1px;
line-height:25px;
background-color:#F0F7F7;
border-left:10px solid #C7E2E2;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;;
text-decoration:none;
color:#000000;
}
.menu ul li a:hover, .menu ul li .current
{
background-color:#E5E5E5;
border-left:10px solid #CCCCCC;
color:#666666;}
Once again, it's all quite simple, you should be able to understand a little 'skill CSS code.
This results in:
Saturday, November 20, 2010
CSS Horizontal List Menu
This tutorial will show you how to make a horizontal CSS list menu. in this tutorial we are not using images or javascript. Just a simple, cross browser compatible CSS list menu.
First of all we will need the HTML for our list menu, this is just a normal unordered list.
Example:
<div class="menu">
<ul>
<li><a href="http://w3schoolss.blogspot.com/">Home</a></li>
<li><a href="http://w3schoolss.blogspot.com/">About</a></li>
<li><a href="http://w3schoolss.blogspot.com/">Contact</a></li>
<li><a href="http://w3schoolss.blogspot.com/">Links</a></li>
<li><a href="http://w3schoolss.blogspot.com/">HTML</a></li>
</ul>
</div>
in above example I have added a div called menu around the list, I want to do because it helps me remember what part of the code does what, if I ever do it again. Then let's add some CSS to the div called menu surrounding the list.
.menu{
width: 100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#ffffff;
background-color: #333; }
Again, this is a nice and easy. Class menu cover the entire width of the div is inside and has a dark gray background with font(Verdana, Arial, Helvetica, sans-serif), font size(12px).
Then we add to the list Style and elements of the list.
.menu ul{
margin: 0; padding: 0;
float: left;}
.menu ul li{
display: inline;}
.menu ul li a{
text-decoration: none;
color:#ffffff;
float: left;
background-color: #333;
padding: 10px 10px;
}
.menu ul li a:visited
{
color:#ffffff;
}
.menu ul li a:hover, .menu ul li .current
{
color: #fff;
background-color:#0b75b2;
}
Once again, it's all quite simple, you should be able to understand a little 'skill CSS code.
This results in:
First of all we will need the HTML for our list menu, this is just a normal unordered list.
Example:
<div class="menu">
<ul>
<li><a href="http://w3schoolss.blogspot.com/">Home</a></li>
<li><a href="http://w3schoolss.blogspot.com/">About</a></li>
<li><a href="http://w3schoolss.blogspot.com/">Contact</a></li>
<li><a href="http://w3schoolss.blogspot.com/">Links</a></li>
<li><a href="http://w3schoolss.blogspot.com/">HTML</a></li>
</ul>
</div>
in above example I have added a div called menu around the list, I want to do because it helps me remember what part of the code does what, if I ever do it again. Then let's add some CSS to the div called menu surrounding the list.
.menu{
width: 100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#ffffff;
background-color: #333; }
Again, this is a nice and easy. Class menu cover the entire width of the div is inside and has a dark gray background with font(Verdana, Arial, Helvetica, sans-serif), font size(12px).
Then we add to the list Style and elements of the list.
.menu ul{
margin: 0; padding: 0;
float: left;}
.menu ul li{
display: inline;}
.menu ul li a{
text-decoration: none;
color:#ffffff;
float: left;
background-color: #333;
padding: 10px 10px;
}
.menu ul li a:visited
{
color:#ffffff;
}
.menu ul li a:hover, .menu ul li .current
{
color: #fff;
background-color:#0b75b2;
}
Once again, it's all quite simple, you should be able to understand a little 'skill CSS code.
This results in:
Subscribe to:
Posts (Atom)