Welcome! Log In Create A New Profile

Advanced

Re: CSS: Lesson 1: Topic 1A

Posted by 78175232 
Announcements Last Post
Announcement : Programming Students at UNISA School of Computing 06/19/2019 02:01PM
Announcement SoC Curricula 09/30/2017 01:08PM
Announcement Demarcation or scoping of examinations and assessment 02/13/2017 07:59AM
Announcement School of Computing Short Learning Programmes 11/24/2014 08:37AM
Announcement Unisa contact information 07/28/2011 01:28PM
Re: CSS: Lesson 1: Topic 1A
October 19, 2013 11:20AM
morning guys please help ,im failing to put rotating pictures
it looks like this



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="http://www.charlotte.freevar.com/1999/xhtml">;
<head>
<title>Contact Form</title>
<link href="formstyle.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">

function checkform(pform1){
var str=pform1.password.value;
var email = pform1.email.value;
var phone = pform1.phone.value;
var cleanstr = phone.replace(/[\(\)\.\-\ ]/g, '');
var err={};
var validemail =/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

//check required fields
//password should be minimum 4 chars but not greater than 8
if ((str.length < 4) || (str.length > 8)) {

err.message="Invalid password length";
err.field=pform1.password;
}

//validate email
if(!(validemail.test(email))){
err.message="Invalid email";
err.field=pform1.email;

}

//check phone number
if (isNaN(parseInt(cleanstr))) {
err.message="Invalid phone number";
err.field=pform1.phone;
}

if(err.message)
{
document.getElementById('divError').innerHTML = err.message;
err.field.focus();
return false;

}


return true
}
</script>

</head>
<body>
<h1>Contact Form Handling with JavaScript</h1>

<form action="" method="POST" onsubmit="return checkform(this);">

<div id="errmsgbox">

<div id="divError"></div>

</div>

<fieldset class="credentials">
<legend>Access Credentials</legend>

<table border="0">

<tr>
<td><label for="username" class="hover">Username</label></td>
<td><input type="text" id="username" class="required text"/>
<span class="style1">*</span></td>
</tr>
<tr>
<td><label for="password" class="hover">Password</label></td>
<td><input type="password" id="password" class="required text"/>
<span class="style1">*</span><br />
<span class="tooltip">Minimum four and maximum eight characters</span> </td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="text" id="email" class="required email text"/>
<span class="style1">*</span></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Other Information</legend>
<table border="0">

<tr>
<td width="59"><label for="name">Name</label></td>
<td width="207"><input type="text" id="name" class="required text"/>
<span class="style1">*</span></td>
</tr>
<tr>
<td><label for="phone">Phone</label></td>
<td><input type="text" id="phone" class="phone text"/></td>
</tr>
<tr>

<td colspan="2"><input type="submit" value="Submit Form" class="submit"/></td>
</tr>
<tr>
<td colspan="2">* = Required Field</td>
</tr>
</table>

</fieldset>
</form>
</body>
</html>
avatar Re: CSS: Lesson 1: Topic 1A
October 19, 2013 12:12PM
This code displays and validates a form - what does it have to do with rotating pictures ?

There is no code that displays any images, let alone rotate them !
Re: CSS: Lesson 1: Topic 1A
October 20, 2013 09:37AM
im done with my form but im failing to create a menu with a roll over images
avatar Re: CSS: Lesson 1: Topic 1A
October 20, 2013 09:56AM
Re: CSS: Lesson 1: Topic 1A
November 04, 2013 04:48PM
THANK YOU VERY MUCH I THINK I GOT IT RIGHT NOW
Re: CSS: Lesson 1: Topic 1A
November 05, 2013 10:17AM
morning please help . i have submitted my assignment ands they said they dont understand it please help today is the closing date. here is my website look like
<htm>
<title>|| welcome to Charlotte's website || </title>
<body bgcolor="green">
<style type="text/css">
.arrowOver{
background-repeat:no-repeat;
background-image:url('images/arrow-over.gif');
color:blue; }
</style>
<p onmouseover="this.className='arrowOver'" onmouseout="this.className=''">Menu</p>
<p onmouseover="this.className='arrowOver'" onmouseout="this.className=''">Services</p>
<p onmouseover="this.className='arrowOver'" onmouseout="this.className=''">About</p>
<p onmouseover="this.className='arrowOver'" onmouseout="this.className=''">Gallary</p>
<p onmouseover="this.className='arrowOver'" onmouseout="this.className=''">About</p>
</body>
<div class="logo">
<table width="100%">
<tr>
<td></td>
</tr>
</table>
</div>
<div class="nevigation">
<table cellpadding="0" cellspacing="0" border="0px">
</htm1>
<!DOCTYPE index.html "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="http://www.charlotte.freevar.com/1999/xhtml">;
<head>
<title>Contact Form</title>
<link href="formstyle.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
.myNewStyle {

font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold;

color: #FF0000;

}

.my2ndNewStyle {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

color: #FF0000;

}

.my3rdNewStyle {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

font-size: 12pt;

color: #FF0000;

}

function checkform(pform1){
var str=pform1.password.value;
var email = pform1.email.value;
var phone = pform1.phone.value;
var cleanstr = phone.replace(/[\(\)\.\-\ ]/g, '');
var err={};
var validemail =/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

//check required fields
//password should be minimum 4 chars but not greater than 8
if ((str.length < 4) || (str.length > 8)) {

err.message="Invalid password length";
err.field=pform1.password;
}

//validate email
if(!(validemail.test(email))){
err.message="Invalid email";
err.field=pform1.email;

}

//check phone number
if (isNaN(parseInt(cleanstr))) {
err.message="Invalid phone number";
err.field=pform1.phone;
}

if(err.message)
{
document.getElementById('divError').innerHTML = err.message;
err.field.focus();
return false;

}

return true
}
</script>

</head>
<body>
<h1>Contact Form Handling with JavaScript</h1>

<form action="" method="POST" onsubmit="return checkform(this);">

<div id="errmsgbox">

<div id="divError"></div>

</div>

<fieldset class="credentials">
<legend>Access Credentials</legend>

<table border="0">

<tr>
<td><label for="username" class="hover">Username</label></td>
<td><input type="text" id="username" class="required text"/>
<span class="style1">*</span></td>
</tr>
<tr>
<td><label for="password" class="hover">Password</label></td>
<td><input type="password" id="password" class="required text"/>
<span class="style1">*</span><br />
<span class="tooltip">Minimum four and maximum eight characters</span> </td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="text" id="email" class="required email text"/> <span class="style1">*</span></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Other Information</legend>
<table border="0">

<tr>
<td width="59"><label for="name">Name</label></td>
<td width="207"><input type="text" id="name" class="required text"/>
<span class="style1">*</span></td>
</tr>
<tr>
<td><label for="phone">Phone</label></td>
<td><input type="text" id="phone" class="phone text"/></td>
</tr>
<tr>

