Post HTML5, Javascript & CSS3 queries here

krishnandu.sarkar · Jun 5, 2014

tech0freak0 said:
Whats Framework and CMS???....
I new to Web Developing

Please refer Software framework - Wikipedia, the free encyclopedia and Content management system - Wikipedia, the free encyclopedia

For E.g. Bootstrap is a Framework and Joomla, Drupal, Wordpress etc. are CMS.

mastercool8695 · Jun 6, 2014

Re: Post HTML5, Javascript & CSS3 queries here

kunalht said:
codecademy.com
for video tutorials - thenewboston.com
and lynda.com

tried code academy. its really great.

- - - Updated - - -

krishnandu.sarkar said:
w3schools

will try w3schools after i finish off on codeacademy,
did HTML basics on codeacademy.
around the middle of CSS Basics.
been to w3Schools before but didn't start the course.

I really feel that what i'm learning there isn't complete,
Things like how to add a box for user input and all are not described in HTML part (what i had learnt before the CSS thing started., (I dont know if HTML does create the box or other

)
and Buttons , etc.
will they cover the entire HTML after this ?

vickybat · Jun 7, 2014

^^ Newboston videos for html are really great. Your fundamentals will be cleared.

geekpradd · Jun 13, 2014

Hello Everyone ,
I'm new to the forum but not new to digit (Reading since 2009 ever since I was a little kid!)
So anyways , you want your help regarding a project that I have been working on with my friend.

It's called ProgrammingWhiz AND It is a site that will teach programming in HTML5 , CSS3 , Javascript , Python ,PHP and MySQL and probably C++ in the future.

Currently I have finished working on the front-end and we are now at content-adding phase . We have started HTML5 Tutorials and I have currently finishing the final tutorials.

So , enough of the intro
Here is my problem:
Firstly ,
We are using HTML5 , CSS3 , jQuery , Bootstrap , Javascript and PHP for the core and using plugins like holder.js and highlight.js for adding to the experience.
The thing is though , that I have encountered a problem in the CSS and Bootstrap part that I am unable to recover.
The thing is that my site is spawning out of 100% width and it now has a horizontal scrollbar at the bottom . I think our fixed header is the reason behind but I can't fix it . I tried setting width to 100% but it still doesn't work
Here is one of the source:

Code:

<!Doctype html>
<html>
    <head>
        <link rel="shortcut icon" href="*www.programmingwhiz.bl.ee/html5/site.png">
        <title>Lesson 1 HTML5 Programming Whiz</title>
        <meta name="description" content="Learn Programming from the best across the Internet through ProgrammingWhiz">
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta name="author" content="Akshat Tripathi , Pradipta Bora"/>
        <meta property="og:title" content="ProgrammingWhiz">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta property="og:type" content="article">
        <meta property="og:description" content="Learn Programming from the best across the Internet through ProgrammingWhiz">
        <link rel="apple-touch-icon" href="icon.png">
        <link href="../css/bootstrap.css" rel="stylesheet">
        <link href="../css/modern-business.css" rel="stylesheet">
        <link href="../css/font-awesome.css" rel="stylesheet">
        <link href="../css/global_styles.css" rel="stylesheet">
        <link rel="shortcut icon" href="../site.png">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">
            @media(max-width: 600px){
                body{
                    position: relative;
                    left:4.2%;
                }
        
                @font-face {
                    font-family: Segoe UI;
                    src :url('segoe.ttf');
                }   
            }

            p {
                font-family: "Segoe UI","proxima-nova","proxima-nova-1","proxima-nova-2","Proxima Nova",Helvetica,Arial,sans-serif;
                font-size: 17px;
                line-height: 1.5;
                padding: 8px 5px 14px 5px;
            }

            h2 {
                font-family: "Segoe UI","proxima-nova","proxima-nova-1","proxima-nova-2","Proxima Nova",Helvetica,Arial,sans-serif;
                font-size: 30px;
                line-height: 1.1;
                padding: 8px 5px 14px 5px;
            }

            h3 {
                font-family: "Segoe UI","proxima-nova","proxima-nova-1","proxima-nova-2","Proxima Nova",Helvetica,Arial,sans-serif;
                font-size: 25px;
                line-height: 1.1;
                padding: 9px 5px 14px 5px;
            }

            h4 {
                font-family: "Segoe UI","proxima-nova","proxima-nova-1","proxima-nova-2","Proxima Nova",Helvetica,Arial,sans-serif;
                font-size: 21px;    
                line-height: 1.1;
                padding: 9px 5px 14px 5px;
            }

        </style>
        <link rel="stylesheet" href="styles/github.css">
        <script src="javascript/highlight.pack.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>
    </head>
    <body>
    <style type="text/css">
	html,
body {
	margin:0;
	padding:0;
	height:100%;
}
#wrapper {
	min-height:100%;
	position:relative;
}
#content {
	padding:10px;
	padding-bottom:80px;   /* Height of the footer element */
}
#footer {
	width:100%;
	height:80px;
	position:absolute;
	bottom:0;
	left:0;
	
}
</style>        <div id="wrapper">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="width:100%;">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- You'll want to use a responsive image option so this logo looks good on devices - I recommend using something like retina.js (do a quick Google search for it and you'll find it) -->
            <a class="navbar-brand" href="../index.php">Programming Whiz</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="../basics.php">Learn Coding</a></li>
                <li><a href="../apps.php">Our Apps and Tools</a></li>
                <li><a href="../contact.php">About Us</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Articles <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="../un.php">Python</a></li>
                        <li><a href="../un.php">C++</a></li>
                        <li><a href="../un.php">HTML 5</a></li>
                        <li><a href="../un.php">Programming Structure</a></li>
                        <li><a href="../un.php">Miscellany</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Contact Us <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Facebook</a></li>
                        <li><a href="#">Twitter</a></li>
                        <li><a href="../mail_us.php">Mail Us</a></li>
                    </ul>
                </li>

            </ul>
        </div>
    <!-- /.navbar-collapse -->
    </div>
