...

View Full Version : Web page doesn't fully show on all monitors



Cobra2011
07-03-2011, 01:37 AM
I am new to html so I hope someone can help. I created a webpage using share point designer. On my 22 monitor it looks great after uploading it, on my laptop not so great. I cannot see the bottom 1/4 of the picture and text that I have. Maybe someone can help. thank you

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>


<meta http-equiv="Content-Language" content="en-us" />


<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden; text-align:left;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{position:absolute; z-index:1; width:100%; height:100%;}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
#content {padding:5px 300px 20px 200px;}
p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
#fixed {position:absolute; top:25px; left:10px; width:160px; z-index:10; color:#567; border:1px solid #000; padding:10px;}
.style1 {
text-align: center;
}
</style>
</head>

<body style="background-image: url('images/orange.gif')">

<div class="style1">

<table border="0" cellpadding="0" cellspacing="0" style="width: 1403px; height: 735px">
<!-- MSTableType="layout" -->
<tr>
<td valign="top">
<!-- MSCellType="DecArea" -->
</td>
<td valign="top" style="height: 102px">
<!-- MSCellType="ContentHead" -->
<img alt="" src="images/coollogo_com-204063720.png" width="1117" height="102" /></td>
</tr>
<tr>
<td valign="top" style="width: 286px">
<!-- MSCellType="NavBody" -->
<div class="left_column_narrow" style="width: 252px;">
<h2 class="section_header">&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://xxxxx.com/biography.htm">Biography</a></h2>
<div class="style1"></div>
<div class="section_content" style="height:auto;">


<div style="float:left;width:250px;margin-top:2px;" class="style1"><b>&nbsp;&nbsp;&nbsp;
<a href="mailto:xxxx@xxxxx.com">Email xxxx</a></b><br />
<br />
</div>

<div class="style1"><b><b><a href="mailto:xx@xxxxxx.com">Email xx</a></b><br />
<br />
<b></b><a href="mailto:xxxx@xxxxx.com">Email xxx</a></b><br />
<br />
<br />
<a href="http://xxxx.com/contest.htm">
<img src="images/contest.png" width="146" height="99"></a> <br />
Click on the logo to ENTER<br />
<br />
<a href="http://www.xxxx.com/store/index/artist_937337m">
<img src="images/shirt.png" width="146" height="99"></a> <br />
Click to go to our store<br />
<br />
<br />
<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><style> html .fb_share_link { padding:2px 0 0 20px; height:16px; background:url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top left; }</style><a rel="nofollow" href="http://www.facebook.com/share.php?u=<;http://xxxx.com>" onclick="return fbs_click()" target="_blank" class="fb_share_link">Share on Facebook</a><br />
<br />
<br />
<br />
</b><a href="mailto:xxx@xxxx.com">Email The Web Admin</a></b>




<td valign="top" style="height: 633px; width: 1117px">
<!-- MSCellType="ContentBody" -->
<img alt="" src="newgroup.jpg" width="1106" height="630" /></td>
</tr>
</table>




</div>
<p class="style1">&nbsp;</p>

Sammy12
07-03-2011, 01:41 AM
take out the height from the table.

You can't set a width and a height for a page, because resolutions (width and height of a computer screen) or different among computers. Therefore a laptop height isn't as large as a desktop height.

You set the height to 735px, try replacing that with:




min-height: 100%;

Cobra2011
07-03-2011, 01:56 AM
take out the height from the table.

You can't set a width and a height for a page, because resolutions (width and height of a computer screen) or different among computers. Therefore a laptop height isn't as large as a desktop height.

You set the height to 735px, try replacing that with:




min-height: 100%;



Like this ? <table border="0" cellpadding="0" cellspacing="0" style="width: 1403px; height: min-height: 100%;> if that is right, it still cuts off the bottom 1/4

Sammy12
07-03-2011, 02:28 AM
<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden; text-align:left;}


this code is on like line 20. Delete the overflow: hidden;

Cobra2011
07-03-2011, 02:45 AM
<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden; text-align:left;}


this code is on like line 20. Delete the overflow: hidden;

ok, that seemed to work, I now can see the slider on both the side and bottom . code looks like this now, thank you very much