<td colspan="2"><input type="submit" value="Submit Form" class="submit"/></td>
</tr>
<tr>
<td colspan="2">* = Required Field</td>
</tr>
</table>

</fieldset>
</form>
</body>
</html>

<html>
<bottom>
<a href="http://osprey.unisa.ac.za/phorum/read.php?754,183312,183312#msg-183312">Active Participation</a>
<html>
avatar
Mac
Re: CSS: Lesson 1: Topic 1A
November 05, 2013 10:30AM
I do not understand what the first marker did not understand... ? What was the message? This is the contact form....?
Re: CSS: Lesson 1: Topic 1A
November 05, 2013 11:49AM
you can open my website and see what im talking about. http://charlotte.freevar.com/html
Re: CSS: Lesson 1: Topic 1A
November 05, 2013 12:09PM
Good day

Thank you for your portfolio address. Please check it seems me there are problems

Currently only the active participation link is working. Website is opening on the contact form page. See below

Kindly correct your problems and submit web address as soon as possible
Re: CSS: Lesson 1: Topic 1A
November 05, 2013 12:37PM
please guys assist i dnt know what is the correct, i want to submit my assignment
avatar Re: CSS: Lesson 1: Topic 1A
November 05, 2013 02:19PM
There are numerous errors with your code - particularly the HTML structure -

<!Doctype> should be the frst line of code.
<html> should be second line, and </html> the very last line. You should only use <html></html> ONCE in the page.

Language: HTML
<htm> <<< Should be <html>, first line should be <!Doctype . . . .>, <head> should go after <html> <title>|| welcome to Charlotte's website || </title> <<< This should be within the <head></head> section <body bgcolor="green"> <style type="text/css"> .arrowOver{ background-repeat:no-repeat; background-image:url('images/arrow-over.gif'); color:blue; } </style> <p onmouseover="this.className='arrowOver'" onmouseout="this.className=''">Menu</p> <p onmouseover="this.className='arrowOver'" onmouseout="this.className=''">Services</p> <p onmouseover="this.className='arrowOver'" onmouseout="this.className=''">About</p> <p onmouseover="this.className='arrowOver'" onmouseout="this.className=''">Gallary</p> <p onmouseover="this.className='arrowOver'" onmouseout="this.className=''">About</p> </body> <<< This cant go here, must be right at the end of your code, just before </html> <div class="logo"> <table width="100%"> <tr> <td></td> </tr> </table> </div> <div class="nevigation"> <table cellpadding="0" cellspacing="0" border="0px"> </htm1> <<<<< Cant go here, must be the last line <!DOCTYPE index.html "-//W3C//DTD XHTML 1.0 Transitional//EN" "[www.w3.org]; <<<<< Must be the first line of code <html xmlns="[www.charlotte.freevar.com]; <<<<< Don't use XHTML doctype <head> <<<<< Must be at top of page <title>Contact Form</title> <<<<<< You already have a title <link href="formstyle.css" rel="stylesheet" type="text/css" /> <script language="javascript" type="text/javascript"> <<<< Don't need "language" and "type" - they do the same thing. "language" is obsolete, delete it. .myNewStyle {   font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold;   color: #FF0000;   }   .my2ndNewStyle {   font-family: Verdana, Arial, Helvetica, sans-serif;   font-weight: bold;   color: #FF0000;   }   .my3rdNewStyle {   font-family: Verdana, Arial, Helvetica, sans-serif;   font-weight: bold;   font-size: 12pt;   color: #FF0000;   }   function checkform(pform1){ var str=pform1.password.value; var email = pform1.email.value; var phone = pform1.phone.value; var cleanstr = phone.replace(/[\(\)\.\-\ ]/g, ''); var err={}; var validemail =/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;   //check required fields //password should be minimum 4 chars but not greater than 8 if ((str.length < 4) || (str.length > 8)) {   err.message="Invalid password length"; err.field=pform1.password; }   //validate email if(!(validemail.test(email))){ err.message="Invalid email"; err.field=pform1.email;   }   //check phone number if (isNaN(parseInt(cleanstr))) { err.message="Invalid phone number"; err.field=pform1.phone; }   if(err.message) { document.getElementById('divError').innerHTML = err.message; err.field.focus(); return false;   }   return true } </script>   </head> <body> <<<< You already have a <body> tag, cannot use it twice <h1>Contact Form Handling with JavaScript</h1>   <form action="" method="POST" onsubmit="return checkform(this);">   <div id="errmsgbox">   <div id="divError"></div>   </div>   <fieldset class="credentials"> <legend>Access Credentials</legend>   <table border="0">   <tr> <td><label for="username" class="hover">Username</label></td> <td><input type="text" id="username" class="required text"/> <span class="style1">*</span></td> </tr> <tr> <td><label for="password" class="hover">Password</label></td> <td><input type="password" id="password" class="required text"/> <span class="style1">*</span><br /> <span class="tooltip">Minimum four and maximum eight characters</span> </td> </tr> <tr> <td><label for="email">Email</label></td> <td><input type="text" id="email" class="required email text"/> <span class="style1">*</span></td> </tr> </table> </fieldset> <fieldset> <legend>Other Information</legend> <table border="0">   <tr> <td width="59"><label for="name">Name</label></td> <td width="207"><input type="text" id="name" class="required text"/> <span class="style1">*</span></td> </tr> <tr> <td><label for="phone">Phone</label></td> <td><input type="text" id="phone" class="phone text"/></td> </tr> <tr>   <td colspan="2"><input type="submit" value="Submit Form" class="submit"/></td> </tr> <tr> <td colspan="2">* = Required Field</td> </tr> </table>   </fieldset> </form> </body> </html>   <html> <<<<<< !!!!!!! no, once only at top of page <bottom> <a href="[osprey.unisa.ac.za] Participation</a> <html> <<<<<<<< NO !!!!, last tag must be </html>
avatar Re: CSS: Lesson 1: Topic 1A
November 05, 2013 03:08PM
The landing page does not seem to be index.html.

Do you have a file named index.html in your project directory ?
Re: CSS: Lesson 1: Topic 1A
November 05, 2013 04:26PM
this is how i did now, can you please check it out for me

<!DOCTYPE index.html "-//W3C//DTD HTML 1.0 Transitional//EN" "[www.w3.org];
<html>
<head><center>|| WELCOME TO CHARLOTTE'S WEBSITE || </head></center>
<body bgcolor="green">

<p class="standardArrow"><a href="#"><img border="0" src="/images/pic1.jpg" alt="pic1" width="1200" height="300"><img</a></p>

<style type="text/css">
.arrowOver{
background-repeat:no-repeat;
background-image:url('images/arrow-over.gif');
color:blue; }
</style>
<left>
<p class="standardArrow"><a href="#">Menu</a></p>
<p class="standardArrow"><a href="#">Services</a></p>
<p class="standardArrow"><a href="#">About</a></p>
<p class="standardArrow"><a href="#">Gallery</a></p>
<p class="standardArrow"><a href="#">Contact</a></p>
</left>
<div class="logo">
<table width="100%">
<tr>
<td></td>
</tr>
</table>
</div>
<div class="nevigation">
<table cellpadding="0" cellspacing="0" border="0px">
<html mlns="[www.charlotte.freevar.com];
<title>Contact Form</title>
<link href="formstyle.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
.myNewStyle {

font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold;

color: #FF0000;

}

