Charlotte's Design for the Internet

Thursday, 11 November 2010

http://kotaku.com/

Kotaku is a site that shows news on japan and gaming. they have a very large following and tend to get a majority of the "oddities" from Japan very quickly.

One of the main problems i can see with this website is the huge amount of white. I have a large screen resolution and because of that the content of Kotaku is squashed up in the middle of my screen. I understand that this wouldn't happen on smaller screen resolutions but website developers have to think of people who use desktops as well as those who have laptops. Desktop screens are getting bigger and bigger and especially gamers, who this site aim their content at, are known to have larger screens with bigger screen resolutions. This site could have utilized the CSS resizing functions to make this site look nice on all screens.

Sunday, 7 November 2010

http://www.watch-dragonball.com

This website is used to show people episodes of the anime "Dragon ball". It has a very simple design using only a very few images. It makes this website very fast to load on any browser. It has all the episodes put in by season and episode number making it easy for them to update and for the viewers to read/find the episode they want.

If I was to make it I would have put the seasons into separate pages though as some of them have up to 276 episodes so it makes the page feel a bit too long. Other then that it works well as a website.

Thursday, 4 November 2010

http://www.anilinkz.com/

Anilinkz is a website dedicated to showing viewers anime and cartoons of all types. It does this by embedding the videos from other websites directly into their own. By doing this they don't have to spend out on bandwidth costs or get fined for showing videos they don't have the right to show. It isn't a fool proof though as it often means that if a video goes down on another website they will no know about it until someone complains.
I find that one of the major things wrong with this website is the design. There is far too much going on and the banner at the top has too much colour.

If I was to make this site i would remake it with 5 colours in mind, all of whom are compatible with each other.

Wednesday, 3 November 2010

Prime Properties part 4

Index

<!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>Prime Properties</title>
<link rel="stylesheet" type="text/css" href="prime.css"/>
</head>

<body>
<div id="wrapper">
<h1>
<img src="primelogo.gif" alt="Prime Properties Logo" height="100" width="650" />
</h1>
<ul class="navBar">
<li><a href="index.html"><img src="primehomebtn.gif" alt="Home Page" height="25" width="107" /></a></li>
<li><a href="listings.html"><img src="primelistingsnav.gif" alt="Listings" height="25" width="107" /></a></li>
<li> <a href="financing.html"><img src="primefinancingnav.gif" alt="Financing" height="25" width="107" /></a></li>
<li> <a href="contact.html"><img src="primecontactnav.gif" alt="Contact" height="25" width="107"/></a></li>
</ul>

<div id="rightcolumn">
<p>Prime properties is prepared to market and sell your property.</p>
<p>The philosophy of Prime Properties is to promote our clients, not ourselves.</p>

<p>We can also help you find the property that meets your needs:</p>
<ul>
<li>location</li>
<li>price</li>
<li>features</li>
</ul>
</p>
<p class="contact">Prime Properties<br>
3055 Bode Road<br>

Schaumburg, IL 60194<br>
</p>
<p>847-555-5555</p>
<div>
<div id="footer">
<a href="index.html">Home</a>
<a href="listings.html">Listings</a>
<a href="financing.html">Financing</a>
<a href="contact.html">Contact</a></div>

</ul>
</div>
<div id="footer">Copyright © 2011 Prime Properties<br />

    <a href="mailto:charlotte@gmail.com">charlotte@gmail.com</a></div> </div>
</body>
</html>

CSS

body {    background-color: #003366;
    color: #003300;
    font-family: Arial, Helvetica, sans-serif;
    background-image:url('images/primevertical.png');

}

h2 {
    background-color: #ffffcc;
     color: #003366;
}

h3 {
    background-color: #ffffcc;
     color: #006600;
}

#wrapper {
    width: 680px;
    min-width: 680px;
    margin: 0 auto;
    background-color: #ffffcc;
    color: #003300;
    padding-left: 10px;
}

img {    border: none;
}

.nav {    font-size: .70em;
}

.contact{    font-weight: bold;
    font-size: .85em;
    font-family: "Times New Roman", serif;
}

#footer {     font-size: .60em;
    font-style: italic;
}

.property{ padding-right:30px;
    padding-top:5;

}

#leftcolumn {    float: left;
    width: 150px;
}

#rightcolumn {    margin-left: 170px;
    padding: 0 20px 20px 0;
}