<!-- /.container -->
</nav>            <div id="content">
                <div class="row">
                    <div class="row">
                        <div class="sidebarx hidden-sm hidden-xs" style="position:absolute;right:0.22%;top:16%;width:14%;border-width:0px;z-index:342;">
                            <ul class="nav nav-stacked nav-pills">
                                <li><a href="../index.php"><span class="glyphicon glyphicon-home"></span>  Home</a></li>
                                <li><a href="../basics.php"><span class="glyphicon glyphicon-star"></span>  Begin Coding</a></li>
                                <li><a href="../html5.php"><span class="glyphicon glyphicon-star"></span>  Learn HTML5 &amp; CSS3</a></li>
                                <li><a href="../un.php"><span class="glyphicon glyphicon-star"></span>  Learn Javascript</a></li>
                                <li><a href="../un.php"><span class="glyphicon glyphicon-star"></span>  Learn Python</a></li>            
                                <li><a href="../contact.php"><span class="glyphicon glyphicon-home"></span>  About Us</a></li>
                                <li><a href="../un.php"><span class="glyphicon glyphicon-home"></span>  Useful Sites</a></li>
                                <li><a href="../apps.php"><span class="glyphicon glyphicon-home"></span>  Our Apps</a></li>
            
                            </ul>
                        </div>
                        <div class="main " style="background-color:#eee;position:relative;;top:-45px;">
                            <div style="height:25%;padding-bottom:5%;padding-left:7%;padding-right:15%;padding-top:10%;color:#1C1C1C;"><h2 class="text-left"><br><img src="../logofull.png" class="hidden-xs hidden-sm" /><h2 class=".visible-xs .visible-sm hidden-md hidden-lg"><br>ProgrammingWhiz </h2><br><h4 style="color:#1C1C1C" >    Learn HTML5 &amp; CSS3 </h4></h1></div></div><br>
                            <div style="position:relative;left:-4%;"class="col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1 col-md-9 col-md-offset-1">
                                <a class="btn btn-primary" href="../index.php" style="position:relative;left:0.3%;top:4%;">&lt;&lt; Go Back Home</a> <a class="btn btn-primary hidden-xs hidden-sm" href="lesson2.php" style="position:relative;left:75%;top:-10%;"> Lesson 2 &gt;&gt;  </a>
                                <br><br>
                                <br><h2 style="padding-bottom:0px;">HTML5: Your First Program </h2>
                                <p>This is a simple HTML5 program :</p><br><br>
        <pre><code>
        &lt;!Doctype html&gt;        
        &lt;html&gt;
            &lt;head&gt;
                &lt;title&gt;Hello World&lt;/title&gt;
            &lt;/head&gt;
            &lt;body&gt;
                Wello World!
            &lt;/body&gt;
        &lt;/html&gt;</code></pre> <br>
                                <p class="text-justify">The Syntax would be explained on the next lesson; for now, we will teach you how to create an HTMl document and how to download a code editor.</p>
                                <br><br><h3>Code Editor: What It Is and Which One </h3>
                                <p class="text-justify">Before we dive into the world of HTML &amp; CSS and start designing websites, we need 

                                to choose which code editor we will be using to write our code. A code editor is a tool 

(much like a text-editor like Notepad) which helps you write code in the most helpful 

way possible. How is it helpful? It highlights the important part of your code (its 

syntax), gives you good shortcuts for better using the code editor, it makes navigation 

easier as well and much more.</p>

<p>There are lots of code editors out there. (A side-note: you really don't <i>need</i> 

these code-editors, you can just use the familiar Notepad or any other text editor; 

however, it is always advicable that you use such code-editors to make your life a lot 

easier). For example, there's a very popular code editor in the programming world called 

Emacs. However, emacs is too complicated to use if you are a beginner, therefore, we 

recommend that you choose a simpler code-editor like Sublime Text or Geddit. In our website, 

we will always display the screenshots of codes (if at all) using Sublime Text 3. It is easy-