.my2ndNewStyle {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

color: #FF0000;

}

.my3rdNewStyle {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

font-size: 12pt;

color: #FF0000;

}

function checkform(pform1){
var str=pform1.password.value;
var email = pform1.email.value;
var phone = pform1.phone.value;
var cleanstr = phone.replace(/[\(\)\.\-\ ]/g, '');
var err={};
var validemail =/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

//check required fields
//password should be minimum 4 chars but not greater than 8
if ((str.length < 4) || (str.length > 8)) {

err.message="Invalid password length";
err.field=pform1.password;
}

//validate email
if(!(validemail.test(email))){
err.message="Invalid email";
err.field=pform1.email;

}

//check phone number
if (isNaN(parseInt(cleanstr))) {
err.message="Invalid phone number";
err.field=pform1.phone;
}

if(err.message)
{
document.getElementById('divError').innerHTML = err.message;
err.field.focus();
return false;

}

return true
}
</script>

</head>
<h1>Contact Form Handling with JavaScript</h1>

<form action="" method="POST" onsubmit="return checkform(this);">

<div id="errmsgbox">

<div id="divError"></div>

</div>

<fieldset class="credentials">
<legend>Access Credentials</legend>

<table border="0">

<tr>
<td><label for="username" class="hover">Username</label></td>
<td><input type="text" id="username" class="required text"/>
<span class="style1">*</span></td>
</tr>
<tr>
<td><label for="password" class="hover">Password</label></td>
<td><input type="password" id="password" class="required text"/>
<span class="style1">*</span><br />
<span class="tooltip">Minimum four and maximum eight characters</span> </td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="text" id="email" class="required email text"/> <span class="style1">*</span></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Other Information</legend>
<table border="0">

<tr>
<td width="59"><label for="name">Name</label></td>
<td width="207"><input type="text" id="name" class="required text"/>
<span class="style1">*</span></td>
</tr>
<tr>
<td><label for="phone">Phone</label></td>
<td><input type="text" id="phone" class="phone text"/></td>
</tr>

<tr>
<td colspan="2"><input type="submit" value="Submit Form" class="submit"/></td>
</tr>

<tr>
<td colspan="2">* = Required Field</td>
</tr>
</table>
</fieldset>
</form>
<bottom>
<a href="http://osprey.unisa.ac.za/phorum/read.php?754,183312,183312#msg-183312">Active Participation</a>
</body>
</html>
Re: CSS: Lesson 1: Topic 1A
November 05, 2013 04:27PM
yes i do have a file name index html
Re: CSS: Lesson 1: Topic 1A
November 05, 2013 04:42PM
i have submitted it this way .now i really don't understand if they are saying is not correctsad smiley

<!DOCTYPE index.html "-//W3C//DTD HTML 1.0 Transitional//EN" "[www.w3.org];
<html>
<head><center>|| WELCOME TO CHARLOTTE'S WEBSITE || </head></center>
<body bgcolor="green">
<p class="standardArrow"><a href="#"><img border="0" src="/images/pic1.jpg" alt="pic1" width="1200" height="300"><img</a></p>
<style type="text/css">
.arrowOver{
background-repeat:no-repeat;
background-image:url('images/arrow-over.gif');
color:blue; }
</style>
<left>
<p class="standardArrow"><a href="#">Menu</a></p>
<p class="standardArrow"><a href="#">Services</a></p>
<p class="standardArrow"><a href="#">About</a></p>
<p class="standardArrow"><a href="#">Gallery</a></p>
<p class="standardArrow"><a href="#">Contact</a></p>
</left>
<div class="logo">
<table width="100%">
<tr>
<td></td>
</tr>
</table>
</div>
<div class="nevigation">
<table cellpadding="0" cellspacing="0" border="0px">
<html mlns="[www.charlotte.freevar.com];
<title>Contact Form</title>
<link href="formstyle.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
.myNewStyle {

font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold;

color: #FF0000;

}

.my2ndNewStyle {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

color: #FF0000;

}

.my3rdNewStyle {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

font-size: 12pt;

color: #FF0000;

}

function checkform(pform1){
var str=pform1.password.value;
var email = pform1.email.value;
var phone = pform1.phone.value;
var cleanstr = phone.replace(/[\(\)\.\-\ ]/g, '');
var err={};
var validemail =/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

//check required fields
//password should be minimum 4 chars but not greater than 8
if ((str.length < 4) || (str.length > 8)) {

err.message="Invalid password length";
err.field=pform1.password;
}

//validate email
if(!(validemail.test(email))){
err.message="Invalid email";
err.field=pform1.email;

}

//check phone number
if (isNaN(parseInt(cleanstr))) {
err.message="Invalid phone number";
err.field=pform1.phone;
}

if(err.message)
{
document.getElementById('divError').innerHTML = err.message;
err.field.focus();
return false;

}

return true
}
</script>

</head>
<h1>Contact Form Handling with JavaScript</h1>

<form action="" method="POST" onsubmit="return checkform(this);">

<div id="errmsgbox">

<div id="divError"></div>

</div>

<fieldset class="credentials">
<legend>Access Credentials</legend>

<table border="0">

<tr>
<td><label for="username" class="hover">Username</label></td>
<td><input type="text" id="username" class="required text"/>
<span class="style1">*</span></td>
</tr>
<tr>
<td><label for="password" class="hover">Password</label></td>
<td><input type="password" id="password" class="required text"/>
<span class="style1">*</span><br />
<span class="tooltip">Minimum four and maximum eight characters</span> </td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="text" id="email" class="required email text"/> <span class="style1">*</span></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Other Information</legend>
<table border="0">

<tr>
<td width="59"><label for="name">Name</label></td>
<td width="207"><input type="text" id="name" class="required text"/>
<span class="style1">*</span></td>
</tr>
<tr>
<td><label for="phone">Phone</label></td>
<td><input type="text" id="phone" class="phone text"/></td>
</tr>

<tr>
<td colspan="2"><input type="submit" value="Submit Form" class="submit"/></td>
</tr>

<tr>
<td colspan="2">* = Required Field</td>
</tr>
</table>
</fieldset>
</form>
<bottom>
<a href="http://osprey.unisa.ac.za/phorum/read.php?754,183312,183312#msg-183312">Active Participation</a>
</body>
</html>
avatar Re: CSS: Lesson 1: Topic 1A
November 05, 2013 04:44PM
Language: HTML
<head><center>|| WELCOME TO CHARLOTTE'S WEBSITE || </head></center>