.navBar { float: left;
}

Listings

<!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>Prime Properties</title>
<link rel="stylesheet" type="text/css" href="prime.css"/>
</head>

<body>
<div id="wrapper">

<h1>
<img src="primelogo.gif" alt="Prime Properties Logo" height="100" width="650" />
</h1>
<ul class="navBar">
<li><a href="index.html"><img src="primehomebtn.gif" alt="Home Page" height="25" width="107" /></a></li>
<li><a href="listings.html"><img src="primelistingsnav.gif" alt="Listings" height="25" width="107" /></a></li>
<li> <a href="financing.html"><img src="primefinancingnav.gif" alt="Financing" height="25" width="107" /></a></li>
<li> <a href="contact.html"><img src="primecontactnav.gif" alt="Contact" height="25" width="107"/></a></li>
</ul>

<p><h2>Listings</h2>
<h3>Schaumburg Colonial</h3>
<p>This single family home is a two-story colonial on a large corner lot.</p>
<a href="schaumburg.jpg"><img src="schaumburgthumb.jpg" alt="Schaumburg Colonial" align="left" height="113" width="150" class="property" /></a>
<ul>

<li>Four bedrooms</li>
<li>Two and 1/2 baths</li>
<li>Finished family room</li>
<li>Two car garage</li>
<li>Listing #3432535</li>
</ul><br />
<h3>Libertyville Condo Listing</h3>
<p>New construction condo in downtown Libertyville</p><br />
<a href="libertyville.jpg"><img src="libertyvillethumb.jpg" alt="Libertyville Condo" align="left" height="113" width="150" class="property" /></a>
<ul>

<li>Close to train</li>
<li>Two bedrooms</li>
<li>Two baths</li>
<li>Two indoor parking spaces</li>
<li>Listing #3432432</li>
</ul><br />

<div class="nav"><a href="index.html">Home</a> <a href="listings.html">Listings</a> <a href="financing.html">Financing</a> <a href="contact.html">Contact</a></div>
<div class="contact">
</p>
Prime Properties<br>
3055 Bode Road<br>
Schaumburg, IL 60194<br>
<p>847-555-5555</p></div>

<div class="nav"><a href="index.html">Home</a> <a href="listings.html">Listings</a> <a href="financing.html">Financing</a> <a href="contact.html">Contact</a></div>

    <div id="footer">Copyright © 2011 Prime Properties<br />
    <a href="mailto:charlotte@gmail.com">charlotte@gmail.com</a></div> </div></div></div>
</body>
</html>

Financing

<!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>Prime Properties</title>
<link rel="stylesheet" type="text/css" href="prime.css"/>
</head>

<body>
<div id="wrapper">
<h1>
<img src="primelogo.gif" alt="Prime Properties Logo" height="100" width="650" />
</h1>
<ul class="navBar">
<li><a href="index.html"><img src="primehomebtn.gif" alt="Home Page" height="25" width="107" /></a></li>
<li><a href="listings.html"><img src="primelistingsnav.gif" alt="Listings" height="25" width="107" /></a></li>
<li> <a href="financing.html"><img src="primefinancingnav.gif" alt="Financing" height="25" width="107" /></a></li>
<li> <a href="contact.html"><img src="primecontactnav.gif" alt="Contact" height="25" width="107"/></a></li>
</ul>

    <br />
    <p>We work with many area mortgage and finance companies.</p>

    <h3> Mortgage FAQ</h3>

    <dl>
    <dt>What amount of mortgage do I qualify for?</dt>
<dd>The total basic monthly housing cost is normally based on 29% to 41% of
your gross monthly income.</dd>
<dt>Which percentage is most often used?</dt>
<dd>The percentage used depends on the lending institution and type of financing.</dd>
<dt>How do I get started?</dt>
<dd>Contact us today to help you arrange financing for your home.</dd>
    </dl>


<div class="contact">
</p>
Prime Properties<br>
3055 Bode Road<br>
Schaumburg, IL 60194<br>
<p>847-555-5555</p></div>

<div class="nav"><a href="index.html">Home</a> <a href="listings.html">Listings</a> <a href="financing.html">Financing</a> <a href="contact.html">Contact</a></div>

    <div id="footer">Copyright © 2011 Prime Properties<br />
    <a href="mailto:charlotte@gmail.com">charlotte@gmail.com</a></div> </div>
</body>
</html>

Pasha Painter part 4

Index

<!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>Pasha The Painter</title>
<link href="painter.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<h1 id="logo"><img src="painterlogo.gif" alt="Pasha the Painter" width="620" height="120" /></h1>
<div id="leftcolumn">
<ul>
     <li><a href="index.html">Home</a></li>

     <li><a href="services.html">Services</a></li>
     <li><a href="testimonials.html">Testimonials</a></li>
     <li><a href="estimates.html">Estimates</a></li>
     <li><a href="store.html">Store</a></li>
</ul>
</div>
<div id="rightcolumn">
<p>We will work with you to create the home of your dreams.</p>

<ul class="category">
<li>Interior Painting</li>
<li>Exterior Painting</li>
<li>Wallpaper Removal</li>
<li>Wallpaper Installation</li>
<li>Drywall</li>
</ul>

<div id="footer">Copyright © 2011 Pasha the Painter<br />

<div id="footer">Copyright © 2011 Pasha the Painter<br />
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a></div>
</div></div></div>
</body>
</html>

CSS

body { background-color: #ffffff;
       color: #000000;
       font-family: Verdana, Arial, sans-serif;
}
.logo { background-color:#ffffff;
        color:#336633;
      font-family: Georgia, "Times New Roman", serif;
}
.category {background-color:#ffffff;
           color:#336633;
           font-family: Georgia, "Times New Roman", serif;
           font-size: 1.2em;
          font-weight:bold;
}

#footer { font-size: .60em;
          font-style: italic;
}

img { border:0;
      padding-right:10px;
}

h2 { margin: -10px 5px 5px 0px;
    padding: 5px;
    font-family: Verdana, sans-serif;
    font-size: .90em;
    float: left;
    width: 200px;
    background-color: #336600;
    color: #ffffff;
    text-transform: uppercase;
}
.desc { padding: 5px 0 20px 0;
border-top: 1px solid #336600;
}
#container { width: 620px; }

#leftcolumn {float: left;
             width: 150px;
}
div#leftcolumn a { font-weight: bold;
                   text-decoration: none;
}
#leftcolumn a:link { color: #336633; }

.floatright { float: right;
              padding: 5px;

}

Services

<!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>Pasha The Painter</title>
<link rel="stylesheet" type="text/css" href="painter.css"/>
</head>

<body>
<div id="container">
<h1 id="logo"><img src="painterlogo.gif" alt="Pasha the Painter" width="620" height="120" /></h1>
<div id="leftcolumn">
<ul>
     <li><a href="index.html">Home</a></li>

     <li><a href="services.html">Services</a></li>
     <li><a href="testimonials.html">Testimonials</a></li>
     <li><a href="estimates.html">Estimates</a></li>
     <li><a href="store.html">Store</a></li>
</ul>
</div>
<div id="rightcolumn">
<table>

<tr>
    <td class="service">Interior Services</td>
</tr>
<tr>
    <td>If you need it painted, textured, or papered, Pete the Painter can do it!</td>
</tr>
<tr>
    <td class="service">Exterior Services</td>

</tr>
<tr>
    <td>If you need it washed, painted, stained, or just touched up, Pete the Painter can do it!</td>
</tr>
<tr>
    <td class="service">Painting</td>
</tr>
<tr>

    <td>Pete has the most dependable and professional painting staff in the area and uses only quality paint.</td>
</tr>
<tr>
    <td class="service">Wallcovering</td>
</tr>
<tr>
    <td >Our design specialists are experts at applying wallpaper and other wallcoverings.</td>

</tr>
</table>
<br />
<div id="footer">Copyright © 2011 Pasha the Painter<br />

    <a href="mailto:charlotte@gmail.com">charlotte@gmail.com</a></div></div>
</body>
</html>

Testimonials

<!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>Pasha The Painter</title>
<link rel="stylesheet" type="text/css" href="painter.css"/>
</head>

<body>
<body>
<div id="container">
<h1 id="logo"><img src="painterlogo.gif" alt="Pasha the Painter" width="620" height="120" /></h1>
<div id="leftcolumn">
<ul>
     <li><a href="index.html">Home</a></li>

     <li><a href="services.html">Services</a></li>
     <li><a href="testimonials.html">Testimonials</a></li>
     <li><a href="estimates.html">Estimates</a></li>
     <li><a href="store.html">Store</a></li>