to-use, easy-to-learn, free (although, it often pops-up asking you to buy, but you can 

live your life that way, it's not <i>that</i> often), is not all that coomplicated and 

has syntax-highlighting (for now, if you're a complete beginner, it means separating 

code from normal text).</p>

<p>You can get Sublime Text 3 from its official website: <a 

href="*www.sublimetext.com/3">Download Sublime Text 3.</a> Installation for Windows is 

pretty straightforward so we won't spend much time describing how to install the 

software in Windows. However, if you're on a Linux computer, you need to install using 

the following command in your terminal (or you can use the GUI):</p><br>
<pre><code>tar xvjf [the folder name with extension (.tar.bz2)]</code></pre><br>
<p class="text-justify">After the extraction has been done, you can access the software using the file 

sublime_text. However if you're used to using terminal and you want to access Sublime 

from various directories, then you need to create a link to that file so that you can 

access it from wherever you like. To accomplish this, use the following code in your 

terminal:</p><br><br>
<pre><code>sudo ln -s sublime_text /usr/bin/sublime</code></pre><br>
                <p class="text-justify">Now you can access the code-editor using your terminal. (This code should work for all or most Linux distributions.)</p>

<p class="text-justify">There are different ways of accessing your HTML files. The simplest one is saving your code with the extension '.html' and then double-clicking on the file which should open it in the default web browser. However, most programmers prefer using the terminal to open your code, edit it, view it etc. You can edit your code using Sublime, the way you do this in terminal is: </p>
        <br><pre><code>sublime code.html &amp;</code></pre><br>
        <p>Note that the '&amp;' starts the program in the background. And to then open the file in your web browser, type your web browser's name and then the name of the file with its extension. Now since you have installed Sublime Text 3 , let's create your first web site.</p>

        <br><br>
        <h3>Your First Hello Website</h3>
        <p class="text-justify">
        Now, open Sublime Text from Windows or Linux using the above steps. The commands metioned above are for Linux users only, therfore, there's an assumption that you already know how to use
         basic commands in the termrinal if you're using a linux computer. If you don't understand, it's actually not a problem, you need to know them now.<br>
        <p class="text-justify">Now copy and paste the above given code onto Sublime Text <i>Or whichever editor you are using</i>. After that save the file by Clicking File (On The Menu bar) &gt; Save<br>
        You will now see a dialog box. To save the file, go to your desired folder (directory, in Linux-speak) and type in the file name with extension '.html' (like if you want the name of your site to be "Hello" type "Hello.html") and hit Enter-- make sure that
         the 'Save As Type' option is set to 'All files' rather than '.txt'.<br> Now To Open the file using your favourite browser, and congrats! You've just written your first web page! Before we dive into what all the cryptic looking texts mean, let's have a better understanding of 
         the Internet, web browser and how all of these things work. <br></p>

        <br><a class="btn btn-primary" href="../un.php">Lesson 2 - Understanding The Internet Better</a>
                                </div>
                            </div>
                        </div>
                        <script src="javascript/jquery-1.10.2.js"></script>
    <script src="javascript/bootstrap.js"></script>
    <script src="javascript/modern-business.js"></script>
    <script src="holder.js"></script>

<script type="text/javascript">try{ clicky.init(100737264); }catch(e){}</script>
<noscript><p></p></noscript>                        <div class="hidden-xs hidden-sm" id="footer">
    <footer >

        <div class="row" style="position:relative;left:5%;">
            <hr>
                <p>Created By -- Akshat and Pradipta. <br />
                    The Bootstrap UI Framework used for the site is developed by <a class="standard-href" href="*www.twitter.com">Twitter Inc,</a> . The Tutorials included and linked are the properties of the respective site owner. <br />
                        Copyright &copy; 2014 . All rights reserved.</p>
                
                <img src="sitelogo.jpg" / style="position:relative;bottom:10px;top:10px;">
        </div>
    </footer>
    </div>
<div class=".visible-xs .visible-sm hidden-md hidden-lg" id="footer">
    <footer >

        <div class="row" style="position:relative;left:10%;">
            <hr>
                <p>Created By -- Akshat and Pradipta. <br />
                    
                        Copyright &copy; 2014 . All rights reserved.</p>
                
                
        </div>
    </footer>
    </div>                    </div>
                </div>
            

</body>
        </html>
[code]

Here is the link:
*www.programmingwhiz.bl.ee/html5/lesson1.php

Also , We are using Hostinger as the hosting.

Thanks in advance

geekpradd · Jun 14, 2014

Try tutorialspoint and W3schools

Chetan1991 · Aug 6, 2014

What source would you recommend to learn find out more about JS libraries that create dynamic animations in webpages nowadays, e.g. when you reach a certain part of a webpage, text fades in, then product image slides from the edge, and stuff like that.

abhidev · Aug 6, 2014

you might want to look at sites like smashingmagazine, sitepoint, netttuts

RCuber · Sep 27, 2014

I am looking for a good dev tool for Chrome. Inbuilt one is good, but I believe there are better alternatives available.

abhigeek · Oct 2, 2014

Re: Post HTML5, Javascript & CSS3 queries here

Any good book for learning javascript

- - - Updated - - -

Any good book for learning javascript

Makx · Oct 2, 2014

Chetan1991 said:
What source would you recommend to learn find out more about JS libraries that create dynamic animations in webpages nowadays, e.g. when you reach a certain part of a webpage, text fades in, then product image slides from the edge, and stuff like that.

jquery is good for animation, you can find examples and functions here
jQuery Effect Methods

RCuber said:
I am looking for a good dev tool for Chrome. Inbuilt one is good, but I believe there are better alternatives available.

you might find this useful Web Developer

abhidev · Oct 2, 2014

Chetan1991 said:
What source would you recommend to learn find out more about JS libraries that create dynamic animations in webpages nowadays, e.g. when you reach a certain part of a webpage, text fades in, then product image slides from the edge, and stuff like that.

you should use CSS3 to do the animation as its much smoother than js animations.

take a look at this Animate.css

markjohnshon · Mar 28, 2015

i want help from you guys to develop a program.
hello, i need a c++ programmer for a project.Please inbox me with details.we will pay for the project.The person must also have knowledge about C#.Please contact me with details.And i will further intimate the details of the project.contact me at aryan.chetry@gmail.com

TechnoBOY · May 20, 2015

geekpradd said:

Hello Everyone ,
I'm new to the forum but not new to digit (Reading since 2009 ever since I was a little kid!)
So anyways , you want your help regarding a project that I have been working on with my friend.

It's called ProgrammingWhiz AND It is a site that will teach programming in HTML5 , CSS3 , Javascript , Python ,PHP and MySQL and probably C++ in the future.

Currently I have finished working on the front-end and we are now at content-adding phase . We have started HTML5 Tutorials and I have currently finishing the final tutorials.

So , enough of the intro
Here is my problem:
Firstly ,
We are using HTML5 , CSS3 , jQuery , Bootstrap , Javascript and PHP for the core and using plugins like holder.js and highlight.js for adding to the experience.
The thing is though , that I have encountered a problem in the CSS and Bootstrap part that I am unable to recover.
The thing is that my site is spawning out of 100% width and it now has a horizontal scrollbar at the bottom . I think our fixed header is the reason behind but I can't fix it . I tried setting width to 100% but it still doesn't work
Here is one of the source:

Code:

<!Doctype html>
<html>
    <head>
        <link rel="shortcut icon" href="*www.programmingwhiz.bl.ee/html5/site.png">
        <title>Lesson 1 HTML5 Programming Whiz</title>
        <meta name="description" content="Learn Programming from the best across the Internet through ProgrammingWhiz">
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta name="author" content="Akshat Tripathi , Pradipta Bora"/>
        <meta property="og:title" content="ProgrammingWhiz">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta property="og:type" content="article">
        <meta property="og:description" content="Learn Programming from the best across the Internet through ProgrammingWhiz">
        <link rel="apple-touch-icon" href="*www.digit.in/forum/icon.png">
        <link href="*www.digit.in/forum/../css/bootstrap.css" rel="stylesheet">
        <link href="*www.digit.in/forum/../css/modern-business.css" rel="stylesheet">
        <link href="*www.digit.in/forum/../css/font-awesome.css" rel="stylesheet">
        <link href="*www.digit.in/forum/../css/global_styles.css" rel="stylesheet">
        <link rel="shortcut icon" href="*www.digit.in/forum/../site.png">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">
            @media(max-width: 600px){
                body{
                    position: relative;
                    left:4.2%;
                }
        
                @font-face {
                    font-family: Segoe UI;
                    src :url('segoe.ttf');
                }   
            }

            p {
                font-family: "Segoe UI","proxima-nova","proxima-nova-1","proxima-nova-2","Proxima Nova",Helvetica,Arial,sans-serif;
                font-size: 17px;
                line-height: 1.5;
                padding: 8px 5px 14px 5px;
            }

            h2 {
                font-family: "Segoe UI","proxima-nova","proxima-nova-1","proxima-nova-2","Proxima Nova",Helvetica,Arial,sans-serif;
                font-size: 30px;
                line-height: 1.1;
                padding: 8px 5px 14px 5px;
            }

            h3 {
                font-family: "Segoe UI","proxima-nova","proxima-nova-1","proxima-nova-2","Proxima Nova",Helvetica,Arial,sans-serif;
                font-size: 25px;
                line-height: 1.1;
                padding: 9px 5px 14px 5px;
            }

            h4 {
                font-family: "Segoe UI","proxima-nova","proxima-nova-1","proxima-nova-2","Proxima Nova",Helvetica,Arial,sans-serif;
                font-size: 21px;    
                line-height: 1.1;
                padding: 9px 5px 14px 5px;
            }

        </style>
        <link rel="stylesheet" href="*www.digit.in/forum/styles/github.css">
        <script src="javascript/highlight.pack.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>
    </head>
    <body>
    <style type="text/css">
	html,
body {
	margin:0;
	padding:0;
	height:100%;
}
#wrapper {
	min-height:100%;
	position:relative;
}
#content {
	padding:10px;
	padding-bottom:80px;   /* Height of the footer element */
}
#footer {
	width:100%;
	height:80px;
	position:absolute;
	bottom:0;
	left:0;
	
}
</style>        <div id="wrapper">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="width:100%;">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- You'll want to use a responsive image option so this logo looks good on devices - I recommend using something like retina.js (do a quick Google search for it and you'll find it) -->
            <a class="navbar-brand" href="../index.php">Programming Whiz</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="../basics.php">Learn Coding</a></li>
                <li><a href="../apps.php">Our Apps and Tools</a></li>
                <li><a href="../contact.php">About Us</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Articles <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="../un.php">Python</a></li>
                        <li><a href="../un.php">C++</a></li>
                        <li><a href="../un.php">HTML 5</a></li>
                        <li><a href="../un.php">Programming Structure</a></li>
                        <li><a href="../un.php">Miscellany</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Contact Us <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Facebook</a></li>
                        <li><a href="#">Twitter</a></li>
                        <li><a href="../mail_us.php">Mail Us</a></li>
                    </ul>
                </li>

            </ul>
        </div>
    <!-- /.navbar-collapse -->
    </div>
