Re: CSS: Lesson 1: Topic 1A

Announcements	Last Post
	SoC Curricula	09/30/2017 01:08PM
	Demarcation or scoping of examinations and assessment	02/13/2017 07:59AM
	School of Computing Short Learning Programmes	11/24/2014 08:37AM
	Unisa contact information	07/28/2011 01:28PM

78175232

Re: CSS: Lesson 1: Topic 1A
October 19, 2013 11:20AM

Registered: 10 years ago
Posts: 31
Rating: 0

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, '' winking smiley

;
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' winking smiley

.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>

Reply Quote

bigron11

Re: CSS: Lesson 1: Topic 1A
October 19, 2013 12:12PM

Admin
Registered: 11 years ago
Posts: 6,606
Rating: 396

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 !

Reply Quote

78175232

Re: CSS: Lesson 1: Topic 1A
October 20, 2013 09:37AM

Registered: 10 years ago
Posts: 31
Rating: 0

im done with my form but im failing to create a menu with a roll over images

Reply Quote

bigron11

Re: CSS: Lesson 1: Topic 1A
October 20, 2013 09:56AM

Admin
Registered: 11 years ago
Posts: 6,606
Rating: 396

You need to use JavaScript -

onmouseover, onmouseout

Look here -

http://www.w3schools.com/jsref/event_onmouseover.asp

http://www.w3schools.com/jsref/event_onmouseout.asp

http://www.dhtmlgoodies.com/tutorials/javascript-rollovers/

Reply Quote

78175232

Re: CSS: Lesson 1: Topic 1A
November 04, 2013 04:48PM

Registered: 10 years ago
Posts: 31
Rating: 0

THANK YOU VERY MUCH I THINK I GOT IT RIGHT NOW

Reply Quote

78175232

Re: CSS: Lesson 1: Topic 1A
November 05, 2013 10:17AM

Registered: 10 years ago
Posts: 31
Rating: 0

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' winking smiley

;
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, '' winking smiley

;
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' winking smiley

.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>

Reply Quote

Mac

Re: CSS: Lesson 1: Topic 1A
November 05, 2013 10:30AM

Admin
Registered: 18 years ago
Posts: 10,001
Rating: 353

I do not understand what the first marker did not understand... ? What was the message? This is the contact form....?

Reply Quote

78175232

Re: CSS: Lesson 1: Topic 1A
November 05, 2013 11:49AM

Registered: 10 years ago
Posts: 31
Rating: 0

you can open my website and see what im talking about. http://charlotte.freevar.com/html

Reply Quote

78175232

Re: CSS: Lesson 1: Topic 1A
November 05, 2013 12:09PM

Registered: 10 years ago
Posts: 31
Rating: 0

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

Reply Quote

78175232

Re: CSS: Lesson 1: Topic 1A
November 05, 2013 12:37PM

Registered: 10 years ago
Posts: 31
Rating: 0

please guys assist i dnt know what is the correct, i want to submit my assignment

Reply Quote

bigron11

Re: CSS: Lesson 1: Topic 1A
November 05, 2013 02:19PM

Admin
Registered: 11 years ago
Posts: 6,606
Rating: 396

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>

Reply Quote

bigron11

Re: CSS: Lesson 1: Topic 1A
November 05, 2013 03:08PM

Admin
Registered: 11 years ago
Posts: 6,606
Rating: 396

The landing page does not seem to be index.html.

Do you have a file named index.html in your project directory ?

Reply Quote

78175232

Re: CSS: Lesson 1: Topic 1A
November 05, 2013 04:26PM

Registered: 10 years ago
Posts: 31
Rating: 0

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' winking smiley

;
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, '' winking smiley

;
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' winking smiley

.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>

Reply Quote

78175232

Re: CSS: Lesson 1: Topic 1A
November 05, 2013 04:27PM

Registered: 10 years ago
Posts: 31
Rating: 0

yes i do have a file name index html

Reply Quote

78175232

Re: CSS: Lesson 1: Topic 1A
November 05, 2013 04:42PM

Registered: 10 years ago
Posts: 31
Rating: 0

i have submitted it this way .now i really don't understand if they are saying is not correct sad 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' winking smiley

;
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, '' winking smiley

;
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' winking smiley

.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>

Reply Quote

bigron11

Re: CSS: Lesson 1: Topic 1A
November 05, 2013 04:44PM

Admin
Registered: 11 years ago
Posts: 6,606
Rating: 396

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

Reply Quote

bigron11

Re: CSS: Lesson 1: Topic 1A
November 05, 2013 05:00PM

Admin
Registered: 11 years ago
Posts: 6,606
Rating: 396

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>

Reply Quote

78175232

Re: CSS: Lesson 1: Topic 1A
November 06, 2013 09:23AM

Registered: 10 years ago
Posts: 31
Rating: 0

morning
can you please show me how to put my rollover menu horizontal

Reply Quote

bigron11

Re: CSS: Lesson 1: Topic 1A
November 06, 2013 10:14AM

Admin
Registered: 11 years ago
Posts: 6,606
Rating: 396

Look here -

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

You need to use CSS, and <ul> <li> instead of <p>

Reply Quote

78175232

Re: CSS: Lesson 1: Topic 1A
November 06, 2013 03:35PM

Registered: 10 years ago
Posts: 31
Rating: 0

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' winking smiley

;
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, '' winking smiley

;
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' winking smiley

.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>

Reply Quote

bigron11

Re: CSS: Lesson 1: Topic 1A
November 06, 2013 05:14PM

Admin
Registered: 11 years ago
Posts: 6,606
Rating: 396

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: HTMLif(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

Reply Quote

78175232

Re: CSS: Lesson 1: Topic 1A
November 08, 2013 07:43AM

Registered: 10 years ago
Posts: 31
Rating: 0

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' winking smiley

;
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, '' winking smiley

;
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' winking smiley

.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>

Reply Quote

bigron11

Re: CSS: Lesson 1: Topic 1A
November 08, 2013 08:34AM

Admin
Registered: 11 years ago
Posts: 6,606
Rating: 396

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>

Reply Quote

78175232

Re: CSS: Lesson 1: Topic 1A
November 08, 2013 11:28AM

Registered: 10 years ago
Posts: 31
Rating: 0

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' winking smiley

;
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, '' winking smiley

;
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' winking smiley

.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>

Reply Quote

bigron11

Re: CSS: Lesson 1: Topic 1A
November 08, 2013 11:55AM

Admin
Registered: 11 years ago
Posts: 6,606
Rating: 396

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> )

Reply Quote

78175232

Re: CSS: Lesson 1: Topic 1A
November 08, 2013 05:41PM

Registered: 10 years ago
Posts: 31
Rating: 0

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' winking smiley

;
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, '' winking smiley

;
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' winking smiley

.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>

Reply Quote

bigron11

Re: CSS: Lesson 1: Topic 1A
November 08, 2013 07:50PM

Admin
Registered: 11 years ago
Posts: 6,606
Rating: 396

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%.

Reply Quote

78175232

Re: CSS: Lesson 1: Topic 1A
November 09, 2013 12:27PM

Registered: 10 years ago
Posts: 31
Rating: 0

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' winking smiley

;
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, '' winking smiley

;
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' winking smiley

.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 at sad smiley

charlotte.freevar.com)
Tzaneen,Agatha street no 10
P.O.Box 1486, Tzaneen 0850 Limpopo Province,Tell:015 307 8045 <br>
</address>

</body>
</html>

Reply Quote

bigron11

Re: CSS: Lesson 1: Topic 1A
November 09, 2013 01:41PM

Admin
Registered: 11 years ago
Posts: 6,606
Rating: 396

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>

Reply Quote

78175232

Re: CSS: Lesson 1: Topic 1A
November 09, 2013 02:07PM

Registered: 10 years ago
Posts: 31
Rating: 0

thank you

Reply Quote