Archive for the ‘HTML’ Category
- In: CSS | HTML
- Leave a Comment
We all know how to align a table at the center. Just say <table cellspacing="0" cellpadding="0" align="center" wiidth="100%"> its gets the table aligned to the center of the page. In the same way how about aligning a div at the center of the page. There are a few different methods how to make it in the center.
Here are these methods
1. Using <center> tag
Ex:
<center>
<div class="xyz">Some content goes here…</div>
</center>
This will get the div aligned at the center along with this the content also gets aligned at the center. Well you might be knowing that the <center> tag is a deprecated tag[Read More]. So now is not receomended to use it. Still most of the browsers will allow you to use it. But this is not the feasible and recomended method.
2. Using align attribute
Ex:
<div class="xyz" align="center">Some content goes here…</div>
Also by using the above tag the div wount get aligned to center instead only the content gets aligned to the center. Align attribute is also a deprecated attribute, its no more recomended. So this is not the feasible and recomended method.
3. Using CSS attributes
Ex:
<div class="pqr">Some content goes here..</div>
<style type="text/css">
.pqr{
width:500px;
border:1px solid #666666;
margin: 0, auto;
}
</style>
By using the above style you can align the div at the center of the page. The margin=0 that is the top and bottom margin is 0 and the left and right margin is auto in the sense fill the gap automatically, by which the div gets aligned to the center, either of the whole page or within the block element. This is the best and recomended method to align a div at the center. This is tested in all the browsers.
Try this and test it on different browsers, if you find any issues let me know.
- In: HTML
- Leave a Comment
Well you all might have seen that if you want to give an anchor tag for the whole table, it doesnt work with IE. But it works with Mozilla firefox and chrome. So to make it working with IE what could be the solution.
Here is the simple solution just workaround and see it, even I did the same thing and got this solution. So wanted to share it with you guys out there.
<table border=”1″ cellspacing=”0″ cellpadding=”0″ width=”200″ onclick=”location=’http://www.google.com'” >
<tr>
<td>
Click here for the link
</td>
</tr>
</table>
So check out with this solution, its easy isn’t 🙂
iframe
Posted September 25, 2009
on:- In: HTML
- Leave a Comment
Iframes allow you to load separate html files into an existing document. You can place iframes anywhere in the document and can use CSS and JavaScript to manipulate the properties of the iframe.
Example of iframe:
<iframe scrolling=”no” width=”500″ height=”300″ src=”iframe-sample.html” frameborder=”0″> </iframe>
Content of iframe-sample.html:
Say below is the content
<a href=”http://www.google.com” title=”Google” >Google</a>
The above example says the iframe will load a iframe-sample.html file withtin the specified width of 500px and height of 300px, ie,; you get google.com loaded within that specified width and height when you click on the link.
If you need the google.com page to be loaded into the same full page, then you need to add the target path to the anchor tag as parent, below is the code
<a href=”http://www.google.com” title=”Google” target=”_parent” >Google</a>
By writing _parent the page gets loaded into the parent of the iframe.
The iframe element is not valid in strict (X)HTML. Documents containing iframes will validate with transitional or frameset doctype declarations.
Some of the attributes supported by iframes are:
width: specifies the width of the iframe.
height: specifies the height of the iframe.
frameborder: specifies whether to display border or not (0,1) of the iframe.
name: specifies the name of an iframe.
scrolling: pecifies whether to display scrollbars or not.
marginheight: specifies top and bottom margins of the iframe.
marginwidth: specifies left and right margins of the iframe.
src: specifies the url of the document that to be loaded.
title: specifies the title of the iframe.
class: specifies the classname for an element.
id: specifies the id (unique id) for an element.
style: specifies inline style for an element.
onmouseover marquee stop/start
Posted August 11, 2009
on:- In: HTML
- Leave a Comment
As we are all aware of the HTML tag marquee what it does, it will scroll the text either from left, right, top or bottom. You people might have observed that if you mouseover the text it will still be moving. So to stop this text onmouseover what should we do, here is a small trick.
Just try it by yourself:
<marquee behavior=”scroll” direction=”left” scrollamount=”3″ onmouseout=”this.start()” onmouseover=”this.stop()” >
Thankyou for looking out for my blog.
</marquee>
Great isn’t it, just call two functions onmouseout and onmouseover and that will do it for you, no need of big big JavaScript functions.
HTML 5 tags
Posted August 10, 2009
on:- In: HTML | Tutorials
- Leave a Comment
HTML 5 reduces development costs by making precise rules on how to handle all HTML elements, and how to recover from errors.
As you all guys know that the previous/current version of HTML is HTML 4.01. Below are some of the lists that are new and got added to HTML 5. But these are not supported by all the browsers as of now.
Here is the list of tags that got added to HTML 5:
<article> : Specifies an article.
<aside> : Defines content aside from the page content.
<audio> : Defines sound content.
<canvas> : Define graphics.
<command> : Specifies a command.
<datagrid> : Defines data in a tree-list.
<datalist> : Specifies an “autocomplete” dropdown list.
<datatemplate> : Defines a data template.
<details> : Specifies details of an element.
<dialog> : Defines a dialog (conversation)
<embed> : Specifies external application or interactive content.
<eventsource> : Defines a target for events sent by a server.
<figure> : Defines a group of media content, and their caption.
<footer> : Specifies a footer for a section or page.
<header> : Specifies a header for a section or page.
<meter> : Defines measurement within a predefined range.
<nav> : Specifies navigation links.
<progress> : Specifies progress of a task of any kind.
<section> : Specifies a section.
<source> : Defines media resources.
<video> : Defines a video.
<time> : Specifies a date/time
<rule> : Defines the rules for updating a template.
Internet Explorer woun’t support the above tags as usual. IE 8 is now supporting some of these. Mozilla Firefox 3 and Opera 9.5 supports most of them.
Note: HTML 5 is not a W3C recommendation yet!
So need not worry about these tags. 🙂
- In: CSS | HTML
- Leave a Comment
Hanging Indents makes the first line start from its margin and the rest will get flushed towards right. To do this look for the below code, you will get a clear idea.
HTML code
<p class=”hangingindent”>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id enim eu mauris condimentum pharetra. Praesent hendrerit, odio non condimentum cursus, Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id enim eu mauris condimentum pharetra. Praesent hendrerit, odio non condimentum cursus, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id enim eu mauris condimentum pharetra. Praesent hendrerit, odio non condimentum cursus, Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
CSS for the above goes here
<style>
.hangingindent {
padding-left: 22px ;
text-indent: -22px ;
}
</style>
- In: CSS | HTML
- Leave a Comment
Well I have found this serious problem when I need to make this inline styles override. I always thought that this could be impossible to override inline styles using style sheet. But later found one solution to do this, its very easy to do here is the sample code to override inline styles
<div class=”container”>
<span style=”font-weight: bold; color: red;”>Some text goes here…</span>
</div>
<style type=”text/css”>
.container span{
font-weight: normal !important;
color: #000000 !important;
}
</style>