<!-- /.container -->
</nav>            <div id="content">
                <div class="row">
                    <div class="row">
                        <div class="sidebarx hidden-sm hidden-xs" style="position:absolute;right:0.22%;top:16%;width:14%;border-width:0px;z-index:342;">
                            <ul class="nav nav-stacked nav-pills">
                                <li><a href="../index.php"><span class="glyphicon glyphicon-home"></span>  Home</a></li>
                                <li><a href="../basics.php"><span class="glyphicon glyphicon-star"></span>  Begin Coding</a></li>
                                <li><a href="../html5.php"><span class="glyphicon glyphicon-star"></span>  Learn HTML5 & CSS3</a></li>
                                <li><a href="../un.php"><span class="glyphicon glyphicon-star"></span>  Learn Javascript</a></li>
                                <li><a href="../un.php"><span class="glyphicon glyphicon-star"></span>  Learn Python</a></li>            
                                <li><a href="../contact.php"><span class="glyphicon glyphicon-home"></span>  About Us</a></li>
                                <li><a href="../un.php"><span class="glyphicon glyphicon-home"></span>  Useful Sites</a></li>
                                <li><a href="../apps.php"><span class="glyphicon glyphicon-home"></span>  Our Apps</a></li>
            
                            </ul>
                        </div>
                        <div class="main " style="background-color:#eee;position:relative;;top:-45px;">
                            <div style="height:25%;padding-bottom:5%;padding-left:7%;padding-right:15%;padding-top:10%;color:#1C1C1C;"><h2 class="text-left"><br><img src="../logofull.png" class="hidden-xs hidden-sm" /><h2 class=".visible-xs .visible-sm hidden-md hidden-lg"><br>ProgrammingWhiz </h2><br><h4 style="color:#1C1C1C" >    Learn HTML5 & CSS3 </h4></h1></div></div><br>
                            <div style="position:relative;left:-4%;"class="col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1 col-md-9 col-md-offset-1">
                                <a class="btn btn-primary" href="../index.php" style="position:relative;left:0.3%;top:4%;"><< Go Back Home</a> <a class="btn btn-primary hidden-xs hidden-sm" href="lesson2.php" style="position:relative;left:75%;top:-10%;"> Lesson 2 >>  </a>
                                <br><br>
                                <br><h2 style="padding-bottom:0px;">HTML5: Your First Program </h2>
                                <p>This is a simple HTML5 program :</p><br><br>
        <pre><code>
        <!Doctype html>        
        <html>
            <head>
                <title>Hello World</title>
            </head>
            <body>
                Wello World!
            </body>
        </html></code></pre> <br>
                                <p class="text-justify">The Syntax would be explained on the next lesson; for now, we will teach you how to create an HTMl document and how to download a code editor.</p>
                                <br><br><h3>Code Editor: What It Is and Which One </h3>
                                <p class="text-justify">Before we dive into the world of HTML & CSS and start designing websites, we need 

                                to choose which code editor we will be using to write our code. A code editor is a tool 