html, body {margin:0; padding:0; width:100%; height:100%; text-align:left;}

Sammy12
07-03-2011, 03:27 AM
if you don't want the x silder, you can use

overflow-x: hidden; but then the picture will be cut off to the right

Cobra2011
07-03-2011, 04:04 AM
if you don't want the x silder, you can use

overflow-x: hidden; but then the picture will be cut off to the right

I would rather have the full page showing, so the slider is fine lol. Now I kind of have the opposite issue with my 2nd page. On my 22" monitor it doesn't take up the entire screen and on my lap top it looks good, kind cramped but lol. I believe I centered the entire page

<!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-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.style1 {
text-align: center;
}
.style3 {
text-align: center;
font-size: large;
}
.style5 {
font-family: "Times New Roman";
}
.style6 {
text-decoration: underline;
}
.style7 {
margin-right: 0px;
}
</style>
</head>

<body style="background-image: url('orange.gif')">


<table border="0" cellpadding="0" cellspacing="0" style="width: 1361px; height: 546px">
<!-- MSTableType="layout" -->
<tr>
<td valign="top" colspan="3" style="height: 74px" class="style1">
<!-- MSCellType="ContentHead" -->
<img alt="" src="coollogo_com-204063720.png" width="1189" height="102" /></td>
</tr>
<tr>
<td valign="top" rowspan="4" style="width: 225px" class="style1">
<!-- MSCellType="NavBody" -->
<img alt="" src="3ofthem.jpg" width="312" height="418" class="style7" /></td>
<td valign="top" style="height: 107px" class="style1">
<!-- MSCellType="ContentHead2" -->
<img alt="" src="VidContest.png" width="623" height="91" /></td>
<td valign="top" rowspan="4" style="width: 227px" class="style1">
<!-- MSCellType="NavBody2" -->
<img alt="" src="3ofthemflipped.jpg" width="312" height="418" /></td>
</tr>
<tr>
<td valign="top" style="height: 105px" class="style3">
<!-- MSCellType="ContentBody" -->
To all of xxxxx x xxxx xxxxxx xxxxxx fan base, this is what we are
looking for.&nbsp; Submit to us your most xxxx xxxxxx for an opportunity
to be chosen to be in one of our upcoming videos. Two lucky winners will
be chosen by xxxxx x xxxx xxxxxxs at a later date.&nbsp; Winners will be
verified prior to being in the video. So be outrageous, be xxxx, be xxx
but most of all be<br />
xxxxx x xxxx !!!</td>
</tr>
<tr>
<td valign="top" style="height: 105px" class="style1">
<!-- MSCellType="ContentBody2" -->
<strong>Contest Rules<br />
<span class="style5">●&nbsp; </span><span class="style6">You must also
include an e-mail address as well as a 2nd way to get in touch with you
if you are selected<br />
<span class="style5">●&nbsp; If you are a winner, you agree to have your
first name and possibly you picture posted on our site</span></span></strong><br />
<span class="style5">●<strong>&nbsp; </strong> </span><span class="style6">
<strong>You must be at
least 18 years of age or older to participate</strong></span><strong><br />
</strong><span class="style5"><strong>●&nbsp; </strong>
<span class="style6"><strong>If your picture cannot be verified we will
chose the runner up&#39;s<br />
●&nbsp; You picture
must contain a clear view of your face</strong><br />
&nbsp;</span></span><br />
</td>
</tr>
<tr>
<td valign="top" style="height: 105px; width: 909px" class="style1">
<!-- MSCellType="ContentFoot" -->
<br />
<br />
All photos should be submitted to the Web Admin for xxxxx x xxxx xxxxxx
by clicking on the ENTER button below.<br />
<br />
<a href="mailto:&#119;ebadmin&#64;xxxxxxxxx&#115;.com">Email The Web Admin</a><br />
<br />
</td>
</tr>
<tr>
<td valign="top" colspan="3" style="height: 50px" class="style1">
<!-- MSCellType="ContentFoot2" -->
&nbsp;</td>
</tr>
</table>


</body>

</html>

Sammy12
07-03-2011, 05:39 AM
If you don't use %, then it will always appear differently in different computers. I think for a beginning scripter I was suggest sticking with px though.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum