New Topic/Question
Reply
lastly, in the last line "Showing 1-6 of 88 reviews" should have a green background as shown in the image. I think i have the correct syntax but it is not showing anything. Thank you in advance
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<!--
Mateen Rehman
-->
<head>
<title> TMNT - Rancid Tomatoes </title>
<link rel="stylesheet" href="movie_begin.css" type="text/css"/>
</head>
<body>
<div class="top">
<img src="http://userpages.umbc.edu/~sampath/is448/hw2/rancid_banner.png" alt="banner"/>
</div>
<h1 class="movietitle">
TMNT (2007)
</h1>
<div class="main">
<div class="rating">
<!-- Insert Banner here and the percentage rating -->
<p class = "rottenBackGround">
<img src = "http://userpages.umbc.edu/~sampath/is448/hw2/rotten_big.png" height="90px" alt = "Rotten"/>
<img src = "http://userpages.umbc.edu/~sampath/is448/hw2/rotten_background.png" height="90px" width="425px" alt = "Rotten"/>
<span class = "percentage">32%</span>
</p>
<div>
<!--Review Number1-->
<p class = "quoteBox">
<img src= "http://userpages.umbc.edu/~sampath/is448/hw2/fresh.png" height="28px" width="28px" align="left" alt = "Fresh"/>
Ditching the cheeky, self-aware wink that helped to excuse the
concept's inherent corniness, the movie attempts to look polished and
'cool', but the been-there animation can't compete with the
then-cutting-edge puppetry of the 1990 live-action movie.
</p>
<p class = "review">
<img src = "http://userpages.umbc.edu/~sampath/is448/hw2/critic.png" height="35px" width="35px" align="left" alt = "Critic"/>
<em>Peter Debruge</em><br/>
Variety
</p>
<!-- Review2-->
<p class = "quoteBox">
<img src = "http://userpages.umbc.edu/~sampath/is448/hw2/fresh.png" height="28px" width="28px" align="left" alt = "Fresh"/>
TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of
new ones
</p>
<p class = "review">
<img src = "http://userpages.umbc.edu/~sampath/is448/hw2/critic.png" height="35px" width="35px" align="left" alt = "Critic"/>
<em>Todd Gilchrist</em><br />
IGN Movies
</p>
<!-- Review3-->
<p class = "quoteBox">
<img src = "http://userpages.umbc.edu/~sampath/is448/hw2/fresh.png" height="28px" width="28px" align="left" alt = "Fresh"/>
The striking use of image and motion allows each of its action sequences to leave an impression. It's
an accomplished, unpretentious restart to this franchise.
</p>
<p class = "review">
<img src = "http://userpages.umbc.edu/~sampath/is448/hw2/critic.png" height="35px" width="35px" align="left" alt = "Critic"/>
<em>Mark Palermo</em><br />
Coast (Halifax, Nova Scotia)
</p>
<!-- Review4 -->
<p class = "quoteBox">
<img src = "http://userpages.umbc.edu/~sampath/is448/hw2/rotten.png" height="28px" width="28px" align="left" alt = "Rotten"/>
A throughline of organized violence permeates "TMNT" as a baby step
toward preparing youngsters to become soldiers in America's never-ending
war on humanity.
</p>
<p class = "review">
<img src = "http://userpages.umbc.edu/~sampath/is448/hw2/critic.png" height="35px" width="35px" align="left" alt = "Critic"/>
<em>Cole Smithey</em><br />
ColeSmithey.com
</p>
<!-- Review5 -->
<p class = "quoteBox">
<img src = "http://userpages.umbc.edu/~sampath/is448/hw2/rotten.png" height="28px" width="28px" align="left" alt = "Rotten"/>
The turtles themselves may look prettier, but are no smarter; torn
irreparably from their countercultural roots, our superheroes on the
half shell have been firmly co-opted by the industry their creators once
sought to spoof.
</p>
<p class = "review">
<img src = "http://userpages.umbc.edu/~sampath/is448/hw2/critic.png" height="35px" width="35px" align="left" alt = "Critic"/>
<em>Jeannette Catsoulis</em><br />
New York Times
</p>
<!-- Review # 6 -->
<p class = "quoteBox">
<img src= "http://userpages.umbc.edu/~sampath/is448/hw2/rotten.png" height="28px" width="28px" align="left" alt ="Rotten"/>
Impersonally animated and arbitrarily plotted, the story appears to have been made up as the
filmmakers went along.
</p>
<p class = "review">
<img src = "http://userpages.umbc.edu/~sampath/is448/hw2/critic.png" height="35px" width="35px" align="left" alt = "Critic"/>
<em>Ed Gonzalez</em><br />
Slant Magazine
</p>
<!--End for review section-->
<!--the status bar at the end of the page -->
<p class = "statusBar"> Showing 1-6 of 88 reviews</p>
</div>
</div>
<div class="overview">
<p>
<img src = "http://userpages.umbc.edu/~sampath/is448/hw2/tmnt.png" alt ="TMNT"/>
</p>
<dl class = "style">
<dt class="dt">STARRING:</dt>
<dd>Mako<br />
Sarah Michelle Gellar</dd>
<dt class="dt">DIRECTOR:</dt>
<dd>Kevin Munroe</dd>
<dt class="dt">RATING:</dt>
<dd>PG</dd>
<dt class="dt">THEATRICAL RELEASE:</dt>
<dd>Mar 23, 2007 Wide</dd>
<dt class="dt">MOVIE SYNOPSIS:</dt>
<dd>After the defeat of their old arch nemesis, The Shredder, the Turtles have grown apart as a family.</dd>
<dt class="dt">MPAA RATING:</dt>
<dd>PG, for animated action violence, some scary cartoon images and mild language</dd>
<dt class="dt">RELEASE COMPANY:</dt>
<dd>Warner Bros.</dd>
<dt class="dt">GENRE</dt>
<dd>Action/Adventure, Comedies, Childrens, Martial Arts, Superheroes, Ninjas, Animated Characters</dd>
<dt class="dt">TRAILER</dt>
<dd><a href="http://www.rottentomatoes.com/m/teenage_mutant_ninja_turtles/flipbook.php?trailer=10011727&page=1">
<img src="http://userpages.umbc.edu/~sampath/is448/hw2/trailer_thumb.png" alt="TMNT Trailer Pic"/></a></dd>
<dt class="dt">OFFICIAL MOVIE SITE</dt>
<dd><a href="http://www.tmnt.com/">The Official TMNT Site</a></dd>
</dl>
</div>
</div>
</body>
</html>
My css
/**************
Mateen Rehman
**************/
/*Code that implements appearance detail 1 in homework handout */
body{
background-image: url(http://userpages.umbc.edu/~sampath/is448/hw2/background.png);
font-size: 8pt;
font-family:Verdana, Tahoma, sans-serif;
}
/*Code that implements appearance detail 4 in homework handout */
.main{
width: 800px;
margin: auto;
}
/*Code that implements appearance detail 5 in homework handout */
.rating{
width: 540px;
padding:0in;
background-color:#EFE1AB;
float: left;
}
/*Code that implements appearance detail 6 in homework handout */
.overview{
float: right;
width: 224px;
padding: 10px;
background-color: #A2B964;
font-size: 8pt;
font-family: Arial, sans-serif;
}
/*Code that implements appearance detail 2 in homework handout */
.top{
background-image: url(http://userpages.umbc.edu/~sampath/is448/hw2/rancid_background.png);
height: 50px;
}
/*Code that implements appearance detail 3 in homework handout */
.movietitle{
font-size: 24pt;
font-weight: bold;
font-family: Tahoma, Verdana, sans-serif;
text-align: center;
}
/* General purpose useful style tag */
.imgleft_nopadding{
float: left;
}
/**********************INSERT YOUR CODE HERE ONWARDS**********************************************/
/* Appearance detail: 7; Create the style to hold the banner rotten_background.png */
.rottonBackground{
background-image: url(http://userpages.umbc.edu/~sampath/is448/hw2/background.png);
background-repeat: repeat-x;
height: 83px;
margin: 0px;
}
.percentage{
font-size: 48pt;
font-weight: bold;
color: red;
font-family: Tahoma, Versana, sans-serif;
vertical-align: top;
float: top;
}
/* Appearance detail: 8; Create the style for the quote box */
.quoteBox{
font-size: 11px;
font-weight: bold;
margin-bottom: 5px;
margin: 20px 0px 5px 0px;
border-color: grey;
border: 2px gray solid;
padding: 8px;
background-color: #E1D697;
/* Appearance detail: 10; Create the style that formats how the reviewer's name is printed */
.review img{
float: left;
padding: 0px 5px 5px 0px;
}
/* Appearance detail: 11; Create the style that allows the separation between the reviewer's personal
info and the next element */
/*I have added this in question 8 since it made more sense. See .qouteBox */
/* Appearance detail: 12; Create the style that prints the status bar at the bottom of the screen */
.statusBar{
padding: 5px;
border: 2px green solid;
}
/* Appearance detail: 13; Specify the style of the <dt> element */
.dt{
font-weight: bold;
padding 0.5em;
}
MultiQuote
| 