(much like a text-editor like Notepad) which helps you write code in the most helpful 

way possible. How is it helpful? It highlights the important part of your code (its 

syntax), gives you good shortcuts for better using the code editor, it makes navigation 

easier as well and much more.</p>

<p>There are lots of code editors out there. (A side-note: you really don't <i>need</i> 

these code-editors, you can just use the familiar Notepad or any other text editor; 

however, it is always advicable that you use such code-editors to make your life a lot 

easier). For example, there's a very popular code editor in the programming world called 

Emacs. However, emacs is too complicated to use if you are a beginner, therefore, we 

recommend that you choose a simpler code-editor like Sublime Text or Geddit. In our website, 

we will always display the screenshots of codes (if at all) using Sublime Text 3. It is easy-

to-use, easy-to-learn, free (although, it often pops-up asking you to buy, but you can 

live your life that way, it's not <i>that</i> often), is not all that coomplicated and 

has syntax-highlighting (for now, if you're a complete beginner, it means separating 

code from normal text).</p>

<p>You can get Sublime Text 3 from its official website: <a rel="nofollow" 

href="*www.sublimetext.com/3">Download Sublime Text 3.</a> Installation for Windows is 

pretty straightforward so we won't spend much time describing how to install the 

software in Windows. However, if you're on a Linux computer, you need to install using 

the following command in your terminal (or you can use the GUI):</p><br>
<pre><code>tar xvjf [the folder name with extension (.tar.bz2)]</code></pre><br>
<p class="text-justify">After the extraction has been done, you can access the software using the file 

sublime_text. However if you're used to using terminal and you want to access Sublime 

from various directories, then you need to create a link to that file so that you can 

access it from wherever you like. To accomplish this, use the following code in your 

terminal:</p><br><br>
<pre><code>sudo ln -s sublime_text /usr/bin/sublime</code></pre><br>
                <p class="text-justify">Now you can access the code-editor using your terminal. (This code should work for all or most Linux distributions.)</p>

<p class="text-justify">There are different ways of accessing your HTML files. The simplest one is saving your code with the extension '.html' and then double-clicking on the file which should open it in the default web browser. However, most programmers prefer using the terminal to open your code, edit it, view it etc. You can edit your code using Sublime, the way you do this in terminal is: </p>
        <br><pre><code>sublime code.html &</code></pre><br>
        <p>Note that the '&' starts the program in the background. And to then open the file in your web browser, type your web browser's name and then the name of the file with its extension. Now since you have installed Sublime Text 3 , let's create your first web site.</p>

        <br><br>
        <h3>Your First Hello Website</h3>
        <p class="text-justify">
        Now, open Sublime Text from Windows or Linux using the above steps. The commands metioned above are for Linux users only, therfore, there's an assumption that you already know how to use
         basic commands in the termrinal if you're using a linux computer. If you don't understand, it's actually not a problem, you need to know them now.<br>
        <p class="text-justify">Now copy and paste the above given code onto Sublime Text <i>Or whichever editor you are using</i>. After that save the file by Clicking File (On The Menu bar) > Save<br>
        You will now see a dialog box. To save the file, go to your desired folder (directory, in Linux-speak) and type in the file name with extension '.html' (like if you want the name of your site to be "Hello" type "Hello.html") and hit Enter-- make sure that
         the 'Save As Type' option is set to 'All files' rather than '.txt'.<br> Now To Open the file using your favourite browser, and congrats! You've just written your first web page! Before we dive into what all the cryptic looking texts mean, let's have a better understanding of 
         the Internet, web browser and how all of these things work. <br></p>

        <br><a class="btn btn-primary" href="../un.php">Lesson 2 - Understanding The Internet Better</a>
                                </div>
                            </div>
                        </div>
                        <script src="javascript/jquery-1.10.2.js"></script>
    <script src="javascript/bootstrap.js"></script>
    <script src="javascript/modern-business.js"></script>
    <script src="holder.js"></script>

<script type="text/javascript">try{ clicky.init(100737264); }catch(e){}</script>
<noscript><p></p></noscript>                        <div class="hidden-xs hidden-sm" id="footer">
    <footer >

        <div class="row" style="position:relative;left:5%;">
            <hr>
                <p>Created By -- Akshat and Pradipta. <br />
                    The Bootstrap UI Framework used for the site is developed by <a rel="nofollow" class="standard-href" href="*www.twitter.com">Twitter Inc,</a> . The Tutorials included and linked are the properties of the respective site owner. <br />
                        Copyright © 2014 . All rights reserved.</p>
                
                <img src="sitelogo.jpg" / style="position:relative;bottom:10px;top:10px;">
        </div>
    </footer>
    </div>
<div class=".visible-xs .visible-sm hidden-md hidden-lg" id="footer">
    <footer >

        <div class="row" style="position:relative;left:10%;">
            <hr>
                <p>Created By -- Akshat and Pradipta. <br />
                    
                        Copyright © 2014 . All rights reserved.</p>
                
                
        </div>
    </footer>
    </div>                    </div>
                </div>
            

</body>
        </html>
[code]

Here is the link:
*www.programmingwhiz.bl.ee/html5/lesson1.php

Also , We are using Hostinger as the hosting.

Thanks in advance[/QUOTE]
[/SPOILER]
so is this over ?

ankush28 · May 24, 2015

Re: Post HTML5, Javascript & CSS3 queries here

abhigeek said:
Any good book for learning javascript

- - - Updated - - -

Any good book for learning javascript

Jon Duckett... forgot title of book. Really great info and well formatted book. I didn't complete whole book, I switched to MDN's documentation, which is good enough (If you know any other language) - *developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction

abhigeek · May 24, 2015

Re: Post HTML5, Javascript & CSS3 queries here

ankush28 said:
Jon Duckett... forgot title of book. Really great info and well formatted book. I didn't complete whole book, I switched to MDN's documentation, which is good enough (If you know any other language) - *developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction

Dude, I was asking for book in Oct 2014. My post is way too old.
Now, I already know javascript and many other language.
Anyways thanks for help.

ankush28 · May 24, 2015

Re: Post HTML5, Javascript & CSS3 queries here

abhigeek said:
Dude, I was asking for book in Oct 2014. My post is way too old.
Now, I already know javascript and many other language.
Anyways thanks for help.

Haha this part of forum is really slow then

bijay_ps · Jun 7, 2015

Hi,

I have found this code from google, and it is working fine but the pop up window is transparent and I want to make it opaque. (I know that the pop up window is transparent because if I zoom in the browser I can see the pop up window overlapping with the background content and the background content is visible)

Here is the code:

Code:

<HTML>
	<HEAD>
		<TITLE>Popup div with disabled background</TITLE>
		<style>
			.ontop {
				z-index: 9999;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
				position: absolute;				
				background-color: #cccccc;
				color: #aaaaaa;
				opacity: .8;
				filter: alpha(opacity = 80);
			}
			#popup {
				width: 300px;
				height: 200px;
				position: absolute;
				color: #000000;
				background-color: #ffffff;
				/* To align popup window at the center of screen*/
				top: 50%;
				left: 50%;
				margin-top: -100px;
				margin-left: -150px;
			}
		</style>
		<script type="text/javascript">
			function pop(div) {
				document.getElementById(div).style.display = 'block';
			}
			function hide(div) {
				document.getElementById(div).style.display = 'none';
			}
			//To detect escape button
			document.onkeydown = function(evt) {
				evt = evt || window.event;
				if (evt.keyCode == 27) {
					hide('popDiv');
				}
			};
		</script>
	</HEAD>
	<BODY>
		<div id="popDiv" class="ontop">
			<table border="1" id="popup">
				<tr>
					<td>
						This is can be used as a popup window
						<br></br>
						Click Close OR escape button to close it
						<a href="#" onClick="hide('popDiv')">Close</a>
					</td>
				</tr>
			</table>
		</div>
		<CENTER>
			<h3>
				Simple popup div with disabled background
			</h3>
			<br/>
			<a href="#" onClick="pop('popDiv')">Click here to open a popup div</a>
		</CENTER>
	</BODY>
