lostprophetpunk Posted August 24, 2009 Share Posted August 24, 2009 I know quite a fair bit of CSS (just looking into CSS3 at the moment). I basically used divs for everything on the design...so a friend helped me out with some paragraph tags, but now that I have done it I get 7 errors in the validation of the site. The html for this is... <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>New Design</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id='wrapper'> <div id='header'> <div id='nav'> <a href='#'>Portfolio</a> <a href='#'>Artwork</a> <a href='#'>Poetry</a> <a href='#'>Contact</a> </div> <div id='logo'></div> </div> <div id='right'> <p class='twitter'> <p class='bird'></p> <p class='tweet'> <b>Matt</b> has got the twitter display script working on his website...=] </p> </p> <p class='follow'>Click <a href='#'>here</a> to follow me</p> <p class='side-title'>About the author</p> <p class='side-info'>My name is Matt Hobbs. I am a student from the UK and I am currently studying media at a local college. I enjoy making websites to bring fresh ideas to everyone.<br /><br />The programming languages I specialise in are: PHP, (x)HTML and CSS. I am currently learning ASP.NET.</p> <p class='side-title'>Rants from the Blog</p> <p class='side-info'> <p class='blog-entry'><a href='#'>Lorum Ipsum</a>23 August, 2009</p> <p class='blog-entry'><a href='#'>Lorum Ipsum</a>21 August, 2009</p> <p class='blog-entry'><a href='#'>Lorum Ipsum</a>18 August, 2009</p> <p class='blog-entry'><a href='#'>Lorum Ipsum</a>15 August, 2009</p> <p class='blog-entry'><a href='#'>Lorum Ipsum</a>10 August, 2009</p> </p> </div> <div id='left'> <div class='post-wrap'> <p class='post'>Latest Feature Project<a href='#'>Fading Fast</a></p> <p class='picture'><img src='fadingfast.png' alt='' /></p> <p class='information'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tellus lorem, gravida et pharetra sit amet, sodales in lectus. Quisque vulputate neque vel metus consequat eget accumsan dolor sodales. Praesent porttitor sodales libero non posuere. Aenean mi tortor, malesuada ac condimentum at, posuere nec nulla. Ut lobortis, nisl condimentum suscipit egestas, quam justo vulputate enim, porta sodales ante libero sit amet sem. Integer id hendrerit turpis. Quisque et magna at felis egestas suscipit et eget purus. Aliquam viverra condimentum felis ac condimentum. Nulla facilisi. Vestibulum tempor blandit metus, nec suscipit orci pulvinar ac. Nullam hendrerit pharetra lectus, vitae condimentum nisi fringilla a. Nunc tincidunt, risus sed varius dictum, augue purus ullamcorper lectus, eu ornare nisi orci tincidunt enim. Aliquam erat volutpat. Donec accumsan, eros a aliquam adipiscing, lacus erat luctus urna, id pretium dolor velit et tortor. Sed vitae est nunc, vitae sagittis velit. Nunc mattis interdum magna vel hendrerit. Duis ullamcorper ligula eu justo vestibulum suscipit.</p> </div> <div id='footer'> <div class='contain'> <div class='footer-title'>Inspiration</div> <div class='footer-info'> - <a href='#'>PSDTuts</a><br /> - <a href='#'>CSS Zen Garden</a><br /> - <a href='#'>WebCreme</a><br /> - <a href='#'>CSS Mania</a><br /> - <a href='#'>DeviantArt</a><br /> - <a href='#'>CSS Tux</a><br /> </div> </div> <div class='contain'> <div class='footer-title'>Archive</div> <div class='footer-info'> <u><b>2009</b></u><br /> - <a href='#'>August (10)</a><br /> - <a href='#'>July (22)</a><br /> - <a href='#'>June (18)</a><br /> - <a href='#'>May (24)</a><br /> - <a href='#'>April (17)</a> </div> </div> <div class='contain'> <div class='footer-title'>Categories</div> <div class='footer-info'> - <a href='#'>General</a><br /> - <a href='#'>Website</a><br /> - <a href='#'>PHP</a><br /> - <a href='#'>CSS</a><br /> - <a href='#'>Novelett</a> </div> </div> <div class='contain'> <div class='footer-title'>Contact</div> <div class='footer-contact'> If you would like to ask me about a design, or give me some feedback on the website, feel free to send me a message to the email address below.<br /><br /><a href="mailto: Matt@minihobbs.co.uk" title="Mail Me" >Matt@Minihobbs.co.uk</a> </div> </div> </div> <div id='actual-footer'> <span>Email: <a href="mailto: Matt@minihobbs.co.uk" title="Mail Me" >Matt@Minihobbs.co.uk</a></span> Design & Code © 2009 Matt Hobbs<br />Valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a>/<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> </div> </div> </div> </body> </html> The css... body,html { padding: 0px; margin: 0px; } /*-------- Header --------*/ #wrapper { width: 960px; margin: auto; } #header { width: 960px; height: 60px; border-bottom: 2px solid #cccccc; } #logo { width: 264px; height: 35px; background: transparent url(logo.png) no-repeat center center; float: left; margin-top: 12px; } /*-------- Nav --------*/ #nav { width: 303px; float: right; margin-top: 20px; } #nav a:link { font-family: arial; font-size: 12pt; color: #a9a9a9; text-decoration: none; margin-left: 20px; } #nav a:visited { font-family: arial; font-size: 12pt; color: #a9a9a9; text-decoration: none; margin-left: 20px; } #nav a:active { font-family: arial; font-size: 12pt; color: #a9a9a9; text-decoration: none; margin-left: 20px; } #nav a:hover { font-family: arial; font-size: 12pt; color: #af1313; text-decoration: none; margin-left: 20px; } /*-------- Sidebar --------*/ #right { width: 280px; height: 300px; float: right; margin-bottom: 40px; } p.twitter { width: 280px; height: auto; margin: auto; margin-top: 40px; } p.bird { width: 60px; height: 60px; background: transparent url(twitter.png) no-repeat center center; float: left; } p.tweet { width: 200px; height: auto; padding: 10px; background-color: #cbcbcb; font-family: arial; font-size: 11px; float: right; } p.follow { width: 280px; height: 30px; font-family: georgia; font-size: 20pt; color: #af1313; clear: both; text-align: left; margin-bottom: 30px; } p.follow a:link { font-family: georgia; font-size: 20pt; color: #a9a9a9; text-decoration: none; } p.follow a:visited { font-family: georgia; font-size: 20pt; color: #a9a9a9; text-decoration: none; } p.follow a:active { font-family: georgia; font-size: 20pt; color: #a9a9a9; text-decoration: none; } p.follow a:hover { font-family: georgia; font-size: 20pt; color: #af1313; text-decoration: none; } p.side-title { width: 280px; height: 27px; font-family: georgia; font-size: 18pt; color: #af1313; padding-bottom: 3px; border-bottom: 2px solid #cccccc; clear: both; text-align: left; } p.side-info { width: 280px; margin-top: -15px; font-family: arial; font-size: 10pt; line-height: 15pt; color: #a9a9a9; margin-bottom: 30px; } p.blog-entry { width: 280px; font-family: arial; font-size: 10pt; color: #a9a9a9; text-align: right; margin: 0px; } p.blog-entry a:link { font-family: arial; font-size: 10pt; color: #a9a9a9; text-decoration: none; float: left; } p.blog-entry a:visited { font-family: arial; font-size: 10pt; color: #a9a9a9; text-decoration: none; float: left; } p.blog-entry a:active { font-family: arial; font-size: 10pt; color: #a9a9a9; text-decoration: none; float: left; } p.blog-entry a:hover { font-family: arial; font-size: 10pt; color: #af1313; text-decoration: none; float: left; } /*-------- Footer --------*/ #footer { width: 960px; height: 200px; clear: both; margin: auto; border-top: 2px solid #cccccc; } .contain { width: 220px; height: 30px; float: left; margin-left: 10px; margin-right: 10px; margin-top: 30px; } .footer-title { font-family: georgia; font-size: 18pt; color: #af1313; } .footer-info { width: 200px; margin-left: 20px; font-family: arial; font-size: 10pt; line-height: 15pt; color: #a9a9a9; } .footer-info a:link { font-family: arial; font-size: 10pt; color: #a9a9a9; text-decoration: none; } .footer-info a:visited { font-family: arial; font-size: 10pt; color: #a9a9a9; text-decoration: none; } .footer-info a:active { font-family: arial; font-size: 10pt; color: #a9a9a9; text-decoration: none; } .footer-info a:hover { font-family: arial; font-size: 10pt; color: #af1313; text-decoration: none; } .footer-contact { width: 220px; font-family: arial; font-size: 10pt; line-height: 15pt; color: #a9a9a9; } .footer-contact a:link { font-family: arial; font-size: 10pt; color: #a9a9a9; text-decoration: none; } .footer-contact a:visited { font-family: arial; font-size: 10pt; color: #a9a9a9; text-decoration: none; } .footer-contact a:active { font-family: arial; font-size: 10pt; color: #a9a9a9; text-decoration: none; } .footer-contact a:hover { font-family: arial; font-size: 10pt; color: #af1313; text-decoration: none; } #actual-footer { clear: both; width: 960px; margin-top: 30px; margin-bottom: 30px; text-align: left; font-family: arial; font-size: 10pt; color: #a9a9a9; } #actual-footer span { float: right; margin-top: 5px; } #actual-footer a:link { font-family: arial; font-size: 10pt; color: #af1313; text-decoration: none; } #actual-footer a:visited { font-family: arial; font-size: 10pt; color: #af1313; text-decoration: none; } #actual-footer a:active { font-family: arial; font-size: 10pt; color: #af1313; text-decoration: none; } #actual-footer a:hover { font-family: arial; font-size: 10pt; color: #a9a9a9; text-decoration: none; } /*-------- Main - Homepage --------*/ #left { width: 590px; height: auto; float: left; clear: left; } .post-wrap { width: 580px; margin-top: 40px; margin-bottom: 40px; } p.post { width: 580px; font-family: georgia; font-size: 20pt; color: #af1313; } p.post a:link { font-family: georgia; font-size: 20pt; color: #a9a9a9; text-decoration: none; float: right; } p.post a:visited { font-family: georgia; font-size: 20pt; color: #a9a9a9; text-decoration: none; float: right; } p.post a:active { font-family: georgia; font-size: 20pt; color: #a9a9a9; text-decoration: none; float: right; } p.post a:hover { font-family: georgia; font-size: 20pt; color: #af1313; text-decoration: none; float: right; } p.picture { width: 580px; height: 200px; margin-top: 10px; } p.picture img { border: 0px; margin-top: -10px; } p.information { width: 580px; margin-top: -10px; font-family: arial; font-size: 10pt; line-height: 15pt; color: #a9a9a9; } If anyone could help out that would be awesome. Thanks in advance. Quote Link to comment Share on other sites More sharing options...
haku Posted August 24, 2009 Share Posted August 24, 2009 Can't tell you what's causing the errors if you don't tell us what the errors are. Quote Link to comment Share on other sites More sharing options...
lostprophetpunk Posted August 24, 2009 Author Share Posted August 24, 2009 Can't tell you what's causing the errors if you don't tell us what the errors are. The errors are in the validation link int he post... They are all the same, and display as 'document type does not allow element "p" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag' Quote Link to comment Share on other sites More sharing options...
sawade Posted August 24, 2009 Share Posted August 24, 2009 It looks like the errors are from nested <p> tags. Quote Link to comment Share on other sites More sharing options...
haku Posted August 24, 2009 Share Posted August 24, 2009 That's exactly what it is. It makes no sense having a p tag inside a p tag. If you think about it, how can you have a paragraph inside a paragraph? A paragraph is a self contained piece of text. The only thing it may contain is some specially formatted text - bold or underlined or a different color or whatnot. In such a case, you would use span or em(phasis) tags or strong tags. Semantic webdesign is where the content inside a tag matches the tag. So if you have a div tag - it's a division of your site. If you have a p tag, it's a paragraph. If you have a quote of some sort, you put it in quote tags. If you have a big quote, you put it in blockquote tags. If you have a list (which you do), you use list tags. Spend some time familiarizing yourself with the various tags, and then you will have an easier time knowing which ones to use for what situation. This is a good XHTML reference: http://www.devguru.com/technologies/xhtml/index.asp Quote Link to comment Share on other sites More sharing options...
lostprophetpunk Posted August 24, 2009 Author Share Posted August 24, 2009 I know about the tags...I just sometimes get the tags messed up sometimes. I have sorted the code out now...it is all valid. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.