HTML - Screen Size

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

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

Thanks...

Hi! I'm new to this site and new to HTML so please don't bash me. I really need help with a problem I have. I have four images as my buttons and links to various pages on my site. They're rectangles that spread out horizontally on my screen. However, not all computer screens are the same size, so at school for example, since the screen is smaller, the order of my links gets messed up. Is there any way to size an image so that it is 25% of a moniter? If so, could someone just like, right the code down so I may copy? I"m really bad at html. Any help would be appreciated. Thanks!

Hi,

I'm currently designing this website:

www.carmelalopez.com

and I'm trying to get the images on the left to fit the size of the browser screen on the right when you click on them. The images themselves are huge, so I'd like some kind of code that resizes the images to fit the size of the visitor's screen, which will vary from user to user.

This might not be an HTML question (maybe CSS), but any guidance in the right direction would be greatly appreciated.

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

I placed all my adsense ads into iFrames but when I resize the window small all the ads are pushed to the middle of the screen. How can I make them stay put.

I tried working with divs too but it makes the ads the highest layer and it makes an invisible border stretching across the screen and I cant click anything thats in that border range.

heres some of my code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style2.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<center>
<head>

<title>BIO</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
</tr>
</table>
<!-- End ImageReady Slices -->

<iframe src="/adsense.htm" width="120px" height="600px" frameborder="0" style="position:relative;Left:1173;bottom:865" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe>

<iframe src="/adsense2.htm" width="120px" height="600px" frameborder="0" style="position:relative;Left:-92;bottom:865" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe>


<iframe src="/adsense3.htm" width="728px" height="90px" frameborder="0" style="position:relative;Left:50;bottom:518" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe>

<iframe src="/adsense4.htm" width="336px" height="280px" frameborder="0" style="position:relative;Left:195;bottom:1560" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe>

</body>
</center>
</html>

i have 2 frames in my parent frame say 1.htm ie left frame and 2.htm ie right frame
now this 1.htm is quite a long frame and has a scrollbar
and 2.htm is a short one
i dont the scroll bar beside my frame 1 but want it to be for my entire parent window
ie i wont to scroll both my left and right frames together
how do i do that

Hi!

I have a page that contains a text area. What I want it to do is to change its size according to the size of the browser window.

How can I make it do that?

I did it once but just can't seem to remember how I did it.

Thanks

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!!

Hello,

Problem/No Problem, I don't really know. However, it is a problem that I want to get rid off cause it completely annoys me.

The problem is, I have set the body width/height to 100%, so the background image is going off screen a little. If I set the width lower, it will most likely leave a white spot in higher resolutions.

I took a screenshot so you can see what I mean:


Although I don't know if I am explaining correctly, I don't know how else to explain it. I'm sure you will get what I mean.

Here is the method I am using in the CSS:
Code:

body {  width: 100%; height: 100%;  background: url(images/box.jpg); font-family: 'Arial'; color: white; margin: 4%; }

There is no need to show the HTML, all that's there is me calling the method.

Thanks in advance

Hi,

I have a very simple HTML. It has an rtl body that includes:
* a left aligned table (400 width)
* a ul

In EE I see both of these elements inside the screen, but in FF2 the ul is displayed outside the screen!

I also tried various doctypes.

Any idea?

Code:

<html>
  <body dir="rtl">
     <table align="left" width="400">
       <tr>
         <td>In screen</td>
       </tr>
     </table>

     <ul>
       <li>Outside of screen in FF</li>
    </ul>
  </body>
</html>

TIA,
Dror

How the screen to divide into four parts a line?

Alright I am new to this and I just finshed a fairly elaborate site for a buddy of mine. However, I didn't realise I was setting the whole site up under my screen resolution which is 1680x1050. Is there any way to make the site automatically adapt to different screen resolutions without me having to change every page I made. Please Help !!!

Hi,

Im in the process of creating some tutorials to go on my website. Once i have my list i want to be able to have the links to open up a new browser window in teh most simplist way instead of the page loading in the same browser window.

Also if its not that much harder i would like it to just be the tutorial which pops up and none of the browsers menu's, icons or address bar. Im not to worried about doing it this way if its juest as easy but if its more complicated then a simple open new window script will do fine.

I've seen some ways of doing it with Java. is this the best way and does anyone know of a good guide or website instructing on how to do it?

Thanks in advance