</HTML>

Faun · Jun 8, 2015

bijay_ps said:
Hi,

I have found this code from google, and it is working fine but the pop up window is transparent and I want to make it opaque. (I know that the pop up window is transparent because if I zoom in the browser I can see the pop up window overlapping with the background content and the background content is visible)

Here is the code:

<HTML>
<HEAD>
<TITLE>Popup div with disabled background</TITLE>
<style>
.ontop {
z-index: 9999;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
position: absolute;
background-color: #cccccc;
color: #aaaaaa;
opacity: .8;
filter: alpha(opacity = 80);
}
#popup {
width: 300px;
height: 200px;
position: absolute;
color: #000000;
background-color: #ffffff;
/* To align popup window at the center of screen*/
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
}
</style>
<script type="text/javascript">
function pop(div) {
document.getElementById(div).style.display = 'block';
}
function hide(div) {
document.getElementById(div).style.display = 'none';
}
//To detect escape button
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27) {
hide('popDiv');
}
};
</script>
</HEAD>
<BODY>
<div id="popDiv" class="ontop">
<table border="1" id="popup">
<tr>
<td>
This is can be used as a popup window
<br></br>
Click Close OR escape button to close it
<a href="#" onClick="hide('popDiv')">Close</a>
</td>
</tr>
</table>
</div>
<CENTER>
<h3>
Simple popup div with disabled background
</h3>
<br/>
<a href="#" onClick="pop('popDiv')">Click here to open a popup div</a>
</CENTER>
</BODY>
</HTML>