</ul>
</div>
<div id="rightcolumn">
<h2>Painting</h2>

<p class="desc"><a href="paintroom.jpg."><img src="paintroom_small.jpg" alt="Painted room" class="floatright" /></a>
We were selling our home and needed a room painted quickly. Pete's team promptly came out and gave an estimate. It was quite reasonably priced. They started and finished the very next day! — The Morris Family</p>

<h2>Remodeling</h2>
<p class="desc"><a href="undecorate.jpg"><img src="undecorate_small.jpg" alt="Plain room" class="floatright" /></a>
We needed to "undecorate" a room — the previous owners had been a little too creative. Pete's team provided an estimate, promptly began work, and within a few days our room was looking great! — The Felkes</p>

<div id="footer">Copyright © 2011 Pasha the Painter<br />

    <a href="mailto:charlotte@gmail.com">charlotte@gmail.com</a></div>
</div>
</body>
</html>

Fish Creen part 4

Index

<!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>Fish Creek Animal Hospital</title>
<link rel="stylesheet" type="text/css" href="fishcreekcss.css"/>
</head>

<body>
<body>
<div id="wrapper">
<h1><a href="index.html"><img src="fishcreeklogo.gif" alt=" Fish Creek Logo" width="600 height="77" border="0"/> </a></h1>

<div class="imgnav"><a href="index.html"><img src="home.gif" alt="Home" width="127" height="27" border="0"/></a><a href="services.html"><img src="services.gif" alt="Services" width="127" height="27" border="0" /></a><a href="askvet.html"><img src="askthevet.gif" alt="Ask the Vet" width="127" height="27" border="0" /></a><a href="contact.html"><img src="contact.gif" alt="Contact" width="127" height="27" border="0" /></a></div

<dl>
    <dt><span class="category">Full Service Facilty</span></dt>

    <dd>Veternarians and staff are on duty 24 hours a day, 7 days a week. </dd>
    <dt><span class="category">Years of Experience</span></dt>
    <dd>Fish Creek Veternarians have provided quality, dependable care for your beloved animals since 1984. </dd>
    <dt><span class="category">Open Door Policy</span></dt>
    <dd>Our professionals welcome owners to stay with their pets during any medical procedures.</dd>
</dl>
<p><small>1-800-555-5555<br />

1242 Grassy Lane <br />
Fish Creek, WI 55534 </small></p>

<p><strong><a href="index.html">Home</a>     <a href="services.html">Services</a>    <a href="askvet.html">Ask the Vet</a>    <a href="contact.html">Contact</a></strong></p>

<p><small><em>Copyright ©2008 Fish Creek Animal Hospital <br />

<a href="mailto:charlotte@gmail.com">charlotte@gmail.com</a></div></div>
</body>
</html>

CSS

body {background-color: #6699ff;
           color: #d5e3ff;
           font-family: verdana, arial, sans-serif;

}
h1   {text-align: center;
}
.nav {font-weight: bold;
    background-color: #6699ff;
                  color: #003366;
                  font-size: 1.1em;

}
.imgnav {text-align: center;
    border="0";
}
.category {font-weight: bold;
                  background-color: #6699ff;
                  color: #003366;
                  font-size: 1.1em;
}

#footer { font-size: .70em;
               font-style: italic;

}
#wrapper { margin-left: auto;
                   margin-right: auto;
       width: 700px;
}

Services

<!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>Fish Creek Animal Hospital</title>
<link rel="stylesheet" type="text/css" href="fishcreekcss.css"/>
</head>

<body>
<div id="wrapper">
<h1><a href="index.html"><img src="fishcreeklogo.gif" alt=" Fish Creek Logo" width="600 height="77" border="0"/> </a></h1>

<div class="imgnav"><a href="index.html"><img src="home.gif" alt="Home" width="127" height="27" border="0"/></a><a href="services.html"><img src="services.gif" alt="Services" width="127" height="27" border="0" /></a><a href="askvet.html"><img src="askthevet.gif" alt="Ask the Vet" width="127" height="27" border="0" /></a><a href="contact.html"><img src="contact.gif" alt="Contact" width="127" height="27" border="0" /></a></div>

