943,659 Members | Top Members by Rank

Ad:
Jan 11th, 2009
0

Polishing the code...

Expand Post »
I need help with validing the xhtml code from http://validator.w3.org/
HTML and CSS Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  6. <title>:.Favorite Sites.:</title>
  7. </head>
  8.  
  9. <body style="background-color: black; background-image: url(images/bluebackground.jpg)">
  10. <h1 style="color: white; text-align: center">Favorite Sites</h1>
  11. <p style="text-align: center; color: white">
  12. <a href="#social">Social Utility</a> &middot; <a href="#entertainment">Entertainment</a> &middot; <a href="#puzzle">Puzzles</a> &middot; <a href="#movies">Movies</a> &middot;<a href="#games">Games</a>
  13. </p>
  14.  
  15. </ul>
  16. <hr style="text-align:center;height:10px;width:1100px;color:silver" noshade="noshade" />
  17. <h2 id ="social" style="clear: both; color: #FFF;">Social Utility</h2>
  18. <ul style="color: white;">
  19. <li><a href="http://www.facebook.com/" target="window"><img src="Images/friends.jpg" alt="friends" width="120" height="120" style="float: left; margin-right: 20px;"/></a><b> - Facebook is a social networking site that makes it easy for you to keep in touch with friends, family and employees. It is great way to meet old
  20. <br />
  21. friends and keep up on what they are doing. People use Facebook to keep up with friends, upload photos and share information. It is similar to
  22. <br />
  23. Myspace but it has more features.</b></li><br />
  24.  
  25. <br />
  26. <br />
  27. <br />
  28.  
  29. <li style="clear: both;"><a href="http://www.oovoo.com/" target="window"><img src="Images/chat.jpg" alt="chat" width="120" height="120"style="float: left; margin-right: 20px;" /></a><b> - Oovoo connect people by its high-quality video and audio online. It allow six people to talk or sign face-to-face with each other at the same time.
  30. <br />
  31. ooVoo offers video messaging to an email or another ooVoo account, text messaging, and file sharing. It can be only use for temporary as a demo.
  32. <br />
  33. Until that is, Itis great tool to chat.</b></li>
  34.  
  35. <br />
  36. <br />
  37. <br />
  38. <br />
  39.  
  40. </ul>
  41. <hr style="text-align:center;height:10px;width:1100px;color:silver" noshade="noshade" />
  42. <h2 id ="entertainment" style="clear: both; color: #FFF;">Entertainment</h2>
  43. <ul style="color: white;">
  44. <li><a href="http://www.collegehumor.com/" target="window"><img src="Images/laugh.jpg" alt="humor" width="120" height="120" style="float: left; margin-right: 20px;"/></a><b> - CollegeHumor is the best humor site on the internet. It is included funny videos, pictures,and jokes. That site allow users to submit items into the
  45. <br />
  46. website under one condition: it has to be original. The site is specialized into college audience. It has features content that appeal to the universities
  47. <br />
  48. and colleges.</b></li><br />
  49.  
  50. <br />
  51. <br />
  52. <br />
  53.  
  54. <li style="clear: both;"><a href="http://www.youtube.com/" target="window"><img src="Images/youtube.jpg" alt="youtube" width="120" height="120"style="float: left; margin-right: 20px;" /></a><b> - YouTube is a video sharing website where users can upload, view and share video clips. It contained many useful features: browse millions of videos,
  55. <br />
  56. comment the videos by rating or video responses, upload your videos so everyone can see it, and save your favorite videos. Deaf jokes, vlogs and even
  57. <br />
  58. poetry are also protrayed through the site.</b></li>
  59.  
  60. <br />
  61. <br />
  62. <br />
  63. <br />
  64.  
  65. </ul>
  66. <hr style="text-align:center;height:10px;width:1100px;color:silver" noshade="noshade" />
  67. <h2 id ="puzzle" style="clear: both; color: #FFF;">Puzzles</h2>
  68. <ul style="color: white;">
  69. <li><a href="http://www.corsinet.com/braincandy/stupid.html" target="window"><img src="Images/question.jpg" alt="friends" width="120" height="120" style="float: left; margin-right: 20px;"/></a><b> - Whenever I want to sit alone, I like to think about those silly questions to make me think. Questions like this can create humor, as I can't stop thinking
  70. <br />
  71. of the solution even when I try not to think on them! Most of my answers mostly depend on the process of thinking and they are different every time!
  72. .</b></li><br />
  73.  
  74. <br />
  75. <br />
  76. <br />
  77.  
  78. <li style="clear: both;"><a href="http://www.rinkworks.com/brainfood/p/latreal1.shtml" target="window"><img src="Images/thinking.jpg" alt="chat" width="120" height="120"style="float: left; margin-right: 20px;" /></a><b> - Laterial thinking puzzles are methods of thinking by using different perception than my own. It is about reasoning that is not obvious and about ideas I
  79. <br />
  80. don't know. It trained me to think outside the box. I able to see things more differently and help me find solutions better. It is also challenging too.</b></li>
  81.  
  82. <br />
  83. <br />
  84. <br />
  85. <br />
  86. <br />
  87.  
  88. </ul>
  89. <hr style="text-align:center;height:10px;width:1100px;color:silver" noshade="noshade" />
  90. <h2 id ="movies" style="clear: both; color: #FFF;">Movies</h2>
  91. <ul style="color: white;">
  92. <li><a href="http://www.imdb.com/title/tt0493464/" target="window"><img src="Images/want.jpg" alt="wanted" width="120" height="120" style="float: left; margin-right: 20px;"/></a><b> - Wanted is is a 2008 action film, which James McAvoy is just an ordinary guy who was an ordinary guy , Unitl he found out that his father is a assassin
  93. <br />
  94. and he is dead, Sloan arrives and offering Wesley the job. After training, Fox and Wesley was having dangerous adventures.</b></li><br />
  95.  
  96. <br />
  97. <br />
  98. <br />
  99.  
  100. <li style="clear: both;"><a href="http://www.imdb.com/title/tt1059786/" target="window"><img src="Images/FBI.jpg" alt="FBI" width="120" height="120" style="float: left; margin-right: 20px;" /></a><b> - Eagle Eye is a 2008 action/thriller film that has a high rating. It is about a young man and a single mother who are brought together by a caller. That
  101. <br /> caller push them into dangerous situations. If they don't follow them, He/she is using the technology of everyday to track and control their every move.</b></li>
  102.  
  103. <br />
  104. <br />
  105. <br />
  106. <br />
  107. <br />
  108.  
  109. </ul>
  110. <hr style="text-align:center;height:10px;width:1100px;color:silver" noshade="noshade" />
  111. <h2 id ="games" style="clear: both; color: #FFF;">Games</h2>
  112. <ul style="color: white;">
  113. <li><a href="http://afro-ninja.com/vflash.php?id=50" target="window"><img src="Images/territory.jpg" alt="territory" width="120" height="120" style="float: left; margin-right: 20px;"/></a><b> - Territory War Online is strategy-based game where two teams of players against each other with various kinds of weapons. In turn-based fashion,
  114. <br />
  115. each turn will enable a player from your team to move or use weapon. The concept is to beat the opposing team by using your own strategy. This game
  116. <br />
  117. play online with people all over in United States.</b></li><br />
  118.  
  119. <br />
  120. <br />
  121. <br />
  122.  
  123. <li style="clear: both;"><a href="http://www.chess.com/play/" target="window"><img src="Images/chess.jpg" alt="chess" width="120" height="120"style="float: left; margin-right: 20px;" /></a><b> - Chess is a online board game for two players. It start with each beginning with 16 pieces of six kinds. Each pieces that are moved in different ways
  124. <br />
  125. such as diagonally, straight or even one square at a time. The objective of game is to checkmate the opposing king.</b></li>
  126.  
  127. <br />
  128. <br />
  129. <br />
  130. <br />
  131. <br />
  132.  
  133. </ul>
  134. <hr style="text-align:center;height:10px;width:1100px;color:silver" noshade="noshade" />
  135. <p style="text-align:center"><a href="Assignment1/Index.html">Home Page</a>&nbsp;&middot;&nbsp;<a href="Assignment1/WebDev1.html">Web Development I</a>
  136. </p>
  137.  
  138. </p>
  139. </body>
  140. </html>
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
bookworm619 is offline Offline
21 posts
since Jun 2008
Jan 11th, 2009
0

