can some body tidy this page up for me so its all central and tidy i dont seem to be able to get it right cheers Doug <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- .style1 {font-weight: bold} --> </style> </head> <body> <div align="center"><img src="pictures/cooltext55242781.jpg" width="516" height="46" /> </div> <p align="center"><a href="index.php"><img src="pictures/button3.jpg" width="100" height="33" /></a><a href="browse.php"><img src="pictures/button6.jpg" width="100" height="33" /></a><a href="form.html"><img src="pictures/button9.jpg" width="100" height="33" /></a><a href="login.php"><img src="pictures/buttonC.jpg" width="100" height="33" /></a><a href="contact1.php"><img src="pictures/buttonF.jpg" width="100" height="33" /></a></p> <p align="center"> </p> <p align="center"> </p> <form enctype="multipart/form-data" action="add.php" method="POST"> Name: <input type="text" name="name"><br> Username: <input type="text" name="username"><br> Password: <input type="text" name="password"><br> E-mail: <input type="text" name = "email"><br> Park Name: <input type="text" name="parkname"><br> Park Location: <input type="text" name="parklocation"><br> Caravan Details: <input type="text" name="caravandetails"><br> Photo: <input type="file" name="photo"><br> <input type="submit" value="Add"> </form> </body> </html> HTML:
Hey Doug, The first thing I would do is put the form labels and inputs in a table so all of the inputs align with each other. Something like: <table> <tr><td>Name:</td><td><input id=user_name type=text></td></tr> </table> Later, Marty
NO! Do not use a table for the form. Hold on. Let me clear out the other tabs and I'll get right back to you.
Since I have your attention, can you post links to the images you're using? I'd like to be able to take a look at them and see if I can work them into the re-coding. Also, what is the form about?
is this what you mean <body> <div align="center"><img src="pictures/cooltext55242781.jpg" width="516" height="46" /> <p align="center"><a href="index.php"><img src="pictures/button3.jpg" width="100" height="33" /></a><a href="browse.php"><img src="pictures/button6.jpg" width="100" height="33" /></a><a href="form.html"><img src="pictures/button9.jpg" width="100" height="33" /></a><a href="login.php"><img src="pictures/buttonC.jpg" width="100" height="33" /></a><a href="contact1.php"><img src="pictures/buttonF.jpg" width="100" height="33" /></a></p> <p align="center"> </p> <p align="center"> </p> HTML:
those would be the images, but I'd like full links to the images (or attachments) so I can see them for myself (as in actually eye-ball them).
or did you mean these attached pics sorry i am not with it today cheers Doug web addy is www.caravan-holiday-exchange.com if you want to look
Ah, a tabbed menu. You're going to hate me, but I'm going to recommend you ditch the images and go with plain text instead. You can style them to look like tabbed menus using the Sliding Doors of CSS. Anyway, i have your HTML ready. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="/styles/screen.css" media="screen" /> </head> <body> <div id="header"> <img src="pictures/cooltext55242781.jpg" width="516" height="46" alt="Alternative Text For Those Who Cannot See The Image" /> </div> <ul id="menu"> <li><a href="./">Home</a></li> <li><a href="browse.php">Browse</a></li> <li><a href="form.html">Form</a></li> <li><a href="login.php">Login</a></li> <li><a href="contact1.php">Contact</a></li> </ul> <form action="add.php" enctype="multipart/form-data" id="add" method="post"> <div class="fieldset"> <fieldset> <legend><span>Form Legend</span></legend> <label for="name">Name:</label> <input type="text" id="name" /><br /> <label for="username">Username:</label> <input type="text" id="username" /><br /> <label for="password">Password:</label> <input type="password" id="password" /><br /> <label for="e-mail">E-Mail:</label> <input type="text" id="e-mail" /><br /> <label for="park-name">Park Name:</label> <input type="text" id="park-name" /><br /> <label for="park-location">Park Location:</label> <input type="text" id="park-location" /><br /> <label for="caravan-details">Caravan Details:</label> <input type="text" id="caravan-details" /><br /> <label for="photo">Photo:</label> <input type="file" id="photo" /> </fieldset> </div> <div> <input type="submit" class="submit" value="Add" /> <input type="reset" class="reset" value="Clear Form" /> </div> </form> </body> </html> Code (markup): Once I take a look at the link you gave me, I'll see if I can make any other changes (I'm really thinking about using a H1 with an empty SPAN inside it as an image replacement technique - I'm a real accessibility and standards nut, not to mention a minimalist coder) I can make to the structure.
Ok, I just looked at it. Not much of a design there, but I would definatley replace the IMG and the DIV in my code sample with <h1><span></span>Caravan Holiday Exchange</h1>, but thats just me. And yes, I am using a Strict DOCTYPE, so no deprecated (obsolete, old-fashioned) or non-standard code will be allowed if you want the page to validate. It's easier to learn, especially since you don't have as many tags to learn/memorize, and you can focus on the page structure, letting CSS handle the rest.
Who'd have thought, less HTML code? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="/styles/screen.css" media="screen" /> </head> <body> <h1><span></span>Caravan Holiday Exchange</h1> <ul id="menu"> <li><a href="./">Home</a></li> <li><a href="browse.php">Browse</a></li> <li><a href="form.html">Register</a></li> <li><a href="login.php">Login</a></li> <li><a href="contact1.php">Contact</a></li> </ul> <form action="add.php" enctype="multipart/form-data" id="add" method="post"> <div class="fieldset"> <fieldset> <legend><span>Form Legend</span></legend> <label for="name">Name:</label> <input type="text" id="name" /><br /> <label for="username">Username:</label> <input type="text" id="username" /><br /> <label for="password">Password:</label> <input type="password" id="password" /><br /> <label for="e-mail">E-Mail:</label> <input type="text" id="e-mail" /><br /> <label for="park-name">Park Name:</label> <input type="text" id="park-name" /><br /> <label for="park-location">Park Location:</label> <input type="text" id="park-location" /><br /> <label for="caravan-details">Caravan Details:</label> <input type="text" id="caravan-details" /><br /> <label for="photo">Photo:</label> <input type="file" id="photo" /> </fieldset> </div> <div> <input type="submit" class="submit" value="Add" /> <input type="reset" class="reset" value="Clear Form" /> </div> </form> </body> </html> Code (markup): Now to work on the CSS.
Thank you for your replies and suggestions the only prob i have with it is the form looks a little untidy as the input fields they dont line up if you know what i mean cheers Doug
Oh, I know all about that. What you're seeing is the default view. CSS will be taking care of the presentation. What I'm going to do is use the stylesheet to determine how the form controls are displayed. Have you ever used CSS before by any chance?
no i am only just starting to learn this and at 59 its hard for me thats why i have to keep asking peeps for help cheers Doug
No problem. I understand. You might want to get your hands on a copy of Build Your Own Web Site the Right Way Using HTML and CSS by Ian Lloyd over at www.sitepoint.com if you'd like to really get serious with HTML.
well i am not sure which is the best way to go as a lot of peeps say php or do the 2 go together cheers Doug
just had a look and book is only £13 might send for it i am using dreamweaver cs3 at the moment do you reccomend a prog for html etc cheers Doug
PHP is a server-side programming language that handles everything from templating to rich Web applications. Regardless of how you slice it, it's still going to produce HTML output. Starting with HTML and CSS is really the best you can do. At this stage, if you want to use PHP, I suggest you limit yourself to PHP includes, which I explained in an earlier post here on DigitalPoint: http://forums.digitalpoint.com/showthread.php?p=2145250