<ul>
    <li><span class="category">Medical Services</span><br />We offer state-of-the-art equipment and technology.</li>

    <li><span class="category">Surgical Services</span><br />Full range of surgical procedures including orthopedics and emergency surguries.</li>
    <li><span class="category">Dental Care</span><br />A dental exam can determine whether your pet needs preventive care such as scaling and polishing.</li>
    <li><span class="category">House Calls</span><br />The elderly, physically challenged, and multiple pet households often find our in-home veternary service helpful and convenient.</li>
    <li><span class="category">Emergencies</span><br />At least one of our doctors is on call every day and every night.</li>

<p><small>1-800-555-5555<br />
1242 Grassy Lane <br />
Fish Creek, WI 55534 </small></p>

<p><strong><a href="index.html">Home</a>     <a href="services.html">Services</a>    <a href="askvet.html">Ask the Vet</a>    <a href="contact.html">Contact</a></strong></p>

<div id="footer">Copyright ©2008 Fish Creek Animal Hospital <br />

<a href="mailto:charlotte@gmail.com">charlotte@gmail.com</a></div>
</body>
</html>

Ask the Vet

<!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>Fish Creek Animal Hospital</title>
<link rel="stylesheet" type="text/css" href="fishcreekcss.css"/>
</head>

<body>
<h1><a href="index.html"><img src="fishcreeklogo.gif" alt=" Fish Creek Logo" width="600 height="77" border="0"/> </a></h1>

<div class="imgnav"><a href="index.html"><img src="home.gif" alt="Home" width="127" height="27" border="0"/></a><a href="services.html"><img src="services.gif" alt="Services" width="127" height="27" border="0" /></a><a href="askvet.html"><img src="askthevet.gif" alt="Ask the Vet" width="127" height="27" border="0" /></a><a href="contact.html"><img src="contact.gif" alt="Contact" width="127" height="27" border="0" /></a></div
><div id="wrapper">

<p><a href="contact.html">Contact</a> us if you have a question that you would like answered here.</p>


<dl>
<dt class="category">Question: Our dog, Sugar, likes to eat whatever the kids are snacking on. Is it OK for the dog to eat chocolate.</dt>

<dd>Answer: Chocolate is toxic for dogs. Please do not feed your dog chocolate. Try playing a game with your children - when you feed them people treats they can feed Sugar dog treats.</dd>
</dl>

<div id="footer">
<a href="index.html">Home</a> <a href="services.html">Services</a> <a href="askvet.html">Ask the Vet</a> <a href="contact.html">Contact</a> <br />

Copyright © 2008 Fish Creek Animal Hospital<br />
<a href="mailto:charlotte@gmail.com">charlotte@gmail.com</a></div>
</body>
</html>

JavaJam part 4

Index

<!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>JavaJam Coffee House</title>
<link rel="stylesheet" type="text/css" href="javajamcss.css"/>
</head>

<body>
<div id="container">
<h1 id="logo">
<object width="620" height="117">
<img src="javalogo.gif">
<embed src="javalogo.swf" width="620" height="117">

</embed>
</object>
</h1>
<div id="nav">
<ul>
<li><a href="index.html" title="homepage">Home</a></li>
<li><a href="menu.html" title="menu page">Menu</a></li>
<li><a href="music.html" title="music page">Music</a></li>
<li><a href="jobs.html" title="jobs page">Jobs</a></li>
</ul>
</div>
<div id="content">
<p>

Follow the winding road to JavaJam...
<img src="windingroad.jpg" class="floatright" alt="winding road" title="winding road" height="156px" width="333px" />
</p>
<ul>
<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night</li>
</ul>
<p>
12312 Main Street
<br/>
Mountain Home, CA 93923

<br/>
1-888-555-5555
</p>
</div>
<div id="footer">
Copyright © 2011 Javajam Coffee House
<br/>

<a href="mailto:charlotte@gmail.com">charlotte@gmail.com</a></div></div>
</body>
</html>

CSS

