HTML and CSS

Polishing the code...

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jun 2008

Posts: 17

Reputation: bookworm619 is an unknown quantity at this point

Solved Threads: 0

bookworm619 bookworm619 is offline

Offline

Newbie Poster

Polishing the code...

Jan 11th, 2009

I need help with validing the xhtml code from http://validator.w3.org/

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<!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>:.Favorite Sites.:</title>
</head>
 
<body style="background-color: black; background-image: url(images/bluebackground.jpg)">
<h1 style="color: white; text-align: center">Favorite Sites</h1>
<p style="text-align: center; color: white">
<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>
</p>
 
</ul>
<hr style="text-align:center;height:10px;width:1100px;color:silver" noshade="noshade" />
<h2 id ="social" style="clear: both; color: #FFF;">Social Utility</h2>
<ul style="color: white;">
    <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 
<br />
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
<br />
Myspace but it has more features.</b></li><br />
 
    <br />
    <br />
    <br />
 
<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.
<br />
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. 
<br />
Until that is, Itis great tool to chat.</b></li>
 
    <br />
    <br />
    <br />
    <br />
 
</ul>
<hr style="text-align:center;height:10px;width:1100px;color:silver" noshade="noshade" />
<h2 id ="entertainment" style="clear: both; color: #FFF;">Entertainment</h2>
<ul style="color: white;">
    <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 
<br />
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 
<br />
and colleges.</b></li><br />
 
    <br />
    <br />
    <br />
 
<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, 
<br />
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 
<br />
poetry are also protrayed through the site.</b></li>
 
    <br />
    <br />
    <br />
    <br />
 
</ul>
<hr style="text-align:center;height:10px;width:1100px;color:silver" noshade="noshade" />
<h2 id ="puzzle" style="clear: both; color: #FFF;">Puzzles</h2>
<ul style="color: white;">
    <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 
<br />
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!
.</b></li><br /> 
 
    <br />
    <br />
    <br />
 
<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 
<br />
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>
 
    <br />
    <br />
    <br />
    <br />
    <br />
 
</ul>
<hr style="text-align:center;height:10px;width:1100px;color:silver" noshade="noshade" />
<h2 id ="movies" style="clear: both; color: #FFF;">Movies</h2>
<ul style="color: white;">
    <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
<br />
and he is dead, Sloan arrives and offering Wesley the job. After training, Fox and Wesley was having dangerous adventures.</b></li><br />
 
    <br />
    <br />
    <br />
 
<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
<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>
 
    <br />
    <br />
    <br />
    <br />
    <br />
 
</ul>
<hr style="text-align:center;height:10px;width:1100px;color:silver" noshade="noshade" />
<h2 id ="games" style="clear: both; color: #FFF;">Games</h2>
<ul style="color: white;">
    <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, 
<br />
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
<br />
play online with people all over in United States.</b></li><br />
 
    <br />
    <br />
    <br />
 
<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
<br /> 
such as diagonally, straight or even one square at a time. The objective of game is to checkmate the opposing king.</b></li>
 
    <br />
    <br />
    <br />
    <br />
    <br />
 
</ul>
<hr style="text-align:center;height:10px;width:1100px;color:silver" noshade="noshade" />
<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>
</p>
 
</p>
</body>
</html>
<!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>:.Favorite Sites.:</title>
</head>

<body style="background-color: black; background-image: url(images/bluebackground.jpg)">
<h1 style="color: white; text-align: center">Favorite Sites</h1>
<p style="text-align: center; color: white">
<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>
</p>

</ul>
<hr style="text-align:center;height:10px;width:1100px;color:silver" noshade="noshade" />
<h2 id ="social" style="clear: both; color: #FFF;">Social Utility</h2>
<ul style="color: white;">
    <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 
<br />
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
<br />
Myspace but it has more features.</b></li><br />

    <br />
    <br />
    <br />

<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.
<br />
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. 
<br />
Until that is, Itis great tool to chat.</b></li>

    <br />
    <br />
    <br />
    <br />

</ul>
<hr style="text-align:center;height:10px;width:1100px;color:silver" noshade="noshade" />
<h2 id ="entertainment" style="clear: both; color: #FFF;">Entertainment</h2>
<ul style="color: white;">
    <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 
