1 Replies - 1489 Views - Last Post: 27 September 2012 - 11:37 AM

#1 Amateen  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 17
  • Joined: 23-February 08

Difficulty in fixing the border and getting a border around a text

Posted 26 September 2012 - 09:47 PM

Hey Guys, how are you all? I hope that everything is great. I am having a little difficulty in a project that i am working on. The project is near complete but i am running into couple small problems and can't seemed to figure them out. Hopefully you guys can point to right direction or the solution to this confusion of mine. The attached image is how is supposed to show up. My little problem one is that i don't know how to show the big percentage 32% back at the top next to rotten tomatoes sign as well as the rotten tomatoes and the percentage having a one solid green background.
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&amp;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;
	}



Is This A Good Question/Topic? 0
  • +

Replies To: Difficulty in fixing the border and getting a border around a text

#2 shezzy  Icon User is offline

  • D.I.C Head

Reputation: 27
  • View blog
  • Posts: 194
  • Joined: 28-January 07

Re: Difficulty in fixing the border and getting a border around a text

Posted 27 September 2012 - 11:37 AM

Using inline styling , I used to following to make it work while trying to not change your structure as much as possible... starting from line 23 to line 29.. I have also removed "percentage" , see below..


<div class="rating">
		<!-- Insert Banner here and the percentage rating -->
		<p class = "rottenBackGround" style="position:relative;background-color:green;">
        
		<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" style="position:absolute; top:8px;right:250px;" style="">32%</span>
		</p>



.percentage{
	font-size: 48pt;
	font-weight: bold;
	color: red;
	font-family: Tahoma, Versana, sans-serif;
		}


For the showing 1-68.. etc i changed:

		<p class = "statusBar" style="background-color:green;padding:5px;"> Showing 1-6 of 88 reviews</p>



Please vote up if this was Helpful.. thanks

This post has been edited by shezzy: 27 September 2012 - 11:47 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1