Is this meant to be a <title> or a heading <h1> on your page ?
Should be in <title> tag ?, and order of tags in incorrect -
Dont end the </head> here, you have another </head> lower down.

Language: HTML
<head> <title><center>|| WELCOME TO CHARLOTTE'S WEBSITE || </center></title>

<left></left> <<< No such tag

Language: HTML
<html mlns="[www.charlotte.freevar.com]; <<< ????? CANNOT HAVE MORE THAN ONE <html> TAG, and content is nonsense <title>Contact Form</title> <<< Already have a title ??, and <title> must go in the <head> section


<bottom> <<< No such tag
avatar Re: CSS: Lesson 1: Topic 1A
November 05, 2013 05:00PM
Note that <head> is NOT a heading, it defines the structure of a web page, like this -

<!Doctype . . . .>
<html>
<head>
<title>
"Title goes here"
</title>

JavaScript functions etc goes here

</head>
<body>

Content goes here

</body>
</html>
Re: CSS: Lesson 1: Topic 1A
November 06, 2013 09:23AM
morning
can you please show me how to put my rollover menu horizontal
avatar Re: CSS: Lesson 1: Topic 1A
November 06, 2013 10:14AM
Look here -

http://www.w3schools.com/css/css_navbar.asp


You need to use CSS, and <ul> <li> instead of <p>
Re: CSS: Lesson 1: Topic 1A
November 06, 2013 03:35PM
this is wat it look like now,please advice

<!DOCTYPE html>
<html>
<head>
<title>|| WELCOME TO CHARLOTTE'S WEBSITE || </title>

<body bgcolor="green">
<p class="standardArrow"><a href="#"><img border="0" src="/images/pic1.jpg" alt="pic1" width="1200" height="300"><img</a></p>
<style type="text/css">
.arrowOver{
background-repeat:no-repeat;
background-image:url('images/arrow-over.gif');
color:blue; }
</style>
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:120px;
background-color:#dddddd;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Gallery</a></li>
<li><a href="#about">About</a></li>
<li><a href="#about">Contact us</a></li>
</ul>

</body>
</html>

<div class="logo">
<table width="100%">
<tr>
<td></td>
</tr>
</table>
</div>
<div class="nevigation">
<table cellpadding="0" cellspacing="0" border="0px">
<Contact Form>
<link href="formstyle.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
.myNewStyle {

font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold;

color: #FF0000;

}

.my2ndNewStyle {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

color: #FF0000;

}

.my3rdNewStyle {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

font-size: 12pt;

color: #FF0000;

}

function checkform(pform1){
var str=pform1.password.value;
var email = pform1.email.value;
var phone = pform1.phone.value;
var cleanstr = phone.replace(/[\(\)\.\-\ ]/g, '');
var err={};
var validemail =/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

//check required fields
//password should be minimum 4 chars but not greater than 8
if ((str.length < 4) || (str.length > 8)) {

err.message="Invalid password length";
err.field=pform1.password;
}

//validate email
if(!(validemail.test(email))){
err.message="Invalid email";
err.field=pform1.email;
}

//check phone number
if (isNaN(parseInt(cleanstr))) {
err.message="Invalid phone number";
err.field=pform1.phone;
}

if(err.message)
{
document.getElementById('divError').innerHTML = err.message;
err.field.focus();
return false;

}

return true
}
</script></head>
<h1>Contact Form that uses JavaScript</h1>

<form action="" method="POST" onsubmit="return checkform(this);">

<div id="errmsgbox">

<div id="divError"></div>

</div>

<fieldset class="credentials">
<legend>Access Credentials</legend>

<table border="0">

<tr>
<td><label for="username" class="hover">Username</label></td>
<td><input type="text" id="username" class="required text"/>
<span class="style1">*</span></td>
</tr><tr>
<td><label for="password" class="hover">Password</label></td>
<td><input type="password" id="password" class="required text"/>
<span class="style1">*</span><br />
<span class="tooltip">Minimum four and maximum eight characters</span> </td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="text" id="email" class="required email text"/> <span class="style1">*</span></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Other Information</legend>
<table border="0">

<tr>
<td width="59"><label for="name">Name</label></td>
<td width="207"><input type="text" id="name" class="required text"/>
<span class="style1">*</span></td>
</tr>
<tr><td><label for="phone">Phone</label></td>
<td><input type="text" id="phone" class="phone text"/></td>
</tr>

<tr>
<td colspan="2"><input type="submit" value="Submit Form" class="submit"/></td>
</tr>

<tr>
<td colspan="2">* = Required Field</td>
</tr>
</table>
</fieldset>
</form>



<bottom>
<a href="http://osprey.unisa.ac.za/phorum/read.php?754,183312,183312#msg-183312">Active Participation</a>
</body>
</html>
avatar Re: CSS: Lesson 1: Topic 1A
November 06, 2013 05:14PM
Language: HTML
<!DOCTYPE html> <<<< !Doctype is incomplete <html> <head> <title>|| WELCOME TO CHARLOTTE'S WEBSITE || </title>   <body bgcolor="green"> <<<<< You cannot have the <BODY> within the <HEAD> section - see post above for page structure <p class="standardArrow"><a href="#"><img border="0" src="/images/pic1.jpg" alt="pic1" width="1200" height="300"><img</a></p> <style type="text/css"> <<<<< Put <STYLE> in the <HEAD> section .arrowOver{ background-repeat:no-repeat; background-image:url('images/arrow-over.gif'); color:blue; } </style> <!DOCTYPE html> <<<<<<< You can only have ONE <!Doctype ... >, ONE <HTML> tag, and ONE <HEAD> tag, <html> <<<<<<< Delete these three rows <head> <<<<<<< <style> <<<<<<< What kind of style ? type="tect/css" ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:left; } a { display:block; width:120px; background-color:#dddddd; } </style> </head>


Language: HTML
<body> <<<<< YOU CAN ONLY HAVE ONE <body> tag <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Gallery</a></li> <li><a href="#about">About</a></li> <li><a href="#about">Contact us</a></li> </ul>   </body> <<<<<<<< NO </html> <<<<<<<< NO

Language: HTML
if(err.message) { document.getElementById('divError').innerHTML = err.message; err.field.focus(); return false;   }   return true } </script></head> <<<<< NO ONLY ONE </head>, and the next tag MUST be <body> after </head> <h1>Contact Form that uses JavaScript</h1>


Language: HTML
<bottom> <<<<<<< No such tag <a href="[osprey.unisa.ac.za] Participation</a> </body> </html>

You must structure your page like this -
You cannot have multiple <body> <head> tags all over the place.

Note that <head> is NOT a heading, it defines the structure of a web page, like this -

Quote

<!Doctype . . . .>
<html>
<head>
<title>
"Title goes here"
</title>

JavaScript functions etc goes here

</head>
<body>

Content goes here

</body>
</html>


For <!Doctype> look here -
http://www.w3schools.com/tags/tag_doctype.asp

Use one of the HTML 4.01 versions.