Re: Polishing the code...

Hey, I think what the main problem here is that the <br /> tags need to be within the <li> elements.

For example:
HTML and CSS Syntax (Toggle Plain Text)
  1. <ul>
  2. <li>Text<br /></li>
  3. </ul>

Also you are probably better off getting rid of the <br /> tags and using style information increase the padding between each <li>.
Last edited by peter_budo; Jan 18th, 2009 at 2:57 pm. Reason: Missing closing tag
Reputation Points: 10
Solved Threads: 1
Newbie Poster
SteveKubrick is offline Offline
11 posts
since May 2008
Jan 11th, 2009
0

Re: Polishing the code...

You really need to get rid of as many of the <br/>s as possible and also having styling code in your html is not recommended. You should put it all in your style sheet. You should also not have pixel widths of 1100px!?

If you have anymore question, reply.
Reputation Points: 178
Solved Threads: 15
Nearly a Posting Virtuoso
roryt is offline Offline
1,282 posts
since Oct 2005
Jan 11th, 2009
0

Re: Polishing the code...

The validator tells you what is wrong
fix them in order 1 - 51 and keep the fixed page as a template

Markup Validation Service
Check the markup (HTML, XHTML, …) of Web documents

Jump To: Validation Output
Errors found while checking this document as XHTML 1.0 Transitional!
Result: 51 Errors
To ensure your <hr> extends across the page use width=100%
obscenely large pixel measures just create scroll bars on the page
Last edited by almostbob; Jan 11th, 2009 at 11:47 am.
Reputation Points: 562
Solved Threads: 368
Posting Maven
almostbob is offline Offline
2,970 posts
since Jan 2009
Jan 11th, 2009
0