<br />
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 
<br />
and colleges.</b></li><br />

    <br />
    <br />
    <br />

<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, 
<br />
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 
<br />
poetry are also protrayed through the site.</b></li>

    <br />
    <br />
    <br />
    <br />

</ul>
<hr style="text-align:center;height:10px;width:1100px;color:silver" noshade="noshade" />
<h2 id ="puzzle" style="clear: both; color: #FFF;">Puzzles</h2>
<ul style="color: white;">
    <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 
<br />
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!
.</b></li><br /> 

    <br />
    <br />
    <br />

<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 
<br />
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>

    <br />
    <br />
    <br />
    <br />
    <br />

</ul>
<hr style="text-align:center;height:10px;width:1100px;color:silver" noshade="noshade" />
<h2 id ="movies" style="clear: both; color: #FFF;">Movies</h2>
<ul style="color: white;">
    <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
<br />
and he is dead, Sloan arrives and offering Wesley the job. After training, Fox and Wesley was having dangerous adventures.</b></li><br />

    <br />
    <br />
    <br />

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

    <br />
    <br />
    <br />
    <br />
    <br />

</ul>
<hr style="text-align:center;height:10px;width:1100px;color:silver" noshade="noshade" />
<h2 id ="games" style="clear: both; color: #FFF;">Games</h2>
<ul style="color: white;">
    <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, 
<br />
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
<br />
play online with people all over in United States.</b></li><br />

    <br />
    <br />
    <br />

<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
<br /> 
such as diagonally, straight or even one square at a time. The objective of game is to checkmate the opposing king.</b></li>

    <br />
    <br />
    <br />
    <br />
    <br />

</ul>
<hr style="text-align:center;height:10px;width:1100px;color:silver" noshade="noshade" />
<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>
</p>

</p>
</body>
</html>

•

Join Date: May 2008

Posts: 11

Reputation: SteveKubrick is an unknown quantity at this point

Solved Threads: 1

SteveKubrick SteveKubrick is offline

Offline

Newbie Poster

Re: Polishing the code...

Jan 11th, 2009

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

For example:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<ul>
<li>Text<br /></li>
</ul>
<ul>
<li>Text<br /></li>
</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

•

Join Date: Oct 2005

Posts: 1,283

Reputation: roryt will become famous soon enough

Solved Threads: 14

roryt

Offline

Nearly a Posting Virtuoso

Re: Polishing the code...

Jan 11th, 2009

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.

PhotoShopthis
FlyingPen
If I have helped you please add to my reputation

•

Join Date: Jan 2009

Posts: 1,308

Reputation: almostbob has a spectacular aura about

Solved Threads: 161

almostbob

Offline

Nearly a Posting Virtuoso

Re: Polishing the code...

Jan 11th, 2009

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.

Failure is not an option It's included free
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved

•

Join Date: Jun 2008

Posts: 17

Reputation: bookworm619 is an unknown quantity at this point

Solved Threads: 0

bookworm619 bookworm619 is offline

Offline

Newbie Poster

Re: Polishing the code...

Jan 11th, 2009

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.

•

Join Date: Jan 2009

Posts: 1,308

Reputation: almostbob has a spectacular aura about

Solved Threads: 161

almostbob

Offline

Nearly a Posting Virtuoso

Re: Polishing the code...

Jan 11th, 2009

•

Originally Posted by bookworm619

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.

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 165

MidiMagic

Offline

Nearly a Senior Poster

Re: Polishing the code...

Jan 16th, 2009

You can put margins outside the ul or ol tags with css.

Daylight-saving time uses more gasoline

•

Join Date: Jul 2006

Posts: 44

Reputation: $DeViAnT\gAmEr is an unknown quantity at this point$

Solved Threads: 0

$DeViAnT\gAmEr's Avatar$

DeViAnT\gAmEr $DeViAnT\gAmEr is offline$ Offline

Light Poster

Re: Polishing the code...

Jan 26th, 2009

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

"All that is needed for evil to triumph, is good men to do nothing"

- Just remember kids: "it's not a bug - it's a feature!"

http://www.danasoft.com/sig/Icanseeyou286359.jpg