You must get the structure of the page correct -
Look here -

http://www.w3.org/TR/html401/struct/global.html
Re: CSS: Lesson 1: Topic 1A
November 08, 2013 07:43AM
have a look now please
<!DOCTYPE index.html "-//W3C//DTD HTML 1.0 Transitional//EN" "[www.w3.org];
<html>
<head>
<title>|| WELCOME TO CHARLOTTE'S WEBSITE || </title>

<p class="standardArrow"><a href="#"><img border="0" src="/images/pic1.jpg" alt="pic1" width="1200" height="300"><img</a></p>
<style type="text/css">
.arrowOver{
background-repeat:no-repeat;
background-image:url('images/arrow-over.gif');
color:blue; }
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:120px;
background-color:#dddddd;
}
</style>
</head>

<body>
<body bgcolor="green">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Gallery</a></li>
<li><a href="#about">About</a></li>
<li><a href="#about">Contact us</a></li>
</ul>


<div class="logo">
<table width="100%">
<tr>
<td></td>
</tr>
</table>
</div>
<div class="nevigation">
<table cellpadding="0" cellspacing="0" border="0px">
<Contact Form>
<link href="formstyle.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
.myNewStyle {

font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold;

color: #FF0000;

}

.my2ndNewStyle {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

color: #FF0000;

}

.my3rdNewStyle {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

font-size: 12pt;

color: #FF0000;

}

function checkform(pform1){
var str=pform1.password.value;
var email = pform1.email.value;
var phone = pform1.phone.value;
var cleanstr = phone.replace(/[\(\)\.\-\ ]/g, '');
var err={};
var validemail =/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

//check required fields
//password should be minimum 4 chars but not greater than 8
if ((str.length < 4) || (str.length > 8)) {

err.message="Invalid password length";
err.field=pform1.password;
}

//validate email
if(!(validemail.test(email))){
err.message="Invalid email";
err.field=pform1.email;
}

//check phone number
if (isNaN(parseInt(cleanstr))) {
err.message="Invalid phone number";
err.field=pform1.phone;
}

if(err.message)
{
document.getElementById('divError').innerHTML = err.message;
err.field.focus();
return false;

}

return true
}
</script>
<h1>Contact Form that uses JavaScript</h1>

<form action="" method="POST" onsubmit="return checkform(this);">

<div id="errmsgbox">

<div id="divError"></div>

</div>

<fieldset class="credentials">
<legend>Access Credentials</legend>

<table border="0">

<tr>
<td><label for="username" class="hover">Username</label></td>
<td><input type="text" id="username" class="required text"/>
<span class="style1">*</span></td>
</tr><tr>
<td><label for="password" class="hover">Password</label></td>
<td><input type="password" id="password" class="required text"/>
<span class="style1">*</span><br />
<span class="tooltip">Minimum four and maximum eight characters</span> </td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="text" id="email" class="required email text"/> <span class="style1">*</span></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Other Information</legend>
<table border="0">

<tr>
<td width="59"><label for="name">Name</label></td>
<td width="207"><input type="text" id="name" class="required text"/>
<span class="style1">*</span></td>
</tr>
<tr><td><label for="phone">Phone</label></td>
<td><input type="text" id="phone" class="phone text"/></td>
</tr>

<tr>
<td colspan="2"><input type="submit" value="Submit Form" class="submit"/></td>
</tr>

<tr>
<td colspan="2">* = Required Field</td>
</tr>
</table>
</fieldset>
</form>



<a href="http://osprey.unisa.ac.za/phorum/read.php?754,183312,183312#msg-183312">Active Participation</a>
</body>
</html>
avatar Re: CSS: Lesson 1: Topic 1A
November 08, 2013 08:34AM
Getting there ...

You cannot have 2 <body> tags - delete the first one.

Language: HTML
<body> <body bgcolor="green">

You don't need both of these - they mean the same thing. Delete "language=javascript ", it is obsolete.
Language: HTML
<script language="javascript" type="text/javascript">

Also, put your CSS <style> and JavaScript functions in the <head> section, not in the <body>. It makes the code much easier to read.
The <body> section should, as far as possible, only include the code that is actually displayed.

Why are you using a stylesheet, and then defining your CSS in the body ?
If you are going to use a stylesheet, then put all the CSS definitions in there.
Language: HTML
<link href="formstyle.css" rel="stylesheet" type="text/css" /> <script language="javascript" type="text/javascript">

You are missing a closing > on the <!Doctype ...> declaration -
Language: HTML
<!DOCTYPE index.html "-//W3C//DTD HTML 1.0 Transitional//EN" "[www.w3.org];

This should be in the <body> section, not in the <head>
Language: HTML
<p class="standardArrow"><a href="#"><img border="0" src="/images/pic1.jpg" alt="pic1" width="1200" height="300"><img</a></p>
Re: CSS: Lesson 1: Topic 1A
November 08, 2013 11:28AM
what is messing now?i dnt understand why my form is coming on top now,is not bcz i have started with it

<!DOCTYPE index.html "-//W3C//DTD HTML 1.0 Transitional//EN" "[www.w3.org];>
<html>
<head>
<title>|| WELCOME TO CHARLOTTE'S WEBSITE || </title>
<style type="text/css">
.arrowOver{
background-repeat:no-repeat;
background-image:url('images/arrow-over.gif');
color:blue; }
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:120px;
background-color:#dddddd;
}
</style>
</head>

<div class="logo">
<table width="100%">
<tr>
<td></td>
</tr>
</table>
</div>
<div class="nevigation">
<table cellpadding="0" cellspacing="0" border="0px">
<Contact Form>
<link href="formstyle.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
.myNewStyle {

font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold;

color: #FF0000;

}

.my2ndNewStyle {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

color: #FF0000;

}

.my3rdNewStyle {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

font-size: 12pt;

color: #FF0000;

}

function checkform(pform1){
var str=pform1.password.value;
var email = pform1.email.value;
var phone = pform1.phone.value;
var cleanstr = phone.replace(/[\(\)\.\-\ ]/g, '');
var err={};
var validemail =/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

//check required fields
//password should be minimum 4 chars but not greater than 8
if ((str.length < 4) || (str.length > 8)) {

err.message="Invalid password length";
err.field=pform1.password;
}

//validate email
if(!(validemail.test(email))){
err.message="Invalid email";
err.field=pform1.email;
}

//check phone number
if (isNaN(parseInt(cleanstr))) {
err.message="Invalid phone number";
err.field=pform1.phone;
}

if(err.message)
{
document.getElementById('divError').innerHTML = err.message;
err.field.focus();
return false;

}

return true
}
</script>
<h1>Contact Form that uses JavaScript</h1>

<form action="" method="POST" onsubmit="return checkform(this);">

<div id="errmsgbox">

<div id="divError"></div>

</div>

<fieldset class="credentials">
<legend>Access Credentials</legend>

<table border="0">