Re: Polishing the code...

Most of you guys telling me that the <br /> must be removed or be within the <li>. That is alright. I can do that. But the web page won't look good.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
bookworm619 is offline Offline
21 posts
since Jun 2008
Jan 11th, 2009
0

Re: Polishing the code...

Most of you guys telling me that the <br /> must be removed or be within the <li>. That is alright. I can do that. But the web page won't look good.
bulk <br> "won't look good"
css for layout, html for content
<style type='text/css'>
ul li { padding: 1px; padding-top: 14px; margin: 0; /* whatever- I got lazy now */}
</style>
Last edited by almostbob; Jan 11th, 2009 at 10:21 pm.
Reputation Points: 562
Solved Threads: 368
Posting Maven
almostbob is offline Offline
2,970 posts
since Jan 2009
Jan 16th, 2009
0

Re: Polishing the code...

You can put margins outside the ul or ol tags with css.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007
Jan 26th, 2009
0

Re: Polishing the code...

think semantics - in terms of the design, is that space really half a dozen "line break"s? or is it a really big li - in which case padding is what you need (i.e. increase the space between the content and the element border). If it is space BETWEEN the li's you're after, you will want to give each li a margin.

Remeber elements will share margins so if you have one li with say margin-bottom:10px; and the li below it with margin-top:10px; the two li's will only be 10px apart, not 20.

Hope this helps
Reputation Points: 12
Solved Threads: 0
Light Poster
DeViAnT\gAmEr is offline Offline
45 posts
since Jul 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: images & style not displaying in EXpressin Web2
Next Thread in HTML and CSS Forum Timeline: Iframe





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC