Jump to content
chownsy

Finally giving it another bash but guidance needed

Recommended Posts

Hello all, Thank you for your help last time so I hope that I will get the same help again. I have run the file through the validator tool http://validator.w3.org/ and it says 1 error and 9 warnings, so thats better than my last attempt with 54 errors. here is the html code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><link rel="stylesheet" type="text/css" href="style.css" /><meta name="description" content="A Chowns Agricultural Services, Offering contracting services within Worcestershire and Warwickshire" /><meta name="keywords" content="Chowns, Contracting, services, ploughing, farming, tractor, driver, fencing, topping, muck, spreading" /><title>A Chowns Agricultural Services</title></head> <body> <div id="container" style="height:100%;width:100%"> <div id="header"> <h1>A Chowns Agricultural Services</h1></div> <div id="menu" style="height:200px;width:10%;float:left;"><p><b>home</b><br /></P><p>about<br /></P><p>Services Offered<br /></P><p>Gallery<br /></P><p>Contact</P></div> <div id="Contact-details" style="height:200px;width:10%;float:right;"><p>contact details here</p></div> <div id="content" style="margin-left:auto;margin-right:auto;height:200px;width:75%;"><p>Content goes here</p></div> </div> </body> </html> here is the CSS code body{background:#800000;width:100%;} h1{background-color:#FFFFCC;margin-left:auto;margin-right:auto;width:80%;border:10px solid black;padding:1%;color:#800000;text-align:center;font-family:"arial";} p{background-color:#FFFFCC;margin:55;border:5px solid black;padding:1%;text-align:center;font-family:"arial";color:#800000;} Now the problems that I cannot seem to over come are the following. 1. The right hand column has no border between it finishing and the side of the webpage2. the content section in the middle starts too high compared to the side columns3. the content box should be 600px (currently) high but it does not change in size.4. to make the buttons on the side click-able do i need an image or can I do it with HTML and not have them in random sizes like I did before5. Adding a footer does not stay at the bottom but tracks to the last typed item (so i removed it)6. I cannot find the coding needed for a scroller/marquee If you can point me in the right direction and show where I'm messing up (I've spent like 3 weeks reading the tutorials and having it up as i have gone along as helped a lot)

Share this post


Link to post
Share on other sites

Let's first fix the validation issues, and then check the rest.Replace

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html>

with

<!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">

and replace all

</P>

with

</p>

Share this post


Link to post
Share on other sites

Okay, I did that and its made 8 errors now, I fixed 2 by making the <html> </html> into <xhtml> </xhtml> <!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"><xhtml><head><link rel="stylesheet" type="text/css" href="style.css" /><meta name="description" content="A Chowns Agricultural Services, Offering contracting services within Worcestershire and Warwickshire" /><meta name="keywords" content="Chowns, Contracting, services, ploughing, farming, tractor, driver, fencing, topping, muck, spreading" /><title>A Chowns Agricultural Services</title></head> <body> <div id="container" style="height:100%;width:100%"> <div id="header"> <h1>A Chowns Agricultural Services</h1></div> <div id="menu" style="height:200px;width:10%;float:left;"><p><b>home</b><br /></p><p>about<br /></p><p>Services Offered<br /></p><p>Gallery<br /></p><p>Contact</P></div> <div id="Contact-details" style="height:200px;width:10%;float:right;"><p>contact details here</p></div> <div id="content" style="margin-left:auto;margin-right:auto;height:200px;width:75%;"><p>Content goes here</p></div> </div> </body> </xhtml>

Share this post


Link to post
Share on other sites

Replace

<xhtml>

with

<html xmlns="http://www.w3.org/1999/xhtml">

(and the closing tag too)

Share this post


Link to post
Share on other sites

Like this? <!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"><head><link'>http://www.w3.org/1999/xhtml"><head><link rel="stylesheet" type="text/css" href="style.css" /><meta name="description" content="A Chowns Agricultural Services, Offering contracting services within Worcestershire and Warwickshire" /><meta name="keywords" content="Chowns, Contracting, services, ploughing, farming, tractor, driver, fencing, topping, muck, spreading" /><title>A Chowns Agricultural Services</title></head> <body> <div id="container" style="width:100%"> <div id="header"> <h1>A Chowns Agricultural Services</h1></div> <div id="menu" style="height:200px;width:10%;float:left;"><p><b>Home</b><br /></p><p><b>About</b><br /></p><p><b>Services Offered</b><br /></p><p><b>Gallery</b><br /></p><p><b>Contact</b></P></div> <div id="Contact-details" style="height:200px;width:10%;float:right;"><p>contact details here</p></div> <div id="content" style="margin-left:auto;margin-right:auto;height:200px;width:75%;"><p>Content goes here</p></div> </div> </body> </html xmlns="http://www.w3.org/1999/xhtml"> or this? <!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"><head><link'>http://www.w3.org/1999/xhtml"><head><link rel="stylesheet" type="text/css" href="style.css" /><meta name="description" content="A Chowns Agricultural Services, Offering contracting services within Worcestershire and Warwickshire" /><meta name="keywords" content="Chowns, Contracting, services, ploughing, farming, tractor, driver, fencing, topping, muck, spreading" /><title>A Chowns Agricultural Services</title></head> <body> <div id="container" style="width:100%"> <div id="header"> <h1>A Chowns Agricultural Services</h1></div> <div id="menu" style="height:200px;width:10%;float:left;"><p><b>Home</b><br /></p><p><b>About</b><br /></p><p><b>Services Offered</b><br /></p><p><b>Gallery</b><br /></p><p><b>Contact</b></P></div> <div id="Contact-details" style="height:200px;width:10%;float:right;"><p>contact details here</p></div> <div id="content" style="margin-left:auto;margin-right:auto;height:200px;width:75%;"><p>Content goes here</p></div> </div> </body> </xhtml>