Code:

<!DOCTYPE html>
<html>
<head>
    <title>Popup div with disabled background</title>
    <style>
.ontop {
    z-index: 9999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    position: absolute;
    background-color: #cccccc;
    color: #aaaaaa;
    opacity: .8;
    filter: alpha(opacity = 80);
    }
    #popup {
    z-index: 99991;
    width: 300px;
    height: 200px;
    position: absolute;
    color: #000000;
    background-color: #ffffff;
    /* To align popup window at the center of screen*/
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -150px;
    }
    </style>
    <script type="text/javascript">
function pop(div) {
    document.getElementById(div).style.display = 'block';
    }
    function hide(div) {
    document.getElementById(div).style.display = 'none';
    }
    //To detect escape button
    document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.keyCode == 27) {
    hide('popDiv');
    }
    };
    </script>
</head>

<body>
    <div class="ontop" id="popDiv"></div>

    <table border="1" id="popup">
        <tr>
            <td>
                This is can be used as a popup window<br>
                <br>
                Click Close OR escape button to close it <a href="#" onclick=
                "hide('popDiv')">Close</a>
            </td>
        </tr>
    </table>

    <h3>Simple popup div with disabled background</h3><br>
    <a href="#" onclick="pop('popDiv')">Click here to open a popup div</a><br>