<tr>
<td><label for="username" class="hover">Username</label></td>
<td><input type="text" id="username" class="required text"/>
<span class="style1">*</span></td>
</tr><tr>
<td><label for="password" class="hover">Password</label></td>
<td><input type="password" id="password" class="required text"/>
<span class="style1">*</span><br />
<span class="tooltip">Minimum four and maximum eight characters</span> </td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="text" id="email" class="required email text"/> <span class="style1">*</span></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Other Information</legend>
<table border="0">

<tr>
<td width="59"><label for="name">Name</label></td>
<td width="207"><input type="text" id="name" class="required text"/>
<span class="style1">*</span></td>
</tr>
<tr><td><label for="phone">Phone</label></td>
<td><input type="text" id="phone" class="phone text"/></td>
</tr>

<tr>
<td colspan="2"><input type="submit" value="Submit Form" class="submit"/></td>
</tr>

<tr>
<td colspan="2">* = Required Field</td>
</tr>
</table>
</fieldset>
</form>

</style>
</head>




<body bgcolor="green">
<ul>
<li><a href="#home">Home</a></li><li><a href="#news">News</a></li>
<li><a href="#contact">Gallery</a></li>
<li><a href="#about">About</a></li>
<li><a href="#about">Contact us</a></li>
</ul>
<p class="standardArrow"><a href="#"><img border="0" src="/images/pic1.jpg" alt="pic1" width="1200" height="300"><img</a></p>

<a href="http://osprey.unisa.ac.za/phorum/read.php?754,183312,183312#msg-183312">Active Participation</a>
</body>
</html>
avatar Re: CSS: Lesson 1: Topic 1A
November 08, 2013 11:55AM
78175232 Wrote:
-------------------------------------------------------
> what is messing now?i dnt understand why my form
> is coming on top now,is not bcz i have started
> with it
>
>
Language: HTML
<!DOCTYPE index.html "-//W3C//DTD HTML 1.0 > Transitional//EN" "[www.w3.org];> > <html> > <head> > <title>|| WELCOME TO CHARLOTTE'S WEBSITE || > </title> > <style type="text/css"> > .arrowOver{ > background-repeat:no-repeat; > background-image:url('images/arrow-over.gif'); > color:blue; } > ul > { > list-style-type:none; > margin:0; > padding:0; > overflow:hidden; > } > li > { > float:left; > } > a > { > display:block; > width:120px; > background-color:#dddddd; > } > </style> > </head> > <<<<<< Must have <body> after </head> > <div class="logo"> > <table width="100%"> > <tr> > <td></td> > </tr> > </table> > </div> > <div class="nevigation"> <<<<< Spelling ? > <table cellpadding="0" cellspacing="0" > border="0px"> > <Contact Form> <<<<< What is this ??? Delete it > <link href="formstyle.css" rel="stylesheet" <<<<<< Put this in the <head> section > type="text/css" /> > <script language="javascript" <<<<<< And all of this > type="text/javascript"> > .myNewStyle { > > font-family: Verdana, Arial, Helvetica, > sans-serif; font-weight: bold; > > color: #FF0000; > > } > > .my2ndNewStyle { > > font-family: Verdana, Arial, Helvetica, > sans-serif; > > font-weight: bold; > > color: #FF0000; > > } > > .my3rdNewStyle { > > font-family: Verdana, Arial, Helvetica, > sans-serif; > > font-weight: bold; > > font-size: 12pt; > > color: #FF0000; > > } > > function checkform(pform1){ > var str=pform1.password.value; > var email = pform1.email.value; > var phone = pform1.phone.value; > var cleanstr = phone.replace(/[\(\)\.\-\ ]/g, > ''); > var err={}; > var validemail > =/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/ > ; > > //check required fields > //password should be minimum 4 chars but not > greater than 8 > if ((str.length < 4) || (str.length > 8)) { > > err.message="Invalid password length"; > err.field=pform1.password; > } > > //validate email > if(!(validemail.test(email))){ > err.message="Invalid email"; > err.field=pform1.email; > } > > //check phone number > if (isNaN(parseInt(cleanstr))) { > err.message="Invalid phone number"; > err.field=pform1.phone; > } > > if(err.message) > { > document.getElementById('divError').innerHTML = > err.message; > err.field.focus(); > return false; > > } > > return true > } > </script> > <h1>Contact Form that uses JavaScript</h1> > > <form action="" method="POST" onsubmit="return > checkform(this);"> > > <div id="errmsgbox"> > > <div id="divError"></div> > > </div> > > <fieldset class="credentials"> > <legend>Access Credentials</legend> > > <table border="0"> > > <tr> > <td><label for="username" > class="hover">Username</label></td> > <td><input type="text" id="username" > class="required text"/> > <span class="style1">*</span></td> > </tr><tr> > <td><label for="password" > class="hover">Password</label></td> > <td><input type="password" id="password" > class="required text"/> > <span class="style1">*</span><br /> > <span class="tooltip">Minimum four and maximum > eight characters</span> </td> > </tr> > <tr> > <td><label for="email">Email</label></td> > <td><input type="text" id="email" class="required > email text"/> <span class="style1">*</span></td> > </tr> > </table> > </fieldset> > <fieldset> > <legend>Other Information</legend> > <table border="0"> > > <tr> > <td width="59"><label > for="name">Name</label></td> > <td width="207"><input type="text" id="name" > class="required text"/> > <span class="style1">*</span></td> > </tr> > <tr><td><label for="phone">Phone</label></td> > <td><input type="text" id="phone" class="phone > text"/></td> > </tr> > > <tr> > <td colspan="2"><input type="submit" value="Submit > Form" class="submit"/></td> > </tr> > > <tr> > <td colspan="2">* = Required Field</td> > </tr> > </table> > </fieldset> > </form> > > </style> > </head> <<<<< Cant go here - Your form etc must be in the <body> section, NOT in the <head> > > > > > <body bgcolor="green"> <<<< Your form is above this, that is why it displays first > <ul> > <li><a href="#home">Home</a></li><li><a > href="#news">News</a></li> > <li><a href="#contact">Gallery</a></li> > <li><a href="#about">About</a></li> > <li><a href="#about">Contact us</a></li> > </ul> > <p class="standardArrow"><a href="#"><img > border="0" src="/images/pic1.jpg" alt="pic1" > width="1200" height="300"><img</a></p> > <<<< Put the form here ? > <a > href="http://osprey.unisa.ac.za/phorum/read.php?75 > 4,183312,183312#msg-183312">Active > Participation</a> > </body> > </html>


You MUST get the structure of your page correct.

<!Doctype .... >
<html>
<head>
<title>Your Title</title>
Javascript functions, CSS, Stylesheet links etc
</head>
<body>
Content goes here - ie: the stuff that you want to display on your page
</body>
</html>

Only ONE <html> <head> <body> tag each (With the closing tags </head> </body> </html> )
Re: CSS: Lesson 1: Topic 1A
November 08, 2013 05:41PM
am i getting there?......please also help me how to put some other information at the right and center so that my page can be full

