2 Replies - 679 Views - Last Post: 29 December 2012 - 11:30 PM

#1 Derek M  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 07-August 12

Getting images to change size depending on resolution of screen.

Posted 29 December 2012 - 08:22 PM

I am working on a website right now but a lot of this is over my head. I have a header that goes across the top of the page, right under the home, search, forums, etc buttons. What I want to happen is have the image stay a certain ratio. Because on my computer screen when you look at it, it looks correct. When I use the computers in school, it overlaps with the content on the bottom. I want the image to stay above the words on the bottom. Here is a link to the site:
MLU Fan Club
Here is all the code to the homepage right now in html and css. I am using a mod on mybb to add pages like my homepage, so the styles and colors and everything is in php but we don't it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
td {
	text-decoration: none;
	border: none;
}
img {
	text-decoration: none;
	border: none;
}
font {
	font-family: Verdana;
	font-size: 11px;
	color: #606060;
	text-decoration: none;
	border: none;
}
a {
	font-family: Tahoma;
	font-size: 10px;
	color: #FFAA00;
	text-decoration: underline;
	border: none;
}
-->
</style>
</head>

<body leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0">

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
	
	

	<div style='position:absolute;z-index:0;left:-150;top:-50;width:80%;height:10%'>
  <img src='onwards.jpg' style='width:100%;height:15% alt='[MLU]' />
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
	
	<tr>
		<td height="100%">
			<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td width="33" bgcolor="#FFFFFF">
						<table width="33" height="100%" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td height="100%" background="images/bg.jpg"></td>
							</tr>
							<tr>
								<td height="71"></td>
							</tr>
						</table>
					</td>
<br />
<br />
<br />
<br />
					<td width="295">
						<table width="295" height="100%" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td valign="top" style="padding-right:30">
									<font>
<img src="IMG950107.jpg" alt="Derek Medina" width="200" height="300">

<b>Derek Medina</b> is a High School Ultimate player. He was born in Peabody, Massachusetts but currently resides in Woburn, Massachusetts. He discovered Ultimate between 8th 
grade and freshman year. He has been obsessed ever since. He has played many sports but his favorite is Ultimate. He was fascinated by the idea of professional 
ultimate but felt the AUDL was not suitable for the job. When the MLU was announced he was convinced that the MLU will do a better job. He founded the MLU Fan Club
October 29, 2012. He currently works very hard on expanding has created the twitter account and website December 16, 2012. He as well as the rest of us are excitedly 
anticipating the inaugural season!
 
				
&nbsp;
</font>
								</td>
							</tr>
							<tr>
								<td valign="top" style="padding-top:10;padding-bottom:10"></td>
							</tr>
							<tr>
								<td valign="top">
									<table width="250" border="0" cellpadding="0" cellspacing="0">
										<tr>
											
												<font>
													
												</font>
											</td>
										</tr>
									</table>
								</td>
							</tr>
							<tr>
								<td height="100%"></td>
							</tr>
							<tr>
								<td height="71"></td>
							</tr>
						</table>
					</td>
					<td width="30" bgcolor="#FFFFFF">
						<table width="16" height="100%" border="0" cellpadding="0" cellspacing="0">
							<tr>
								
							</tr>
							<tr>
								<td height="30"></td>
							</tr>
						</table>
					</td>
					<td width="436">
						<table width="436" height="100%" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td valign="top" style="padding-right:30;padding-bottom:20">
									<font>
										<B>Ultimate.</B> It is the ultimate sport. What makes a sport ultimate? Does it have to do with needing mental and physical capabilities?                                               
                                Is it the fact that every play there is a chance of something amazing happening? Or maybe its because the scoring is significant
                                but doesn't happen every second. The feel of the disc flying through the air, and then when your receiver catches it and gets the
                                game winning point and you go home a happy ultimate player. Whatever it is the MLU is here to make it professional and we are here
                                to capture every second of it. 
<br><br>
Follow us on these websites:
<br />
<br />
<b><a href="www.mlufanclub.tk"><font size="3" color = "#3300FF"> MLU Fan Club Website</ font></a>
<br />
<a href="twitter.com/mlufanclub"><font size="3" color = "#3300FF"> MLU Fan Twitter Account</ font></a>
<br />
<a href="facebook.com/pages/MLU-Fan-Club/546061978744197?ref=hl"><font size="3" color = "#3300FF"> MLU Fan Facebook Page</ font></a>
<b>
<br />
<br />
<br />

									</font>
								</td>
							</tr>
							<tr>
								<td valign="top">
									<table width="500" border="0" cellpadding="0" cellspacing="0">
										<tr>
											<td width="0" valign="top">
												<table width="232" border="0" cellpadding="0" cellspacing="0">
														<tr>
															<td valign="top" style="padding-right:15">
																<table width="232" border="0" cellpadding="0" cellspacing="0">
																	<tr>
																		<td width="19" valign="top"></td>
																		<td><font style="color:#7595B2"><b>MLU vs Audl vs nexgen</b></font><br></td>
																	</tr>
																</table>
															</td>
														</tr>
														<tr>
															<td style="padding-right:15" valign="top">
																<font>
