Thanks again.
By using tables and testing I have found that using a % in
the width
property sets the width of the object compared to the
window. So if
a table or image is set to width: 100% then it will be the
width of
the screen. However, if the left property is located half
way across
the screen then the width of the web page actually becomes 1
1/2
times the width of the screen (because the table begins half
way
across the screen and then continues to the right the full
width of
the screen).
What I am trying to achieve is the following. Assume that
the screen
width is 1000 px.
If an image has its left property at 500 px I want it to
expand to
500 px to reach to the end of the screen.
If an image has its left property at 800 px I want it to
expand to
200 px to reach to the end of the screen.
If the screen size is changed to 1500 px then
- If an image has its left property at 500 px I want it to
expand to
1000 px to reach to the end of the screen.
- If an image has its left property at 800 px I want it to
expand to
700 px to reach to the end of the screen.
Here is my revised code:
<table border="2" cellpadding="0"
cellspacing="0" style="z-index:
100; left: 0px; width: 100%; position: absolute; top: 626px;
height: 100%" >
<tr>
<td colspan="2" style="height:
114px; width: 100%;">
<IMG src="img-home/headerback.gif"
id="imgLogoRight"
border="0" style="left: 80px; top: 19px;
height: 90px; z-index: 120;
position: absolute; width: 100%;">
</td>
</tr>
</table>
The table expands to become the same size as the screen, but
so does
the image. Because the image begins at 80 px it overruns
the right
edge by 80 px.
David
At 28/05/2006, you wrote:
>What I have noted is that the images are outside tables.
Probably you need
>to put them inside <TD> so that they are
positioned proportionally to the
>website.
>
>In addition, you are using pixels for width and height
of objects. I suppose
>you need to use percentage if you want them to resize as
the browser is
>being resized.
>
>You could also look at HTML code of websites that resize
automatically.
>
>Boster.
>
>-----Original Message-----
>From: Discussion of building .NET applications targeted
for the Web
>[mailto OTNET-WE
B DISCUSS.DEVELOP.COM] On Behalf Of David Emerson
>Sent: 26 May 2006 23:39
>To: DOTNET-WEBDISCUSS.DEVELOP.COM
>Subject: Re: [DOTNET-WEB] Resizing pages to fill Browser
>
>I have tried all sorts of permutations (except of course
the correct
>one :-() without any success.
>
>Here is my code *I have taken out all the other objects
except for
>the ones I want to expand to the right to fill the
browser
>window. It is in Visual Studio Web Developer 2.0. The
page is a
>Master Page. I don't want the table to expand - just
the two IMG controls.
>
>With the current settings, the first IMG control
(imgLogoRight)
>expands to the same size as the width of the rest of the
screen so
>that the actual page width is twice the screen width.
>
>The second IMG control (imgFooterRight) remains at 110
px (as expected).
>
>Back to my original question - I would like my web
pages to
>shrink/expand to fill the web browser screen regardless
of the
>display settings of the users screen. Can anyone give
me a hint as
>to what command I should be looking for?
>
>html xmlns="http://www.w3.org/1999/x
html" >
><head runat="server">
> <title>Untitled Page</title>
> <link href="StyleSheet.css"
rel="stylesheet" type="text/css"
/>
></head>
><body scroll="auto" style="width:
100%" >
> <form id="form1"
runat="server">
> <div style="width: 100%" >
>
> <IMG
src="img-home/headerback.gif"
id="imgLogoRight"
>width=100% border="0" style="left:
909px; position: absolute; top:
>0px; height: 90px; z-index: 120;">
> <IMG
src="img-home/footer-back.gif"
id="imgFooterRight"
>style="left: 909px; position: absolute; top:
595px; width: 110px;
>z-index: 122;" height="20">
> <table border="0"
cellpadding="0" cellspacing="0"
>style="z-index: 99; left: 11px; width: 100%;
position: absolute; top:
>16px; height: 105%">
> <tr>
> <td colspan="2"
style="height: 83px">
> </td>
> </tr>
> <tr>
> <td style="width: 145px;
height: 42px">
> </td>
> <td style="vertical-align:
top; width: 630px;
>height: 42px; text-align: left;">
> <asp:ContentPlaceHolder
ID="ContentPlaceHolder1"
runat="server">
> </asp:ContentPlaceHolder>
> </td>
> </tr>
> <tr>
> <td colspan="2"
style="height: 10px">
> </td>
> </tr>
> </table>
> </div>
> </form>
></body>
></html>
>
>David
===================================
This list is hosted by DevelopMentorŪ http://www.develop.com
View archives and manage your subscription(s) at http://discuss.develop.com
|