<!DOCTYPE index.html "-//W3C//DTD HTML 1.0 Transitional//EN" "[www.w3.org];>
<html>
<head>
<title>|| WELCOME TO CHARLOTTE'S WEBSITE || </title>
<style type="text/css">
.arrowOver{
background-repeat:no-repeat;
background-image:url('images/arrow-over.gif');
color:blue; }

ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:120px;
}
</style>
</head>

<body bgcolor="green">

<ul>
<li><a href="#home">Home</a></li><li><a href="#news">News</a></li>
<li><a href="#contact">Gallery</a></li>
<li><a href="#about">About</a></li>
<li><a href="#about">Contact us</a></li>
</ul>
<p class="standardArrow"><a href="#"><img border="0" src="/images/pic1.jpg" alt="pic1" width="1200" height="300"><img</a></p>

<div class="logo">
<table width="100%">
<tr>
<td></td>
</tr>
</table>
</div>
<div class="nevigation">
<table cellpadding="0" cellspacing="0" border="0px">
<link href="formstyle.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
.myNewStyle {

font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold;

color: #FF0000;

}

.my2ndNewStyle {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

color: #FF0000;

}

.my3rdNewStyle {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

font-size: 12pt;

color: #FF0000;

}

function checkform(pform1){
var str=pform1.password.value;
var email = pform1.email.value;
var phone = pform1.phone.value;
var cleanstr = phone.replace(/[\(\)\.\-\ ]/g, '');
var err={};
var validemail =/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

//check required fields
//password should be minimum 4 chars but not greater than 8
if ((str.length < 4) || (str.length > 8)) {

err.message="Invalid password length";
err.field=pform1.password;
}

//validate email
if(!(validemail.test(email))){
err.message="Invalid email";
err.field=pform1.email;
}

//check phone number
if (isNaN(parseInt(cleanstr))) {
err.message="Invalid phone number";
err.field=pform1.phone;
}

if(err.message)
{
document.getElementById('divError').innerHTML = err.message;
err.field.focus();
return false;

}

return true
}

</script>
<h1>Contact Form </h1>
<form action="" method="POST" onsubmit="return checkform(this);">
<div id="errmsgbox">
<div id="divError"></div>
</div>
<fieldset class="credentials">
<legend>Access Credentials</legend>
<table border="0">
<tr>
<td><label for="username" class="hover">Username</label></td>
<td><input type="text" id="username" class="required text"/>
<span class="style1">*</span></td>
</tr><tr>
<td><label for="password" class="hover">Password</label></td>
<td><input type="password" id="password" class="required text"/>
<span class="style1">*</span><br />
<span class="tooltip">Minimum four and maximum eight characters</span> </td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="text" id="email" class="required email text"/> <span class="style1">*</span></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Other Information</legend>
<table border="0">

<tr>
<td width="59"><label for="name">Name</label></td>
<td width="207"><input type="text" id="name" class="required text"/>
<span class="style1">*</span></td>
</tr>
<tr><td><label for="phone">Phone</label></td>
<td><input type="text" id="phone" class="phone text"/></td>
</tr>

<tr>
<td colspan="2"><input type="submit" value="Submit Form" class="submit"/></td>
</tr>

<tr>
<td colspan="2">* = Required Field</td>
</tr>
</table>
</fieldset>
</form>
<a href="http://osprey.unisa.ac.za/phorum/read.php?754,183312,183312#msg-183312">Active Participation</a>
<address>
Visit us at:http://charlotte.freevar.com/html
Tzaneen,Agatha street no 10
P.O.Box 1486, Tzaneen 0850 Limpopo Province <br>
</address>

</body>
</html>
avatar Re: CSS: Lesson 1: Topic 1A
November 08, 2013 07:50PM
Put all of this in the <head> section, NOT in the <body> section -
If you are using a stylesheet, why don't you put all the CSS into the stylesheet ?

Language: HTML
<link href="formstyle.css" rel="stylesheet" type="text/css" /> <script language="javascript" type="text/javascript"> <<<<< Delete language="javascript" . It means the same as type="javascript" .myNewStyle {   font-family: Verdana, Arial, Helvetica, sans-serif; font- -eight: bold; <<<< Should be font-weight:   color: #FF0000;   }   .my2ndNewStyle {   font-family: Verdana, Arial, Helvetica, sans-serif;   font-weight: bold;   color: #FF0000;   }   .my3rdNewStyle {   font-family: Verdana, Arial, Helvetica, sans-serif;   font-weight: bold;   font-size: 12pt;   color: #FF0000;   }   function checkform(pform1){ var str=pform1.password.value; var email = pform1.email.value; var phone = pform1.phone.value; var cleanstr = phone.replace(/[\(\)\.\-\ ]/g, ''); var err={}; var validemail =/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;   //check required fields //password should be minimum 4 chars but not greater than 8 if ((str.length < 4) || (str.length > 8)) {   err.message="Invalid password length"; err.field=pform1.password; }   //validate email if(!(validemail.test(email))){ err.message="Invalid email"; err.field=pform1.email; }   //check phone number if (isNaN(parseInt(cleanstr))) { err.message="Invalid phone number"; err.field=pform1.phone; }   if(err.message) { document.getElementById('divError').innerHTML = err.message; err.field.focus(); return false;   }   return true }   </script>


To align a table in the centre, add align="center" to the <table> tag. (Note American spelling)

Language: HTML
<table border="0" align="center">

Also, suggest you make the table width less than 100%.
Re: CSS: Lesson 1: Topic 1A
November 09, 2013 12:27PM
i have been trying to fill my page with table and some content but it stays on the left (vertical)along with the contact form. my center part is empty, even if i align it center it stays on the left ..please help...... now is like this
<!DOCTYPE index.html "-//W3C//DTD HTML 1.0 Transitional//EN" "[www.w3.org];>
<html>
<head>
<title>|| WELCOME TO CHARLOTTE'S WEBSITE || </title>
<style type="text/css">
.arrowOver{
background-repeat:no-repeat;
background-image:url('images/arrow-over.gif');
color:blue; }

ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:120px;
}
<link href="formstyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
.myNewStyle {

font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold;

color: #FF0000;

}

.my2ndNewStyle {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

color: #FF0000;

}

.my3rdNewStyle {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

font-size: 12pt;

color: #FF0000;

}

function checkform(pform1){
var str=pform1.password.value;
var email = pform1.email.value;
var phone = pform1.phone.value;
var cleanstr = phone.replace(/[\(\)\.\-\ ]/g, '');
var err={};
var validemail =/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

//check required fields
//password should be minimum 4 chars but not greater than 8
if ((str.length < 4) || (str.length > 8)) {

err.message="Invalid password length";
err.field=pform1.password;
}

//validate email
if(!(validemail.test(email))){
err.message="Invalid email";
err.field=pform1.email;
}

//check phone number
if (isNaN(parseInt(cleanstr))) {
err.message="Invalid phone number";
err.field=pform1.phone;
}

if(err.message)
{
document.getElementById('divError').innerHTML = err.message;
err.field.focus();
return false;

}

return true
}
</script>
</style>
</head>

