ShadowMage Posted August 15, 2012 Share Posted August 15, 2012 Ok, well, the code in your second post at least looks valid so we'll use that if it does what you want (with the exception of the border). I'd recommend changing the doctype to at least transitional (though I strongly recommend strict). See here for a list of available doctypes. In the head, there is a <link> tag with a reference to a file named style.css. Do you have access to this file? If so, search the file to see if there is an entry for the body tag. It should look something like this:body {/* stuff here */} There may or may not be other tag names in front of it. If you can't find such an entry, add it. Once the entry is there, add the following between the { and } brackets:border: 5px solid #00FF00; If you do not have access to style.css you'll need to add an inline stylesheet. Somewhere between the <head> and </head> tags (but not inside any other tags) add the following:<style type='text/css'></style> Now between those two tags, add the entry I showed you above. Link to comment Share on other sites More sharing options...
ShadowMage Posted August 15, 2012 Share Posted August 15, 2012 FWIW, the main problems with the code in post 24 are misplaced tags. For example, style, link, and meta tags must be in the head. You have an extra closing head tag. Content elements (such as p, h1-6, span, div, etc.) cannot be in the head and must be placed in the body. There's no closing form tag. Stuff like that. Link to comment Share on other sites More sharing options...
Jonnym53 Posted August 27, 2012 Author Share Posted August 27, 2012 Hi again. Sorry I've not been back on here for a while, I wish I could clone myself so I could get more done!Your last post, you speak about post 24, do you mean line 24 in the code I posted earlier?You say I have an extra closing head tag, where? (without trawling through each line of code I am note sure where it is). One of my fears is removing some code which then stops the web page either displaying properly or functioning properly.If you allow the code to show as a page, you will see there are a number of green lines across the page. I want to remove these, so the page is in effect all white, change the text to something like my original code post and add a green double border around the whole lot with rounded corners, so it frames the page, oh and the signup box in the middle needs to be green as well.Surely, with your help and guidance (and patience?) we can design such a page using the above code as a starting point?Hope you can help.ThanksJohn. Link to comment Share on other sites More sharing options...
ShadowMage Posted August 27, 2012 Share Posted August 27, 2012 By post 24, I mean this post. In the upper right corner of each post there is a number. If you look at the post I linked you'll see it's post #24. The extra closing head tag is on line 15 (the other one is on line 74). However, you have an extra body tag and a bunch of other content tags (h1, h2, etc.) between those two head tags as well as a bunch of meta tags. The meta tags belong in the head, the content tags do not. Did you look at my suggestions in post 26? The code in post 25 looks valid so if you want to work through this, let's start over using that code and we can take it one step at a time making the changes you need to make. This will be far easier than trying to fix all the errors from the code in post 24. Link to comment Share on other sites More sharing options...
Jonnym53 Posted August 29, 2012 Author Share Posted August 29, 2012 Ok Thanks. The text in post 24 is what I need to use as it's what I was working on. I also need to keep the signup form (and the redirect URL) intact as well as in post 24.So what's the 1st step I need to do. I'm using NVU as an editor, is this OK?? Let me know what I need to do, step by step please.ThanksJohn. Link to comment Share on other sites More sharing options...
ShadowMage Posted August 29, 2012 Share Posted August 29, 2012 Well, if you insist on using post 24 as your base the first thing you'll need to do is straighten out the head tag. There's a lot of funk there:- Get the <meta> and <title> tags on lines 10 - 12 out of the <style> tag.- Remove the empty <title> tag on line 14.- Remove the closing </head> tag on line 15.- Remove the extra <body> tag on line 16. If you need the styles from it, move those to the other <body> tag (line 75).- Move the content tags on lines 17 - 30 to the body (should be an h1 and an h2).- Add a closing </script> tag to the <script> starting on line 31. When you get those done, repost your code. Link to comment Share on other sites More sharing options...
Jonnym53 Posted August 30, 2012 Author Share Posted August 30, 2012 Hi Sorry to confuse but I think you preferred to start with the code in post 25? ( I don't want to mess things around but would think a clean code would be better to work with?)What I was getting at is I wanted to have the capture box as in post 24 (green background not plain white) The text I had in the post 24 code (if you notice the code in post 25 has none to speak of) and I need the re direct URL to be in there so when someone ads their details in the capture form and clicks the button they get re directed to the website I want them to see. That's why I wrote about post 24.So long as we get the page looking as I want in the end I'm not fussy which code I start with. I want to make it as easy for you to guide me as possble, if that's OK with you.ThanksJohn. Link to comment Share on other sites More sharing options...
ShadowMage Posted August 30, 2012 Share Posted August 30, 2012 Sorry, I misunderstood your last post. Ok, using the code from post 25, we can start by deleting the div on lines 13 - 21. You don't need it. You can also remove the links to the JS and CSS on lines 7 - 10. You'll be creating your own styles and functions and linking to them instead. Then, let's focus on modifying the form. Don't worry about styling it yet, just get the structure. The form starts on line 56 and goes to line 86. Add another row to the table nested within it.FWIW, though, you still should go through the tutorials and recreate this page. Even with the code in post 25, there are a number of things that are not considered best practice or recommended. For example, the use of tables to layout the page. Even though it isn't technically "wrong" or "invalid" it is still not considered best practice and thus not recommended. I am only stepping you through this to get a "working" page, and to give you a little practice with CSS and HTML. Link to comment Share on other sites More sharing options...
Jonnym53 Posted August 31, 2012 Author Share Posted August 31, 2012 Ok, Thanks. I've taken the details you wrote about and will implement then I'll add the code to a post on here.I am trying to read through the tutorials on both HTML and CSS and have, in the past, coded a bit of HTML so I'm not totally in the dark with regard to what to do. It's just the more complicated stuff that I need to get used to that enables me to build pages that function.I have to admit, as well, that when I get the time to read through the tutorials it's after a full days work and I'm tired, plus I have trouble remembering what I read the previous evening as my head is buried in planning and SAP all day at work so it makes me not as fresh as I'd like.I'll do my best anyhow so thanks for your offered assistance.Be back soonJohn. Link to comment Share on other sites More sharing options...
Jonnym53 Posted September 4, 2012 Author Share Posted September 4, 2012 Ok. So I took your instructions and did as you suggested. The bit about adding another row to the table nested within between lines 56-86. I hope you mean add <tr>Anyway, the code is below:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Internet propulsion</title></head><body>rel="stylesheet" type="text/css"><script =""></script><h1 align="center"><b>InternetPropulsion</b></h1><hr><script language="javascript">function validateForm(frm){var name=frm.name.value;var email=frm.email.value;if(name==''){alert("Please enter name");return false;}if(!checkMail(email)){return false;}frm.submit();}</script><h2 align="center">Fillthe form to sign up</h2><form method="post" action="http://www.yourfuture2012.co.uk/future/register.php?list_id=1"> <table align="center" cellpadding="10"> <tbody> <tr> <th colspan="2">Pleasefill the form below:</th> </tr> <tr> <td width="100">YourName:</td> <td width="300"><input name="name" size="30" type="text"></td> </tr> <tr> </tr> <tr> <td width="100">YourEmail:</td> <td width="300"><input name="email" size="30" type="text"></td> </tr> <tr> <td colspan="2" align="center"><input name="ok" value="1" type="hidden"> <input value="Sign Up" onclick="javascript:validateForm(this.form);" type="button"></td> </tr> </tbody> </table></form><hr><h1 align="center"><b>Thanksfor Visiting</b></h1></body></html> Hope I did as you expected.What's next?ThanksJohn Link to comment Share on other sites More sharing options...
ShadowMage Posted September 5, 2012 Share Posted September 5, 2012 Well, you did add another row. An empty one. What I meant was to add the row and all the content of that row. Ie, the cells (td) and appropriate labels and input boxes. The form we're editing has four rows: one for the header, one for the user's name, one for the user's email, and one for the button. The form we're trying to create has five: header, name, email, country, and button. You need to add the row for the country. You should be able to figure that out without me having to walk through adding each element. It's exactly the same as the name and email rows. Also, you didn't completely remove the CSS and JS references in the head. There are some remnants left on lines 9 and 10. Link to comment Share on other sites More sharing options...
Jonnym53 Posted September 9, 2012 Author Share Posted September 9, 2012 Ok, thanks for the info. Please see code as is now below:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Internet propulsion</title></head><body><h1 align="center"><b>InternetPropulsion</b></h1><hr><script language="javascript">function validateForm(frm){var name=frm.name.value;var email=frm.email.value;if(name==''){alert("Please enter name");return false;}if(!checkMail(email)){return false;}frm.submit();}</script><h2 align="center">Fillthe form to sign up</h2><form method="post" action="http://www.yourfuture2012.co.uk/future/register.php?list_id=1"> <table align="center" cellpadding="10"> <tbody> <tr> <th colspan="2">Pleasefill the form below:</th> </tr> <tr> <td width="100">YourName:</td> <td width="300"><input name="name" size="30" type="text"></td> </tr> <tr> <td width="100">YourEmail:</td> <td width="300"><input name="email" size="30" type="text"></td> </tr> <tr> <td width="100">Country:</td> <td width="300"><input name="email" size="30" type="text"></td> </tr> <tr> <td colspan="2" align="center"><input name="ok" value="1" type="hidden"> <input value="Sign Up" onclick="javascript:validateForm(this.form);" type="button"></td> </tr> </tbody> </table></form><hr><h1 align="center"><b>Thanksfor Visiting</b></h1></body></html>I clearly understood the last instructions.Please can I have the next step.ThanksJohn. Link to comment Share on other sites More sharing options...
ShadowMage Posted September 10, 2012 Share Posted September 10, 2012 Ok, now let's style it. First, add the inline stylesheet (embedded stylesheet) to your page. Place the following between your opening and closing head tags: <style type='text/css'></style> Then start writing the code to style your page. You can add classes and id's to the elements you want to style, or you can just target individual tags. I'd recommend giving a class/id to at least the form. If you don't, and you reuse the stylesheet for other pages, every single form on your site will use the styles you set. If that's what you want, then by all means, use a normal tag selector so you don't repeat code. So...if you want your sign up form to be unique, give it an id: <form method="post" id='signup_form'action="http://www.yourfuture2012.co.uk/future/register.php?list_id=1"> and place the following between the style tags you created earlier: #signup_form { ...styles...} Obviously replacing "...styles..." with whatever styles you want the form to have, such as a border or background. Now, you can use the form to drill down and target the table within it. Using the form to target the table makes the styles unique to that table (since the form has an id and id's must be unique). #signup_form table { ...styles for the table...}#signup_form td { ...styles for cells in the table...} Remember, this code goes between the style tags. If you want to use the same styles for all forms, just replace "#signup_form" with "form" and it will target all forms. You can also leave off the id from the form if you do this. Link to comment Share on other sites More sharing options...
Jonnym53 Posted September 10, 2012 Author Share Posted September 10, 2012 OK, thanks. I'll get onto this and post up once I've done.be back soon.ThanksJohn. Link to comment Share on other sites More sharing options...
Jonnym53 Posted September 20, 2012 Author Share Posted September 20, 2012 OK so I've sort of done something right but I wanted the double green border to go around the whole form, not just around the signup table acrross the middle.Could you explain if I can make the code do this?Here is the code I've done so far. Slow going I know but time is no on my side at the moment:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Internet propulsion</title> <style type="text/css">#myunique_signup_form{Border:5px double green}#myunique_signup_form table{border:2px solid black;background-color:green;}myunique_signup_form td{color-green} </style></head><body><h1 font="Arial" align="center"><b>Findingit Hard to Make a Living On Line?</b></h1><hr><script language="javascript">function validateForm(frm){var name=frm.name.value;var email=frm.email.value;if(name==''){alert("Please enter name");return false;}if(!checkMail(email)){return false;}frm.submit();}</script><h2 align="center">"Learnhow to take the internet by storm in less time then you thoughtpossible"<p></p>Yes, even if you'venever made a penny on line you too can master the secrets to onlineWealth</h2><form method="post" id="myunique_signup_form" action="http://www.yourfuture2012.co.uk/future/register.php?list_id=1"> <table align="center" cellpadding="10"> <tbody> <tr> <th colspan="2">Pleasefill the form below:</th> </tr> <tr> <td width="100">YourName:</td> <td width="300"><input name="name" size="30" type="text"></td> </tr> <tr> <td width="100">YourEmail:</td> <td width="300"><input name="email" size="30" type="text"></td> </tr> <tr> <td width="100">Country:</td> <td width="300"><input name="email" size="30" type="text"></td> </tr> <tr> <td colspan="2" align="center"><input name="ok" value="1" type="hidden"> <input value="Sign Up" onclick="javascript:validateForm(this.form);" type="button"></td> </tr> </tbody> </table></form><hr><h1 align="center"><b>Thanksfor Visiting</b></h1></body></html>Hope you approve.Thanks for nowJohn. Link to comment Share on other sites More sharing options...
Ingolme Posted September 20, 2012 Share Posted September 20, 2012 All you need to do is change the selector to target the form instead of the table. Instead of #myunique_signup_form table just use #myunique_signup_form Link to comment Share on other sites More sharing options...
Jonnym53 Posted September 23, 2012 Author Share Posted September 23, 2012 Sorry. I tried what you advised and it just made the box across the middle solid green. I wanted to keep the small box in the middle solid green and the double lined frame to be all around the outside of the whole form to encompass the text including the "finding it hard to make a living on line?" I am also trying to change the font as I want the h1 text in blue. I tried to follow the teaching in the tutorial but in my workings the font just stays black, I've managed to get it to be a different font but just can't seem to change the color.Baffled???Can you guide me through this bit so I understand?ThanksJohn Link to comment Share on other sites More sharing options...
ShadowMage Posted September 24, 2012 Share Posted September 24, 2012 Sorry. I tried what you advised and it just made the box across the middle solid green. I wanted to keep the small box in the middle solid green and the double lined frame to be all around the outside of the whole form to encompass the text including the "finding it hard to make a living on line?"Ok, this is where the code you were originally given comes in. You have the following code adding the border:#myunique_signup_form{Border:5px double green} This, as you mentioned, adds the border to just the form element. You need to add the border to the body. So just change the selector to target the body.Also, your syntax is wrong for the property. Should be:border: 5px double green;(note the lowercase 'b' and the semicolon at the end) I am also trying to change the font as I want the h1 text in blue. I tried to follow the teaching in the tutorial but in my workings the font just stays black, I've managed to get it to be a different font but just can't seem to change the color.To change the color, set the color:color: blue; Link to comment Share on other sites More sharing options...
Jonnym53 Posted September 24, 2012 Author Share Posted September 24, 2012 Hi. The color. Do I add it to the code inside the h<>? or in the code added inside the <head></head>? I tried adding after font=Arial etc and it did nothing, the font color stayed black when I saved and viewed. Sorry, when things happen that I don't expect or understand I get confused.The border you advised of.What if I wanted to add a border to the body (around the whole form) and keep the border around the table as the form already shows. Do I add another name for a style and code similar to the border?I've looked at the form as it now looks and I'd sort of like to keep the border round the form and the green block as it looks, just add the border around the whole form ans change font colors and then , I'd believe, it will be as I want it. All I need to understand then is how to code so when a person clicks on the button (after entering their details) they are re directed to a thank you type page.Once all this is done I can construct a simple thank you page and upload it to a folder attached to a web site that is already built and on the net.Thanks for your patience and help.RegardsJohn. Link to comment Share on other sites More sharing options...
ShadowMage Posted September 24, 2012 Share Posted September 24, 2012 Hi. The color. Do I add it to the code inside the h<>? or in the code added inside the <head></head>? I tried adding after font=Arial etc and it did nothing, the font color stayed black when I saved and viewed. Sorry, when things happen that I don't expect or understand I get confused.This is where it helps to have gone through the tutorials and understand HTML and CSS. The color gets added to the stylesheet just like the rest of your styles do. You need the selector for the elements you want to change the color of (in this case it's just h1) and then the properties you're changing (in this case, color: blue;) between the {}. The border you advised of.What if I wanted to add a border to the body (around the whole form) and keep the border around the table as the form already shows. Do I add another name for a style and code similar to the border?I've looked at the form as it now looks and I'd sort of like to keep the border round the form and the green block as it looks, just add the border around the whole form ans change font colors and then , I'd believe, it will be as I want it.To add the border to the body and keep the border on the form, yes, you create a new rule for the body, mimicking the one you have for the form except that the selector targets the body instead of the form.If you want the "blocks" in your form, you need to give borders to each td/th element in your table. Changing the font colors of the form is the same as changing it for the h1 (except using different selectors, obviously). All I need to understand then is how to code so when a person clicks on the button (after entering their details) they are re directed to a thank you type page.To submit the form to a new page, just set the action attribute of the form to the URL of the new page. In order to really do anything with the data you submit, though, you'll need to use a server side language like PHP to process it. Link to comment Share on other sites More sharing options...
Jonnym53 Posted September 27, 2012 Author Share Posted September 27, 2012 Ok, so I tried and even though I keep reading through the tutorials I just don't get it. I thought I'd done it right but the border just won't show on the page. So I'm officially thick! or Dumb.Code belowCan you tell me what I'm doing wrong please:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Internet Marketing MadeEasy</title> <style type="text/css">#myunique_signup_form {border:5px double green;border-radius:15px}#myunique_signup_form table {border:2px solid black;background-color:green;border-radius:25px;}#myunique_signup_form body {border:5px double green;}myunique_signup_form td{color-green}h1{color:blue}#signup_body{border:10px double green;border padding:10px;border radius:25px;} </style></head><body><id ="signup_body"></id><h1 font="Arial" align="center"><b>Findingit Hard to Make a Living On Line?</b></h1><hr><script language="javascript">function validateForm(frm){var name=frm.name.value;var email=frm.email.value;if(name==''){alert("Please enter name");return false;}if(!checkMail(email)){return false;}frm.submit();}</script><h2 font="Arial" align="center">"Learnhow to take the internet by storm in less time then you thoughtpossible"<p></p>Yes, even if you'venever made a penny on line, you too can master the secrets to onlineWealth</h2><p class="double" color="green"></p><form method="post" id="myunique_signup_form" action="http://www.yourfuture2012.co.uk/future/register.php?list_id=1"> <table align="center" cellpadding="10"> <tbody> <tr> <th colspan="2">Pleasefill the form below:</th> </tr> <tr> <td width="100">YourName:</td> <td width="300"><input name="name" size="30" type="text"></td> </tr> <tr> <td width="100">YourEmail:</td> <td width="300"><input name="email" size="30" type="text"></td> </tr> <tr> <td width="100">Country:</td> <td width="300"><input name="email" size="30" type="text"></td> </tr> <tr> <td colspan="2" align="center"><input name="ok" value="1" type="hidden"> <input value="Sign Up" onclick="javascript:validateForm(this.form);" type="button"></td> </tr> </tbody> </table></form><hr><h1 font="Verdana" align="center"><b>"YourFortune Awaits"</b></h1></body></html>I tried with out the brackets and the code just showed up top left of the page.ThanksJohn. Link to comment Share on other sites More sharing options...
Jonnym53 Posted September 27, 2012 Author Share Posted September 27, 2012 Also, the redirect I was on about is after the details have been inputted. The action attribute that is currently in the code should stay as that adds the details to my auto responder list.The form I have looked at (which was partly pre built before I altered) has the following code which send the subscriber to another page when they click the button: <form method="post" action="https://app.icontact.com/icp/signup.php" name="icpsignup" id="icpsignup1839" accept-charset="UTF-8" onsubmit="return verifyRequired1839();"><input name="redirect" value="http://my-dogtrainingsecrets.com/articles/how-to-train-your-dog-quickly-and-effectively/" type="hidden"> <input name="errorredirect" value="http://my-dogtrainingsecrets.com/articles/how-to-train-your-dog-quickly-and-effectively/" type="hidden"><input name="listid" value="44525" type="hidden"><input name="specialid:44525" value="CUIP" type="hidden"><input name="clientid" value="871932" type="hidden"><input name="formid" value="3813" type="hidden"> <input name="reallistid" value="1" type="hidden"><input name="doubleopt" value="0" type="hidden"> <table class="signupframe" border="0" cellpadding="5" cellspacing="0" width="260">with all the opening and closing tags before and after, of course.I have this loaded on the net and it works so I guess I should copy to get the same result?Hope you can adviseThanksJohn. Link to comment Share on other sites More sharing options...
Jonnym53 Posted September 27, 2012 Author Share Posted September 27, 2012 Or should I try and master the 'box method' as described in the tutorials?I just tried something else and I have a double border but only at the top of the page, not all around like I'm trying to achieve!I'm getting better though, I think?Code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Internet Marketing MadeEasy</title> <style type="text/css">#myunique_signup_form {border:5px double green;border-radius:15px}#myunique_signup_form table {border:2px solid black;background-color:green;border-radius:25px;}#myunique_signup_form body {border:5px double green;}myunique_signup_form td{color-green}h1{color:blue}#signup_body{border:10px double green;border padding:10px;border radius:25px;} </style></head><body><p id="signup_body"></p><h1 font="Arial" align="center"><b>Findingit Hard to Make a Living On Line?</b></h1><hr><script language="javascript">function validateForm(frm){var name=frm.name.value;var email=frm.email.value;if(name==''){alert("Please enter name");return false;}if(!checkMail(email)){return false;}frm.submit();}</script><h2 font="Arial" align="center">"Learnhow to take the internet by storm in less time then you thoughtpossible"<p></p>Yes, even if you'venever made a penny on line, you too can master the secrets to onlineWealth</h2><p class="double" color="green"></p><form method="post" id="myunique_signup_form" action="http://www.yourfuture2012.co.uk/future/register.php?list_id=1"> <table align="center" cellpadding="10"> <tbody> <tr> <th colspan="2">Pleasefill the form below:</th> </tr> <tr> <td width="100">YourName:</td> <td width="300"><input name="name" size="30" type="text"></td> </tr> <tr> <td width="100">YourEmail:</td> <td width="300"><input name="email" size="30" type="text"></td> </tr> <tr> <td width="100">Country:</td> <td width="300"><input name="email" size="30" type="text"></td> </tr> <tr> <td colspan="2" align="center"><input name="ok" value="1" type="hidden"> <input value="Sign Up" onclick="javascript:validateForm(this.form);" type="button"></td> </tr> </tbody> </table></form><hr><h1 font="Verdana" align="center"><b>"YourFortune Awaits"</b></h1></body></html>Need to be able to stretch this around the whole body now.What do I do?ThanksJohn Link to comment Share on other sites More sharing options...
dsonesuk Posted September 27, 2012 Share Posted September 27, 2012 you are using an attribute for id ref as a html element which it does not recognise <id ="signup_body"></id> should be similar to <div id="signup_body"></div> this is now recognised as id attribute attached to html tag so now it will apply the styling below #signup_body{border:10px double green;border padding:10px;border radius:25px;} Link to comment Share on other sites More sharing options...
Jonnym53 Posted September 29, 2012 Author Share Posted September 29, 2012 Ok, thanks for that. I did as you suggested and it recognizes the instruction but the border is still at the top of the form and not all around. How do I code to make the 'div' element stretch the border all round the page, do I have to add some numbers in? If so how do I know what dimensions to add as I don't know the size of the page. I'll experiment a littleThanks againJohn. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now