body { background-image: url(background.gif);
    color: #330000;
    font-family: verdana, arial, sans-serif;
    margin-left: auto;
    margin-right: auto;
    width: 80%;

}
#container { background-color: #e8d882;
    color: #000000;
    border: 2px double #000000;
    min-width: 700px;
}
img { border: none;
}
#logo { background-color: #ccaa66;
    color: #000000;
    text-align: center;
    margin: 0;
    border-bottom: 2px double #000000;
}
#content { margin-left: 150px;
    background-color: #f1e8b0;
    color: #000000;
    padding: 10px 20px;
    overflow: auto;
}
.details { padding-left: 20%;
    padding-right: 20%;
}
h1 { background-color: #ccaa66;
    color: #000000;
    text-align: center;
}
.floatright { padding-left: 20px;
    float: right;
}
#nav { text-align: center;
    float: left;
    width: 100px;
    padding-top: 10px;
}
#nav a { text-decoration: none;
    margin: 15px;
    text-align: center;
    display: block;
}
#nav a:hover { color: #000066;
    text-decoration: none;
}
#nav li {list-style-type: none;

}
h2 { text-transform: uppercase;
    background-color: #ffffcc;
    color: #663300;
    font-size: 1.2em;
    border-bottom: 1px solid #000000;
    margin-right: 20px;
}

#footer { background-color: #ccaa66;
    color: #000000;
    font-size: .60em;
    font-style: italic;
    text-align: center;
    border-top: 2px double #000000;
    padding-top: 20px;
    padding-bottom: 20px;
}

Menu

<!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>JavaJam Coffee House</title>
<link rel="stylesheet" type="text/css" href="javajamcss.css"/>
</head>

<body>
<div id="container">
<h1 id="logo">
<img src="javalogo.gif" alt="java logo" title="javajam logo" width="619px" height="117px" />
</h1>
<div id="nav">

<ul>
<li><a href="index.html" title="homepage">Home</a></li>
<li><a href="menu.html" title="menu page">Menu</a></li>
<li><a href="music.html" title="music page">Music</a></li>
<li><a href="jobs.html" title="jobs page">Jobs</a></li>
</ul>
</div>
<div id="content">
<table>
<tr class="altrow">
<td class="effectt">Just Java</td>
<td>Regular house blend, decaffinated coffee, or flavor of the day.

<br/>
Endless Cup $2.00</td>
</tr>
<tr>
<td class="effectt">Cafe au Lait</td>
<td>House blened coffee infused into a smooth, steamed milk.
<br/>
Single $2.00 Double $4.00</td>
</tr>
<tr class="altrow">
<td class="effectt">Iced Cappuccino</td>
<td>Sweetened espresso blended with icy-cold milk and served in a chilled glass.
<br/>

$4.75</td>
</tr>
</table>
</div>
<div id="footer">
Copyright © 2011 Javajam Coffee House
<br/>

<a href="mailto:charlotte@gmail.com">charlotte@gmail.com</a></div>
</body>
</html>

Music

<!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>JavaJam Coffee House</title>
<link rel="stylesheet" type="text/css" href="javajamcss.css"/>

</head>

<body>
<div id="container">
<h1 id="logo">
<img src="javalogo.gif" alt="java logo" title="javajam logo" width="619px" height="117px" />
</h1>
<div id="nav">

<ul>
<li><a href="index.html" title="homepage">Home</a></li>
<li><a href="menu.html" title="menu page">Menu</a></li>
<li><a href="music.html" title="music page">Music</a></li>
<li><a href="jobs.html" title="jobs page">Jobs</a></li>
</ul>
</div>
<div id="content">
<p>
The first Friday night each month at JavaJam is a special night.
<br/>
Join us from 8pm to 11pm for some music you won't want to miss.
</p>

<h2>
January
</h2>
<p class="details">
<a href="melanie.jpg" title="large picture melanie"><img src="melaniethumb.jpg" title="small picture melanie" alt="melanie" class="floatright" height="80px" /></a>
Melanie Morris entertains
<br/>
with her melodic folk style.
<br/>
Check out the podcast!
<br/>
CDs are now available.
</p>
<h2>
February
</h2>
<p class="details">

<a href="greg.jpg" title="large picture greg"><img src="gregthumb.jpg" title="small picture greg" alt="greg" class="floatright" height="80px" /></a>
Tahoe Greg&#39s back from his tour.
<br/>
New Songs
<br/>
<a href="greg.mp3" title="New Song">New Song</a>
<br/>
New Stories
<br/>
CDs are now available.
</p>
</div>
<div id="footer">
Copyright © 2011 Javajam Coffee House

<br/>

<a href="mailto:charlotte@gmail.com">charlotte@gmail.com</a></div>
</body>
</html>

Contents