<body bgcolor="green">

<ul>
<li><a href="#home">Home</a></li><li><a href="#news">News</a></li>
<li><a href="#contact">Gallery</a></li>
<li><a href="#about">About</a></li>
<li><a href="#about">Contact us</a></li>
</ul>
<p class="standardArrow"><a href="#"><img border="0" src="/images/pic1.jpg" alt="pic1" width="1200" height="300"><img</a></p>

<div class="logo">
<table width="100%">
<tr>
<td></td>
</tr>
</table>
</div>
<div class="nevigation">
<table cellpadding="0" cellspacing="0" border="0px">
<h1>Contact Form </h1>
<form action="" method="POST" onsubmit="return checkform(this);">
<div id="errmsgbox">
<div id="divError"></div>
</div>
<fieldset class="credentials">
<legend>Access Credentials</legend>
<table border="0">
<tr>
<td><label for="username" class="hover">Username</label></td>
<td><input type="text" id="username" class="required text"/>
<span class="style1">*</span></td>
</tr><tr>
<td><label for="password" class="hover">Password</label></td>
<td><input type="password" id="password" class="required text"/>
<span class="style1">*</span><br />
<span class="tooltip">Minimum four and maximum eight characters</span> </td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="text" id="email" class="required email text"/> <span class="style1">*</span></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Other Information</legend>
<table border="0">

<tr>
<td width="59"><label for="name">Name</label></td>
<td width="207"><input type="text" id="name" class="required text"/>
<span class="style1">*</span></td>
</tr>
<tr><td><label for="phone">Phone</label></td>
<td><input type="text" id="phone" class="phone text"/></td>
</tr>

<tr>
<td colspan="2"><input type="submit" value="Submit Form" class="submit"/></td>
</tr>

<tr>
<td colspan="2">* = Required Field</td>
</tr>
</table>
</fieldset>
</form>
<a href=http://osprey.unisa.ac.za/phorum/read.php?754,183312,183312#msg-183312> Active Participation</a>
<address>
Visit us atsad smileycharlotte.freevar.com)
Tzaneen,Agatha street no 10
P.O.Box 1486, Tzaneen 0850 Limpopo Province,Tell:015 307 8045 <br>
</address>

</body>
</html>
avatar Re: CSS: Lesson 1: Topic 1A
November 09, 2013 01:41PM
You have unmatched <div> and <table> elements ie missing </div> and </table> tags.

You have declared a table just before your form, but then not put the elements within table cells.

If you indent / layout your code properly, it will be much easier to read, and find the errors.

Another way to center something, is put a <div></div> around it with this CSS -

margin-left: auto;
margin-right: auto;

I have made some corrections to your code, but there are still missing </div> and </table> tags.

Language: HTML
<!DOCTYPE index.html "-//W3C//DTD HTML 1.0 Transitional//EN" "[www.w3.org];> <html> <head> <title>|| WELCOME TO CHARLOTTE'S WEBSITE || </title> <style type="text/css"> .arrowOver{ background-repeat:no-repeat; background-image:url('images/arrow-over.gif'); color:blue; }   ul { list-style-type:none; margin:0; padding:0; overflow:hidden; }   li { float:left; }   a { display:block; width:120px; } </style>   <link href="formstyle.css" rel="stylesheet" type="text/css" />   <script type="text/javascript"> .myNewStyle { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #FF0000; }   .my2ndNewStyle { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #FF0000; }   .my3rdNewStyle { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12pt; color: #FF0000; }   function checkform(pform1){ var str=pform1.password.value; var email = pform1.email.value; var phone = pform1.phone.value; var cleanstr = phone.replace(/[\(\)\.\-\ ]/g, ''); var err={}; var validemail =/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;   //check required fields //password should be minimum 4 chars but not greater than 8 if ((str.length < 4) || (str.length > 8)) { err.message="Invalid password length"; err.field=pform1.password; }   //validate email if(!(validemail.test(email))){ err.message="Invalid email"; err.field=pform1.email; }   //check phone number if (isNaN(parseInt(cleanstr))) { err.message="Invalid phone number"; err.field=pform1.phone; }   if(err.message) { document.getElementById('divError').innerHTML = err.message; err.field.focus(); return false; }   return true } </script>   </head>   <body bgcolor="green">   <ul> <li><a href="#home">Home</a></li><li><a href="#news">News</a></li> <li><a href="#contact">Gallery</a></li> <li><a href="#about">About</a></li> <li><a href="#about">Contact us</a></li> </ul>   <p class="standardArrow"><a href="#"><img border="0" src="/images/pic1.jpg" alt="pic1" width="1200" height="300"><img</a></p>   <div class="logo"> <table width="100%"> // <<< What is this table for ? <tr> <td></td> </tr> </table> </div>   <fieldset class="credentials"> <legend>Access Credentials</legend> <div class="nevigation"> // Where does this <div> end ? <table cellpadding="0" cellspacing="0" border="0px" align="center"> // <<< Where does this table end ? <h1>Contact Form </h1> // <<< These elements are not within table cells <form action="" method="POST" onsubmit="return checkform(this);"> <div id="errmsgbox"> <div id="divError"></div> </div>   <table border="0"> <tr> <td><label for="username" class="hover">Username</label></td> <td><input type="text" id="username" class="required text"/> <span class="style1">*</span></td> </tr> <tr> <td><label for="password" class="hover">Password</label></td> <td><input type="password" id="password" class="required text"/> <span class="style1">*</span><br /> <span class="tooltip">Minimum four and maximum eight characters</span> </td> </tr> <tr> <td><label for="email">Email</label></td> <td><input type="text" id="email" class="required email text"/> <span class="style1">*</span></td> </tr> </table> </fieldset>     <fieldset> <legend>Other Information</legend> <table border="0"> <tr> <td width="59"><label for="name">Name</label></td> <td width="207"><input type="text" id="name" class="required text"/> <span class="style1">*</span></td> </tr> <tr><td><label for="phone">Phone</label></td> <td><input type="text" id="phone" class="phone text"/></td> </tr>   <tr> <td colspan="2"><input type="submit" value="Submit Form" class="submit"/></td> </tr>   <tr> <td colspan="2">* = Required Field</td> </tr> </table> </fieldset> </form>   <a href=http://osprey.unisa.ac.za/phorum/read.php?754,183312,183312#msg-183312> Active Participation</a>   <address> Visit us atsad smileycharlotte.freevar.com) Tzaneen,Agatha street no 10 P.O.Box 1486, Tzaneen 0850 Limpopo Province,Tell:015 307 8045 <br> </address>   </body> </html>
Re: CSS: Lesson 1: Topic 1A
November 09, 2013 02:07PM
thank you
Sorry, only registered users may post in this forum.

Click here to login