Posts Tagged ‘HTML’
- 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 on: September 25, 2009
- 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 on: August 11, 2009
- 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 on: August 10, 2009
- 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. 🙂
what is the DOM?
Posted on: August 6, 2009
DOM stands for Document Object Model is a W3C (World Wide Web Consortium) standard.
The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.
DOM has three different levels:
1. Core DOM – standard model for any structured document.
2. HTML DOM – standard model for HTML documents.
3. XML DOM – standard model for XML documents.
DOM also defines the objects and properties of all document elements, and the methods (interface) to access them.
The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
The XML DOM defines the objects and properties of all XML elements, and the methods (interface) to access them.
- 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>
!important
Posted on: April 17, 2009
- In: CSS | Tutorials
- Leave a Comment
Everyone might have faced problem saying that my sight looks fine in mozilla firefox, but it is off by one or two pixels in Internet Explorer. The CSS will use the rule that it saw at last, that is the one that is defined at last will be used.Â
Ex:
li{
     margin-left:2px !important;
     margin-left:5px;
}
The Internet Explorer will use the 5px where as the firefox will use the 2px. Now the left margin for firefox will be 2px and for IE it will be 5px. Â You can see that such fixes are better than using Seperate CSS for Internet Explorer.
- In: HTML
- 5 Comments
It is a common practice by web developers to make separate header and footer files. As there wont be any changes in these section in any of the pages.
So now the question arises how to use these HTML pages inside another HTML file. There is a solution for this that is
<!–#include VIRTUAL=”/common/header.htm” –>
So the above code makes the header file to include in another HTML file. Just paste this code change the path and use it where you want your header to be displayed.
Mywebdunia's Blog 