<b>

</b> 

Ultimate has been around since the 60's. And now fans of the sport are screaming for professional ultimate to be a thing. Thanks to the AUDL, MLU,
and now possibly nexgen, it is a thing. While not a mainstream sport like football or basketball, Professional ultimate is starting, but with the 
possibility of three leagues it can get confusing. We are here to help you understand whats going on!

												
</font></td>
<td width="232">
<table width="232" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" style="padding-right:1;padding-left:1">
	<table width="232" border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td><font style="color:#7595B2"><b>What the rules might look like</b></font><br></td>
</tr>
</table></td>
</tr>


<tr>
<td style="padding-right:05;padding-left:1" valign="top"><font>When a sport becomes professional, things must change. That is a fact. Sure, things like players making calls instead of refs might enhance the
"spirit of the game", but it is going to keep ultimate from being taken seriously. Back in the late 60's into the early 1990's ultimate was looked at
as though it was a game for only hippies and dog-ownners. Today, even if it's not the biggest sport, it is taken very seriously, and now it is at 
a professional level, and when a sport turns professional, it garners national attention. I'm fairly sure not having refs would be negatively portrayed
as a sport that shouldn't be professional.</font>
<br />
<br />

<a href="http://mlufanclub.netii.net/misc.php?page=What_the_rules_might_look_like"><font size="4" color="red"><B>Read More</B></font></a>


</td>
</tr>

</table></td>
</tr></table>											</td>
										</tr>
									</table>
								</td>
							</tr>
							<tr>
								<td height="100%"></td>
							</tr>
							
							<tr>
								<td height="30"></td>
							</tr>
						</table>
					</td>
					<td width="100%"></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td height="30" bgcolor="#FFFFFF"></td>
	</tr>
	
	<tr>
		<td height="49" bgcolor="#A6242" valign="top" style="padding-top:10;padding-left:150"><font style="color:#000000;font-family:Tahoma;font-size:10px">2013 (c) Copyright MLU Fan Club. All rights reserved. Read <a href="">Legal Policy</a> and <a href="">Privacy Policy</a>.</font>
<div </a></div>
		
		</td>
	</tr>
</table>

<map name="Map">
  <area shape="circle" coords="33,43,12" href="#">
  <area shape="circle" coords="22,77,12" href="#">
  <area shape="circle" coords="12,112,12" href="#">
</map>
<map name="Map2">
  <area shape="rect" coords="24,3,60,39" href="#">
  <area shape="rect" coords="74,3,112,39" href="#">
  <area shape="rect" coords="123,4,163,40" href="#">
  <area shape="rect" coords="175,4,209,42" href="#">
  <area shape="rect" coords="225,4,261,41" href="#">
  <area shape="rect" coords="275,5,309,40" href="#">
  <area shape="rect" coords="319,4,366,38" href="#">
  <area shape="rect" coords="376,4,412,41" href="#">
  <area shape="rect" coords="427,4,462,38" href="#">
  <area shape="rect" coords="469,4,512,40" href="#">
  <area shape="rect" coords="522,3,564,41" href="#">
  <area shape="rect" coords="573,3,609,40" href="#">
  <area shape="rect" coords="619,3,659,39" href="#">
  <area shape="rect" coords="670,4,707,41" href="#">
  <area shape="rect" coords="713,5,753,40" href="#">
</map>
</body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: Getting images to change size depending on resolution of screen.

#2 mgaines2  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 74
  • Joined: 06-December 12

Re: Getting images to change size depending on resolution of screen.

Posted 29 December 2012 - 10:55 PM

Try making their positions relative as apposed to absolute.
Was This Post Helpful? 0
  • +
  • -

#3 trichardson  Icon User is offline

  • New D.I.C Head

Reputation: 3
  • View blog
  • Posts: 9
  • Joined: 02-December 12

Re: Getting images to change size depending on resolution of screen.

Posted 29 December 2012 - 11:30 PM

Because you have specified a hard width property for a the table below you must set a min width for the div containing the top image. This will cause the browser to stop resizing the image once it gets to a specified width.

<div style='position:absolute;z-index:0;left:-150;top:-50;width:80%;height:10%;min-width:794px;'>
  <img src='onwards.jpg' style='width:100%;height:15% alt='[MLU]' />
</div>



I added the width from the cells in the lower table: 33, 295, 30, and 436.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1