</body>
</html>

You can check that same way it is done in digit forum when you click on insert image.

Shah · Jun 8, 2015

bijay_ps said:

Hi,

I have found this code from google, and it is working fine but the pop up window is transparent and I want to make it opaque. (I know that the pop up window is transparent because if I zoom in the browser I can see the pop up window overlapping with the background content and the background content is visible)

Here is the code:

Code:

<HTML>
	<HEAD>
		<TITLE>Popup div with disabled background</TITLE>
		<style>
			.ontop {
				z-index: 9999;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
				position: absolute;				
				background-color: #cccccc;
				color: #aaaaaa;
				opacity: .8;
				filter: alpha(opacity = 80);
			}
			#popup {
				width: 300px;
				height: 200px;
				position: absolute;
				color: #000000;
				background-color: #ffffff;
				/* To align popup window at the center of screen*/
				top: 50%;
				left: 50%;
				margin-top: -100px;
				margin-left: -150px;
			}
		</style>
		<script type="text/javascript">
			function pop(div) {
				document.getElementById(div).style.display = 'block';
			}
			function hide(div) {
				document.getElementById(div).style.display = 'none';
			}
			//To detect escape button
			document.onkeydown = function(evt) {
				evt = evt || window.event;
				if (evt.keyCode == 27) {
					hide('popDiv');
				}
			};
		</script>
	</HEAD>
	<BODY>
		<div id="popDiv" class="ontop">
			<table border="1" id="popup">
				<tr>
					<td>
						This is can be used as a popup window
						<br></br>
						Click Close OR escape button to close it
						<a href="#" onClick="hide('popDiv')">Close</a>
					</td>
				</tr>
			</table>
		</div>
		<CENTER>
			<h3>
				Simple popup div with disabled background
			</h3>
			<br/>
			<a href="#" onClick="pop('popDiv')">Click here to open a popup div</a>
		</CENTER>
	</BODY>
</HTML>

Better use jQuery Colorbox plugin, saves a lot of time and completely worth using it

bijay_ps · Jun 9, 2015

I have created one HTML table with fixed header and scrollable body. But when I resize the browser window or zoom in or zoom out the browser the table alignment changes. I want to view the complete table aligned with data even if browser window is resized or zoomed in or zoomed out.

And I need it to work in IE 11 and IE 8

I have tried many solutions from google, but I couldn't make it work.

Kindly help, I need the solution for this issue badly.

Here is the code:

Code:

<html>
<head>
 <style>
   div td{
	text-align: center;
	}
 </style>
	<script language="Javascript">
	window.onload = init;
	window.onresize = init;
	
	function init() {
	var eTable = document.getElementById("headers");
	 if (eTable != null){

	eTable.style.width = document.getElementById('data').offsetWidth;
	document.getElementById('th1').style.width = document.getElementById('td1').offsetWidth;
	document.getElementById('th2').style.width = document.getElementById('td2').offsetWidth;
	document.getElementById('th3').style.width = document.getElementById('td3').offsetWidth;
	document.getElementById('th4').style.width = document.getElementById('td4').offsetWidth;
	document.getElementById('th5').style.width = document.getElementById('td5').offsetWidth;
	
	document.getElementById('th7').style.width = document.getElementById('td7').offsetWidth;
	document.getElementById('th8').style.width = document.getElementById('td8').offsetWidth;
	document.getElementById('th6').style.width = document.getElementById('td6').offsetWidth;
	document.getElementById('th9').style.width = document.getElementById('td9').offsetWidth;
	}
  }
</script>

</head>
	<body>	



	<table id="headers" width="100%"  >
			<thead><tr bgcolor="blue">
				<th align="center" id="th1">
				DPCI<br>
			</th>						 
			<th align="center" id="th2">
				Description<br>
			</th>
			<th align="center" id="th3">
				Estimated Delivery Date<br>
			</th>
			<th align="center" id="th4">
				Promotional Week Begin Date or Event Set Date<br>
			</th>			
			<th align="center" id="th5">
				Promotional Type<br>
			</th>			
			<th align="center" id="th6">
				Regular Price<br>
			</th>			
			<th align="center" id="th7">
				Reduced Price<br>
			</th>			
			<th align="center" id="th8">
				Sales Forecast Qty (Cases)<br>
			</th>
			<th align="center" id="th9">
				HQ Push Qty (Cases)<br>
			</th>
			</tr></thead>
	</table>
			<div style="height: 275px; overflow-y: auto;">

			<table id="data" width="100%">
			      
			
					<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	
					<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	

				</table>
			</div>
	</body>
</html>

//Mod Edit - Wrapped the code within CODE tags

Post HTML5, Javascript & CSS3 queries here

Simply a DIGITian

Cyborg Agent

I am the night...I am...

Right off the assembly line

Right off the assembly line

Youngling

Human Spambot

The Mighty Unkel!!!

I

Game on

Human Spambot

New to this forum

Padawan

Bazinga

I

Bazinga

Broken In

Wahahaha~!

Cyborg Agent

Broken In