HTML - Image Resizing As Perctage Of Screen Size

Hello Folks,

Okay, I am trying to finally master this. I am working with a CSS Joomla layout that has some flash as main content (for images). I would like for this layout to resize based on the visitors screen size. I've played around with the % in width and so-forth. However my embedded Flash starts to scoot around the page as I change the size of the window. Can someone guide me on exactly how to do this so that "all" the info scales and stays in place. I am assuming that there will be an issue for the site getting really big if the person uses a massive screen (say 27inch plus) In that case how do you limit the size?

Any help will be most appreciated.

Ok, my website is best viewed at 1024x768, is there any way that i can somehow encode a popup that gives the message and an option for it to automaticaly change the screen resoloution to 1024x768?

Many Thanks, Narc

Hello, im trying to set my screen size with a div tag to 1024x768

any help would be very helpful and i'd be very thankful

Hi all

i have my website all complete but the one thing i would like to do is put an image on the opening page that fills the screen.. no matter what screen resolution someone is on... i have seen this on sites before but cannot remember where it was.

has anyone got any idea how i coul do this?

any help would be much apreciated

Thanks

Code:

Solved Now

Hey guys how to adjust any page to the particular screen (i.e., different screens) .... please help me out


Thanks

Is there a way to ensure that text size renders well even if screen resolution is extreme?

Thanks...

Hey I made the site princeoflayouts.com, and am having trouble with my last step. The resolution size of the screen. On my laptop the website looks perfect, but then on my schools computers the whole web site is out of whack. I tried to mess with the margins but that didn't help the issue. I used dreamweaer 8 to build the site and have seen the section where it has screen resolution but it only allows me to click it and nothing can be applied or changed.

If you have any advice please tell me. I have a book that helped me through the whole process but this section was not in there.

Thank You

I am trying to create a table that does not change size depending on what the screen resolution is set to. I know that it is good practice to use percentages, however, as I am used to using pixels, I am finding it frustrating as I don't get the desired table size I want when the resolution is changed

Here is an example of the table, if anyone can help me with the changes, it would be much appreciated or if you could point me in the direction of a tutorial that makes the table resize to reflect the chosen resolution preference, that too would be welcomed

Code:

<font color="#FFFFFF" face="Verdana" size="2">
<table width="810px" align="center" border="0" cellspacing="0" cellpadding="0">
  <tr bgcolor="#000033"> 
    <td height="130px" colspan="2"><div align="center">Header</div></td>
  </tr>
  <tr> 
    <td width="130px" height="130px" bgcolor="#000066"><div align="center">Login</div></td>
    <td width="680px" height="130px" bgcolor="#000099"><div align="center">Image</div></td>
  </tr>
  <tr bgcolor="#0000CC"> 
    <td height="80px" colspan="2"><div align="center">Page Title</div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center"></div></td>
    <td rowspan="15" bgcolor="#0066FF"><div align="center">Body</div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center">Link 1</div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center">Link 2</div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center">Link 3</div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center">Link 4</div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center">Link 5</div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center">Link 6</div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center">Link 7</div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center">Link 8</div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center">Link 9</div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center">Link 10</div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center">Link 11</div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center">Link 12</div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center"></div></td>
  </tr>
  <tr> 
    <td bgcolor="#0033FF"><div align="center"></div></td>
  </tr>
  <tr bgcolor="#003399"> 
    <td height="30px" colspan="2"><div align="center">Footer</div></td>
  </tr>
</table></font>

Thanks in advanced

hi guys, I have this code he

Code:

<!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=windows-1251" />
<title>Under construction</title>
</head>

<body style="background-color:#121212">
<div style="background: url(under_construction.jpg) no-repeat center top ;
    height: 1024px;
    margin: auto;">
</div>
</body>
</html>

the image under_construction.jpg is basically the page itself, it has a size of 1680x1024. As of right now the page doesn't adjust automatically to the users screen. Please help me change the code so that it'll adjust automatically to the user screen

All:

Working to update a previously designed website.

