HTML - Text Size Based On Screen Res

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

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,

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.

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 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 have different stylesheets depending on screen resolution, so that everything is in place when the browser is maximized. This also includes a javascript code to swap out images based on screen resolution to avoid browser based image resizing.

My menu uses mouseovers, but I can't figure out how to combine the mouseover command as well as the javascvript image swap.

As an example, I'm looking to have a 76px image that will change to another 76px image via mouseover. Then if you have a larger screen, I'm looking to make that a 180px image that changes to another 180px image via mouseover.

Here's my image swap code:

Code:

function loadPic()
{
if (screen.width <= 800)
{
document.getElementById('news').src="news800.png";
document.getElementById('about').src="about800.png";
document.getElementById('blog').src="blog800.png";
document.getElementById('film').src="film800.png";
document.getElementById('photos').src="photos800.png";
document.getElementById('access').src="access800.png";
document.getElementById('set').src="set800.png";
document.getElementById('the').src="the800.png";
document.getElementById('whole').src="whole800.png";
document.getElementById('world').src="world800.png";
document.getElementById('on').src="on800.png";
document.getElementById('fire').src="fire800.png";
}

and here's my mouseover code:
Code:

<a onmouseover="document.images['i1'].src='set1280.png'" onmouseout="document.images['i1'].id='news'" href="http://bweissnews.blogspot.com/" target="inside_frame"><img id="news" name="i1" border=0></a></div>

Any help would be much appreciated! Thanks in advance.

So I know if you use "%" to define your height and width with tables that it allows you the table to resize based upon a users browser size. My question is how can you do this with images? I tried setting my height and width for my image using "%" but then my image just becomes overly stretched. My professor said that I should create a table and than place the image within the table, and then set the table height and width using "%". The code below is what I tried. It didn't work though.

Any ideas on how to do this?

Code:

<body>
<table width="100%" height="100%" border="0">
  <tr>
    <td height="100%" width="100%"><p align="center"><img src="images/Banner.png" align="center" class="source-image" /></p></td>
  </tr>
</table>
</body>

Thank you for your help!

Hi, I just got back into HTML and CSS and stuff for a new project after a lengthy absence. I'm also trying out PHP for the first time and having a lot of fun with it, but I'm having problems as usual. This doesn't have to do with PHP per se, but if PHP is involved in the solution that'd be just fine. By contrast, I'd like to avoid Javascript, since a lot of people have it disabled by default.

One of the things that's always irked me about CSS is how it seems to be completely impossible to define an element's width/height based on its container's width/height without using percentages or without weird things happening when you use padding. Say I want to do one of the simplest things imagineable -- define a rectangular area within the page, with 25 pixels both to the left and right of it, and 12 pixels above and below it, no matter what the browser window's size is.

While it's no task to set the rectangle's position relative to the body of the page (using left and top, or whatever), deciding its width or, particularly, height seems to be impossible. 100% - 25px is, sadly, not allowed, even if I incorporate PHP, since PHP has no way of telling what the 100% actually represents. I've been puzzling over this for the last couple hours, and after a great deal of fiddling with alignments, margins, padding, and such, these two pieces of really simple HTML are the best I could do, and they're both flawed:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<style type="text/css">
	<!--
		body
		{
			margin: 0px;
			padding: 12px 25px 12px 25px;
			background-color: darkblue;
		}
		
		#inner_box
		{
			position: relative;
			width: 100%;
			height: 100%;
			background-color: lightblue;
		}
	-->
	</style>
</head>
<body>

<div id="inner_box">
	Text
</div>

</body>
</html>

Paste that into a HTML file to see what I'm talking about graphically. The problem here is clearly that, for whatever reason, the 100% height in inner_box doesn't activate and inner_box ends up only as high as a single line of text allows. I don't know why. But in this next example...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<style type="text/css">
	<!--
		body
		{
			margin: 0px;
			padding: 0px;
			background-color: darkblue;
		}
		
		#outer_box
		{
			position: absolute;
			margin: 0px;
			padding: 12px 25px 12px 25px;
			width: 100%;
			height: 100%;
			background-color: lightblue;
		}
		
		#inner_box
		{
			position: relative;
			width: 100%;
			height: 100%;
			background-color: white;
		}
	-->
	</style>
</head>
<body>

<div id="outer_box">
	<div id="inner_box">
		Text
	</div>
</div>

</body>
</html>

Here I've fixed the problems with the first snippet by adding a new container (outer_box) with absolute positioning that covers the entire body area. inner_box goes inside it and tries to act like it did in the first example. Unfortunately, for some reason, outer_box doesn't act like the body tag did in the first example -- when padding is added to it in order to position the elements within it, outer_box expands itself instead of just resizing inner_box, like the body tag did.

I've done a lot of experimenting and I simply can't find the solution. All I want is a page with a few pixels of blank space to all sides of a floating rectangle. I uploaded a couple of doctored image samples of what the page should look like, but doesn't: here and here.

Anyway, in summation, this is driving me nuts. I know I could probably use Javascript to get the container (body or outer_box)'s width, and go from there, but like I said, I'd rather avoid Javascript. There has to be a better way to do this.

Any help would be very welcome.

EDIT: After some more experimenting, I've discovered something interesting. If I declare example 1's doctype to be:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

then it works properly. The same cannot be said for example 2. And I really can't tell why. I guess HTML forgives something that XHTML doesn't. Also, example 1 doesn't work if I include the HTML doctype's URL:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Strange. Anyway though, it's important to make example 2 work since I would usually be working with containers within containers, not just within the body tag. So I still haven't solved my problem.

On my website I have a Biography page that has a lot of text. On Mozilla Firefox the text automatically fits to the screen so the viewer doesn't have to scroll from left to right to see all the text. On Internet Explorer, however, the text doesn't fit to the screen (no matter what size it is). Is there a way to fix this? I don't want to have a fixed width on my text because I want my page to just seem natural. Any advice would be greatly appreciated!

Hey everyone,

I feel like this is a noob question, but I'm going to ask anyway. How do write my site so that my body stays in the same place and doesn't smash together when I manually resize my page?

Any help is greatly appreciated. Thanks

I get how to align two sections of text, one at the left of screen and one on the right, but how do I put this line at the bottom of the screen? I tried pretty much every combination now, bottom:0, vertical-align:bottom, vertical-align:text-bottom, with and without a parent div container, nothing works! The moment I try to put the line of text at the bottom of the screen the left/right alignment would be messed up or it wouldn't show at all. It seems html only allows you to align it left/right OR bottom/top, but not both?
Any help is appreciated.

This is what I have so far:

Code:

HTML:
<div style="clear:both;" id="bottom">
  <p class="left">Text to go on left.</p>
  <p class="right">Text to go on right.</p>
</div>

CSS:
#bottom {
bottom:0;
}
.left {
float: left;
}
.right {
float: right;
}

How do I change the text size of a link

HTML Code:

<a href = "E:\Senior Project\pizza.html target="_blank" style= "color:blue">PIZZA</a>

Hello. I'm helping my 9yo son make a webpage, and I have stumbled across a text display behavior I don't understand. See images below.

The issue is that text over a certain size does not appear correctly in IE6. The 1st image shows the file as created in Nvu, with rows of incrementally larger text. The 2nd shows the file in Firefox; each row of text is larger than the last, as it should be. The 3rd attachment shows the same file in IE6; after the 5th row, the text size remains the same. Why doesn't the text display correctly in IE6? I tried on another PC; same result. The upshot is that my son's webpage looks correct (i.e. as it looked when designed in Nvu) when viewed in Firefox, but not in IE6.

Is this correctable?

Thanks.

Looking for the html code for center text, and text size. I want to center some text and increase its size from normal.