Share this post


Link to post
Share on other sites

Uhh... :facepalm:

</html>

Any opening tag, e.g.

<TAG ...>

must be matched by

</TAG>

Share this post


Link to post
Share on other sites

Yes.(well, there's... nevermind... just make that one change in your file, and don't do other things)

Share this post


Link to post
Share on other sites

Okay so were here <!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"><head><link rel="stylesheet" type="text/css" href="style.css" /><meta name="description" content="A Chowns Agricultural Services, Offering contracting services within Worcestershire and Warwickshire" /><meta name="keywords" content="Chowns, Contracting, services, ploughing, farming, tractor, driver, fencing, topping, muck, spreading" /><title>A Chowns Agricultural Services</title></head> <body> <div id="container" style="width:100%"> <div id="header"> <h1>A Chowns Agricultural Services</h1></div> <div id="menu" style="height:200px;width:10%;float:left;"><p><b>Home</b><br /></p><p><b>About</b><br /></p><p><b>Services Offered</b><br /></p><p><b>Gallery</b><br /></p><p><b>Contact</b></P></div> <div id="Contact-details" style="height:200px;width:10%;float:right;"><p>contact details here</p></div> <div id="content" style="margin-left:auto;margin-right:auto;height:200px;width:75%;"><p>Content goes here</p></div> </div> </body> </html>

Share this post


Link to post
Share on other sites

Perfect thank you, so thats the validation correct couldn't find the damn capital P for the life of me, It looked lower case all the time. the Meta line you told me to insert, I dont remember that in the tutorial page. (can someone explain what its doing compared to the line above it for text/css) back to the list of other things: 1. The right hand column has no border between it finishing and the side of the webpage2. the content section in the middle starts too high compared to the side columns3. the content box should be 600px (currently) high but it does not change in size.4. to make the buttons on the side click-able do i need an image or can I do it with HTML and not have them in random sizes like I did before5. Adding a footer does not stay at the bottom but tracks to the last typed item (so i removed it)6. I cannot find the coding needed for a scroller/marquee7. How do i make this site SEO optimized? Here is the code as it currently stands <!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"><head><link rel="stylesheet" type="text/css" href="style.css" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="A Chowns Agricultural Services, Offering contracting services within Worcestershire and Warwickshire" /><meta name="keywords" content="Chowns, Contracting, services, ploughing, farming, tractor, driver, fencing, topping, muck, spreading" /><title>A Chowns Agricultural Services</title></head> <body> <div id="container" style="width:100%"> <div id="header"> <h1>A Chowns Agricultural Services</h1></div> <div id="menu" style="height:200px;width:10%;float:left;"><p><b>Home</b><br /></p><p><b>About</b><br /></p><p><b>Services Offered</b><br /></p><p><b>Gallery</b><br /></p><p><b>Contact</b></p></div> <div id="Contact-details" style="height:200px;width:10%;float:right;"><p>contact details here</p></div> <div id="content" style="margin-left:auto;margin-right:auto;height:200px;width:75%;"><p>Content goes here</p></div> </div> </body> </html>

Share this post


Link to post
Share on other sites

Guys, I hope you don't mind my question, but what's the necessity level of validation a website that I've created or even published?I mean how will it differ anyway, as far as I know the most famous worldwide websites are not really that much of "validated".E.g. Facebook, or any as famous website. :glare:

Share this post


Link to post
Share on other sites

The DTD at the top is the only thing needed to trigger proper document mode.However, the way invalid documents are parsed is not standardized across browsers, and even if it was (as is the case with HTML5), the resulting DOM tree may not be the tree you intended, which in turn influences the way CSS works.Popular sites may be invalid, but the tree they intend to have is either the one they desire, or is one they've successfully worked around.

  • Like 1

Share this post


Link to post
Share on other sites
The DTD at the top is the only thing needed to trigger proper document mode. However, the way invalid documents are parsed is not standardized across browsers, and even if it was (as is the case with HTML5), the resulting DOM tree may not be the tree you intended, which in turn influences the way CSS works. Popular sites may be invalid, but the tree they intend to have is either the one they desire, or is one they've successfully worked around.
So if I'm trying to be a free lancer one day, would you recommend me to validate all the websites I create for my clients?

Share this post


Link to post
Share on other sites

Absolutely.

Share this post


Link to post
Share on other sites

Question not minded at all, this is a learning curve for me, All websites i have made before i have just edited code www.madmercsairsoft.co.uk is one example i edited the code on.www.achownscontracting.co.uk is made by a friend but i edited it. I helped edit internal intranet sites too but they didnt need all the meta data to function.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...