Original design uses an <img> tag to create a top banner and another <img> tag
to create a side banner.

In each case there are mapped coordinates on each banner as links for the subsequent pages.

Basic page design is as follows:

Code:

<table>
   <tr>
      <td>
         <img usemap="Map1">
         <map name="Map1">
            <area>
            <area>
            <area>
         </map>
      </td>
   </tr>
</table>
<table>
   <tr>
      <td>
         <img name="Map2">
         <map>
            <area>
            <area>
            <area>
         </map>
      </td>
      <div>
         ***PAGE CONTENT***
      </div>
   <tr>
<table>

The challenge is that the [PAGE CONTENT] varries in length througout the site causing some pages
to be much longer or shorter than others.

This causes some inconsistencey in the relationship between the side banners height and the
page content.

In other words in some cases the banner is exceptionally longer than the page content and the
reader must scroll past significant "dead-space" before being brought to the lowest
mapped links in the side banner; or...

...in some cases the side banner is significantly shorter than the page content causing the
banner image to appear "poorly-fit" to the page design.

I considered altering the 2nd table instance in the above design so that the banner is carried
in a <td> tag that is adjacent to the page content and hopefully to allow the tag carrying the
image to size relative to the <td> tag carring the content....

Code:

<table>
   <tr>
      <td>
         <img usemap="Map1">
         <map name="Map1">
            <area>
            <area>
            <area>
         </map>
      </td>
   </tr>
</table>
<table>
   <tr>
      <td size="100%">
         <img name="Map2">
         <map>
            <area>
            <area>
            <area>
         </map>
      </td>
      <td size="100%" >
         <table>
            ***PAGE CONTENT***
         </table>
      </td>
   <tr>
<table>

The problem I've found with this is that as the content size causes the image to "flex", either
readablilty or image quality or both are effected, AND the mappings become inconsistent as the
image coordinates constantly change.

I've considered 2 solutions and am leaning toward one, but thought I'd post this and see if there
are better ideas I'm overlooking.

One idea was to add additional table rows inside the [PAGE CONTENT] table presumably creating a
"defalut" page size that would never be smaller than a standard for the side banner.
Problem: larger page sizes are still a problem as are the changing map coordinates

My other idea was to return to the original page design listed first above and again settle on
a standard side banner "height"... ...any page that was significantly longer than that height
would be split to 2 or more pages with a [NEXT>>] button at the bottom of the page navigating to
the additional content.
Problem: ...possible complications splitting content...
Benefit: ...consistent page design that allows a consistent side banner with navigable links...


Question for the group:
Does this sound reasonable?
Are there better alternatives I am overlooking?

THANKS IN ADVANCE FOR ALL INPUT!!

I have a large background image that I am trying to resize depending on resolution.

here's the site: http://coloradoorganiclandscaping.com/

Any ideas?

Situation:

My site allows people to upload their profile picture - nothing new. However, when someone wants to view the profile of my members I want their profile picture to be displayed proudly.

The problem is that members will upload different sizes of images, mostly between 200 x 400. But there are times a member will upload a very large image, or a very small image.

When I do image resizing I can't seem to get the small images to look correct because I set the width at 200px, which causes the image to auto resize proportionately to it's height as well, So it look ok. But small images that are already under 200px are stretched.

Is there a way to make the html resize an image no greater than 200 px, but not affect images already under the 200px limit?

thanks!

Hi

I know how to resize an image to certain dimensions

Code:

<IMG src="http:www.example.com/image.jpg" alt="Image" align="top" border="0" width="50" height="50">

However, I dont want that!

I want to resize it according to its original shape

Like Myspace do with Images

The image is resized but stays tall or wide

What is the resizing code guys

Hi

Can someone tell me how I can stop an image from moving behind a table - next to it - when the browser window is reduced?

Here's the page
http://www.tall-shiprace.com/2009/04/19/1247/

When I re-size (from the bottom right corner of the browser) the image floats behind the table - to the left of the image.

Can this be stopped??